| 1 |
/** |
| 2 |
* External dependencies |
| 3 |
*/ |
| 4 |
import clsx from "clsx"; |
| 5 |
|
| 6 |
/** |
| 7 |
* WordPress dependencies |
| 8 |
*/ |
| 9 |
import { __ } from "@wordpress/i18n"; |
| 10 |
import { addFilter } from "@wordpress/hooks"; |
| 11 |
import { hasBlockSupport } from "@wordpress/blocks"; |
| 12 |
|
| 13 |
/** |
| 14 |
* Internal dependencies |
| 15 |
*/ |
| 16 |
import { |
| 17 |
isValidSettingObject, |
| 18 |
getColorCSSValue, |
| 19 |
getColorCSSValueDeprecatedV1, |
| 20 |
addEditProps, |
| 21 |
} from "sdk/utils"; |
| 22 |
|
| 23 |
import { boldblocksHasSupport } from "../../utils"; |
| 24 |
|
| 25 |
/** |
| 26 |
* Import styles |
| 27 |
*/ |
| 28 |
import "./index.style.scss"; |
| 29 |
|
| 30 |
/** |
| 31 |
* Define feature name |
| 32 |
*/ |
| 33 |
const featureName = "steps"; |
| 34 |
|
| 35 |
/** |
| 36 |
* Get styles for the feature. |
| 37 |
* |
| 38 |
* @param {Object} attributes |
| 39 |
* @param {Object} |
| 40 |
*/ |
| 41 |
function getFeatureStyle(attributes, { isCSSColorDeprecatedV1 }) { |
| 42 |
const { boldblocks: { steps = {} } = {} } = attributes; |
| 43 |
|
| 44 |
let style = {}; |
| 45 |
if (isValidSettingObject(steps)) { |
| 46 |
const { |
| 47 |
startAt = 0, |
| 48 |
increment = 1, |
| 49 |
width: { value: width = ".5em" } = {}, |
| 50 |
fontSize: { value: fontSize = "2em" } = {}, |
| 51 |
textColor, |
| 52 |
backgroundColor, |
| 53 |
} = steps; |
| 54 |
style = { |
| 55 |
...style, |
| 56 |
"--bb--step-start": startAt + "", |
| 57 |
"--bb--step-increment": increment + "", |
| 58 |
"--bb--step-width": width, |
| 59 |
"--bb--step-font-size": fontSize, |
| 60 |
}; |
| 61 |
|
| 62 |
let colorCSS; |
| 63 |
if (isCSSColorDeprecatedV1) { |
| 64 |
colorCSS = getColorCSSValueDeprecatedV1(textColor); |
| 65 |
} else { |
| 66 |
colorCSS = getColorCSSValue(textColor); |
| 67 |
} |
| 68 |
if (colorCSS) { |
| 69 |
style = { ...style, "--bb--step-color": colorCSS }; |
| 70 |
} |
| 71 |
|
| 72 |
let bgCSS; |
| 73 |
if (isCSSColorDeprecatedV1) { |
| 74 |
bgCSS = getColorCSSValueDeprecatedV1(backgroundColor); |
| 75 |
} else { |
| 76 |
bgCSS = getColorCSSValue(backgroundColor); |
| 77 |
} |
| 78 |
if (bgCSS) { |
| 79 |
style = { ...style, "--bb--step-bg": bgCSS }; |
| 80 |
} |
| 81 |
} |
| 82 |
|
| 83 |
return style; |
| 84 |
} |
| 85 |
|
| 86 |
/* |
| 87 |
{ |
| 88 |
steps: { |
| 89 |
enableSteps: false, |
| 90 |
startAt: 0, |
| 91 |
fontSize: { fontSize: "4em", value: "4em" }, |
| 92 |
width: { width: ".5em", value: ".5em" }, |
| 93 |
increment: 1, |
| 94 |
position: "left-middle", |
| 95 |
relativePosition: "outside", |
| 96 |
stepsType: "", |
| 97 |
}, |
| 98 |
} |
| 99 |
*/ |
| 100 |
|
| 101 |
/** |
| 102 |
* Override props assigned to save component to inject the CSS variables definition. |
| 103 |
* |
| 104 |
* @param {Object} props Additional props applied to save element. |
| 105 |
* @param {Object} blockType Block type. |
| 106 |
* @param {Object} attributes Block attributes. |
| 107 |
* |
| 108 |
* @return {Object} Filtered props applied to save element. |
| 109 |
*/ |
| 110 |
export function addSaveProps(props, blockType, attributes) { |
| 111 |
if (!boldblocksHasSupport(blockType, featureName)) { |
| 112 |
return props; |
| 113 |
} |
| 114 |
|
| 115 |
const { boldblocks: { steps = {} } = {} } = attributes; |
| 116 |
|
| 117 |
if (!isValidSettingObject(steps)) { |
| 118 |
return props; |
| 119 |
} |
| 120 |
|
| 121 |
// Bail if the steps is not enabled. |
| 122 |
if (!steps?.enableSteps) { |
| 123 |
return props; |
| 124 |
} |
| 125 |
|
| 126 |
const { |
| 127 |
relativePosition = "outside", |
| 128 |
position = "top-center", |
| 129 |
inheritStyle = false, |
| 130 |
stepsType = "", |
| 131 |
} = steps; |
| 132 |
|
| 133 |
props.className = clsx(props.className, "list-steps", { |
| 134 |
[`list-steps-${position}`]: position, |
| 135 |
[`list-steps-${relativePosition}`]: relativePosition, |
| 136 |
["steps-inherit-style"]: inheritStyle, |
| 137 |
[`list-steps--${stepsType}`]: stepsType, |
| 138 |
}); |
| 139 |
|
| 140 |
props.style = { |
| 141 |
...props.style, |
| 142 |
...getFeatureStyle(attributes, { |
| 143 |
isCSSColorDeprecatedV1: hasBlockSupport( |
| 144 |
blockType, |
| 145 |
"CBBDeprecatedCSSColorV1", |
| 146 |
), |
| 147 |
}), |
| 148 |
}; |
| 149 |
|
| 150 |
return props; |
| 151 |
} |
| 152 |
addFilter( |
| 153 |
"blocks.getSaveContent.extraProps", |
| 154 |
`boldblocks/${featureName}/addSaveProps`, |
| 155 |
addSaveProps, |
| 156 |
); |
| 157 |
|
| 158 |
/** |
| 159 |
* Filters registered block settings to extend the block edit wrapper |
| 160 |
* to apply the desired styles and className properly. |
| 161 |
* |
| 162 |
* @param {Object} settings Original block settings. |
| 163 |
* |
| 164 |
* @return {Object}.Filtered block settings. |
| 165 |
*/ |
| 166 |
addFilter( |
| 167 |
"blocks.registerBlockType", |
| 168 |
`boldblocks/${featureName}/addEditProps`, |
| 169 |
addEditProps( |
| 170 |
addSaveProps, |
| 171 |
(settings, { featureName }) => boldblocksHasSupport(settings, featureName), |
| 172 |
{ featureName }, |
| 173 |
), |
| 174 |
); |
| 175 |
|
