Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts / trunk

Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts vtrunk

content-blocks-builder / src / features / width / index.js

index.js in Content Blocks Builder – Create blocks, repeater blocks with carousel, grid, popup layouts trunk, at src/features/width/index.js

220 lines 5.5 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import { isEmpty } from "lodash";
5
6	/**
7	* WordPress dependencies
8	*/
9	import { __ } from "@wordpress/i18n";
10	import { addFilter } from "@wordpress/hooks";
11	import { createHigherOrderComponent } from "@wordpress/compose";
12	import {
13	Fill,
14	__experimentalToolsPanelItem as ToolsPanelItem,
15	} from "@wordpress/components";
16	import { hasBlockSupport } from "@wordpress/blocks";
17	import { useMemo } from "@wordpress/element";
18
19	/**
20	* Internal dependencies
21	*/
22	import { ToggleGroupCustomControl } from "sdk/components";
23	import {
24	getBreakpointType,
25	getAllBreakpoints,
26	handleChangeResponsiveSettingField,
27	getResponsiveSettingFieldValue,
28	getStyleForResponsiveToggleGroupField,
29	getStyleForResponsiveToggleGroupFieldDeprecatedV1,
30	addEditProps,
31	} from "sdk/utils";
32	import { boldblocksHasSupport } from "../../utils";
33	import { labels } from "../../utils/labels";
34
35	/**
36	* Import styles
37	*/
38	// import "./index.style.scss";
39
40	/**
41	* Debugging
42	*/
43	// import { useDebugInformation } from "../../debug";
44
45	/**
46	* Define feature name
47	*/
48	const featureName = "width";
49
50	/**
51	* Get styles for the feature.
52	*
53	* @param {Object} attributes
54	* @param {Boolean} hasDeprecatedV1
55	*/
56	function getFeatureStyle(attributes, hasDeprecatedV1) {
57	const { boldblocks: { width = {} } = {} } = attributes;
58
59	return hasDeprecatedV1
60	? getStyleForResponsiveToggleGroupFieldDeprecatedV1(width, "width")
61	: getStyleForResponsiveToggleGroupField(width, "width");
62	}
63
64	/**
65	* Override the default edit UI to include new inspector controls for custom settings.
66	*
67	* @param {Function} BlockEdit Block edit component.
68	* @return {Function} BlockEdit Modified block edit component.
69	*/
70	const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
71	return (props) => {
72	if (!boldblocksHasSupport(props.name, featureName)) {
73	return <BlockEdit {...props} />;
74	}
75
76	const { attributes, setAttributes, isSelected } = props;
77
78	const { boldblocks = {}, boldblocks: { width = {} } = {} } = attributes;
79
80	// Get all breakpoints
81	const allBreakpoints = getAllBreakpoints();
82
83	// Get current breakpoint
84	const breakpoint = getBreakpointType();
85
86	const valueByDevice = useMemo(
87	() =>
88	getResponsiveSettingFieldValue({
89	fieldName: "width",
90	attributes,
91	breakpoint,
92	}),
93	[attributes, breakpoint],
94	);
95
96	const onFeatureChange = handleChangeResponsiveSettingField({
97	fieldName: "width",
98	setAttributes,
99	attributes,
100	breakpoint,
101	allBreakpoints,
102	});
103
104	// Debugging
105	// useDebugInformation("width", attributes);
106
107	const label = __("Width", "content-blocks-builder");
108
109	return (
110	<>
111	<BlockEdit {...props} />
112	{isSelected && (
113	<Fill name="cbb-panel-dimensions">
114	<ToolsPanelItem
115	label={label}
116	panelId="cbb-panel-dimensions"
117	hasValue={() => !isEmpty(width)}
118	onDeselect={() =>
119	setAttributes({ boldblocks: { ...boldblocks, width: {} } })
120	}
121	>
122	<ToggleGroupCustomControl
123	name="width"
124	label={label}
125	value={valueByDevice}
126	onChange={onFeatureChange}
127	options={[
128	{
129	value: "100vw",
130	label: labels.fullScreen,
131	},
132	{ value: "100%", label: "100%" },
133	{
134	value: "auto",
135	label: labels.auto,
136	},
137	{
138	value: "custom",
139	label: labels.custom,
140	},
141	]}
142	isResponsive={true}
143	/>
144	</ToolsPanelItem>
145	</Fill>
146	)}
147	</>
148	);
149	};
150	}, "withInspectorControls");
151	addFilter(
152	"editor.BlockEdit",
153	`boldblocks/${featureName}/withInspectorControls`,
154	withInspectorControls,
155	);
156
157	/**
158	* Override props assigned to save component to inject the CSS variables definition.
159	*
160	* @param {Object} props Additional props applied to save element.
161	* @param {Object} blockType Block type.
162	* @param {Object} attributes Block attributes.
163	*
164	* @return {Object} Filtered props applied to save element.
165	*/
166	export function addSaveProps(props, blockType, attributes) {
167	if (!boldblocksHasSupport(blockType, featureName)) {
168	return props;
169	}
170
171	const hasDeprecatedV1 = hasBlockSupport(
172	blockType,
173	"CBBDeprecatedStyleUnsetValueV1",
174	);
175
176	const isDeprecatedDynamicStyle = hasBlockSupport(
177	blockType,
178	"CBBDeprecatedDynamicStyleV1",
179	);
180
181	let featureStyles = {};
182	if (attributes?.isBlockEdit) {
183	featureStyles = getFeatureStyle(attributes, hasDeprecatedV1);
184	} else {
185	if (isDeprecatedDynamicStyle) {
186	featureStyles = getFeatureStyle(attributes, hasDeprecatedV1);
187	}
188	}
189
190	props.style = {
191	...props.style,
192	...featureStyles,
193	};
194
195	return props;
196	}
197	addFilter(
198	"blocks.getSaveContent.extraProps",
199	`boldblocks/${featureName}/addSaveProps`,
200	addSaveProps,
201	);
202
203	/**
204	* Filters registered block settings to extend the block edit wrapper
205	* to apply the desired styles and className properly.
206	*
207	* @param {Object} settings Original block settings.
208	*
209	* @return {Object}.Filtered block settings.
210	*/
211	addFilter(
212	"blocks.registerBlockType",
213	`boldblocks/${featureName}/addEditProps`,
214	addEditProps(
215	addSaveProps,
216	(settings, { featureName }) => boldblocksHasSupport(settings, featureName),
217	{ featureName },
218	),
219	);
220