: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
[`${variation}-${clientId}`]: variationStyles
}, [mergedConfig, globalSettings, globalStyles, variation, clientId, name]);
// Rather than leveraging `useInstanceId` here, the `clientId` is used.
// This is so that the variation style override's ID is predictable
// when the order of applied style variations changes.
function block_style_variation_useBlockProps({
} = (0,external_wp_data_namespaceObject.useSelect)(external_wp_blocks_namespaceObject.store);
const registeredStyles = getBlockStyles(name);
const variation = getVariationNameFromClass(className, registeredStyles);
const variationClass = `${VARIATION_PREFIX}${variation}-${clientId}`;
} = useBlockStyleVariation(name, variation, clientId);
const variationStyles = (0,external_wp_element_namespaceObject.useMemo)(() => {
const variationConfig = {
const blockSelectors = getBlockSelectors((0,external_wp_blocks_namespaceObject.getBlockTypes)(), getBlockStyles, clientId);
const hasBlockGapSupport = false;
const hasFallbackGapSupport = true;
const disableLayoutStyles = true;
const disableRootPadding = true;
return toStyles(variationConfig, blockSelectors, hasBlockGapSupport, hasFallbackGapSupport, disableLayoutStyles, disableRootPadding, {
}, [variation, settings, styles, getBlockStyles, clientId]);
id: `variation-${clientId}`,
__unstableType: 'variation',
// The clientId will be stored with the override and used to ensure
// the order of overrides matches the order of blocks so that the
// correct CSS cascade is maintained.
className: variationClass
/* harmony default export */ const block_style_variation = ({
attributeKeys: ['className'],
}) => getVariationMatches(className).length > 0,
useBlockProps: block_style_variation_useBlockProps
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/hooks/layout.js
const layoutBlockSupportKey = 'layout';
kebabCase: layout_kebabCase
} = unlock(external_wp_components_namespaceObject.privateApis);
function hasLayoutBlockSupport(blockName) {
return (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockName, 'layout') || (0,external_wp_blocks_namespaceObject.hasBlockSupport)(blockName, '__experimentalLayout');
* Generates the utility classnames for the given block's layout attributes.
* @param { Object } blockAttributes Block attributes.
* @param { string } blockName Block name.
* @return { Array } Array of CSS classname strings.
function useLayoutClasses(blockAttributes = {}, blockName = '') {
default: defaultBlockLayout
} = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, layoutBlockSupportKey) || {};
const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize ? {
} : layout || defaultBlockLayout || {};
const layoutClassnames = [];
if (LAYOUT_DEFINITIONS[usedLayout?.type || 'default']?.className) {
const baseClassName = LAYOUT_DEFINITIONS[usedLayout?.type || 'default']?.className;
const splitBlockName = blockName.split('/');
const fullBlockName = splitBlockName[0] === 'core' ? splitBlockName.pop() : splitBlockName.join('-');
const compoundClassName = `wp-block-${fullBlockName}-${baseClassName}`;
layoutClassnames.push(baseClassName, compoundClassName);
const hasGlobalPadding = (0,external_wp_data_namespaceObject.useSelect)(select => {
return (usedLayout?.inherit || usedLayout?.contentSize || usedLayout?.type === 'constrained') && select(store).getSettings().__experimentalFeatures?.useRootPaddingAwareAlignments;
}, [usedLayout?.contentSize, usedLayout?.inherit, usedLayout?.type]);
layoutClassnames.push('has-global-padding');
if (usedLayout?.orientation) {
layoutClassnames.push(`is-${layout_kebabCase(usedLayout.orientation)}`);
if (usedLayout?.justifyContent) {
layoutClassnames.push(`is-content-justification-${layout_kebabCase(usedLayout.justifyContent)}`);
if (usedLayout?.flexWrap && usedLayout.flexWrap === 'nowrap') {
layoutClassnames.push('is-nowrap');
* Generates a CSS rule with the given block's layout styles.
* @param { Object } blockAttributes Block attributes.
* @param { string } blockName Block name.
* @param { string } selector A selector to use in generating the CSS rule.
* @return { string } CSS rule.
function useLayoutStyles(blockAttributes = {}, blockName, selector) {
// Update type for blocks using legacy layouts.
const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize ? {
const fullLayoutType = getLayoutType(usedLayout?.type || 'default');
const [blockGapSupport] = use_settings_useSettings('spacing.blockGap');
const hasBlockGapSupport = blockGapSupport !== null;
return fullLayoutType?.getLayoutStyle?.({
function LayoutPanelPure({
const settings = useBlockSettings(blockName);
// Block settings come from theme.json under settings.[blockName].
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
themeSupportsLayout: getSettings().supportsLayout
const blockEditingMode = useBlockEditingMode();
if (blockEditingMode !== 'default') {
// Layout block support comes from the block's block.json.
const layoutBlockSupport = (0,external_wp_blocks_namespaceObject.getBlockSupport)(blockName, layoutBlockSupportKey, {});
const blockSupportAndThemeSettings = {
default: defaultBlockLayout
} = blockSupportAndThemeSettings;
* Try to find the layout type from either the
* block's layout settings or any saved layout config.
const blockSupportAndLayout = {
type: defaultType = 'default'
} = blockSupportAndLayout;
const blockLayoutType = type || defaultType;
// Only show the inherit toggle if it's supported,
// and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.
const showInheritToggle = !!(allowInheriting && (!blockLayoutType || blockLayoutType === 'default' || blockLayoutType === 'constrained' || blockSupportAndLayout.inherit));
const usedLayout = layout || defaultBlockLayout || {};
* `themeSupportsLayout` is only relevant to the `default/flow` or
* `constrained` layouts and it should not be taken into account when other
* `layout` types are used.
if ((blockLayoutType === 'default' || blockLayoutType === 'constrained') && !themeSupportsLayout) {
const layoutType = getLayoutType(blockLayoutType);
const constrainedType = getLayoutType('constrained');
const displayControlsForLegacyLayouts = !usedLayout.type && (contentSize || inherit);
const hasContentSizeOrLegacySettings = !!inherit || !!contentSize;
const onChangeType = newType => setAttributes({
const onChangeLayout = newLayout => setAttributes({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(inspector_controls, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_components_namespaceObject.PanelBody, {
title: (0,external_wp_i18n_namespaceObject.__)('Layout'),
children: [showInheritToggle && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_ReactJSXRuntime_namespaceObject.Fragment, {
children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ToggleControl, {
__nextHasNoMarginBottom: true,
className: "block-editor-hooks__toggle-control",
label: (0,external_wp_i18n_namespaceObject.__)('Inner blocks use content width'),
checked: layoutType?.name === 'constrained' || hasContentSizeOrLegacySettings,
onChange: () => setAttributes({
type: layoutType?.name === 'constrained' || hasContentSizeOrLegacySettings ? 'default' : 'constrained'
help: layoutType?.name === 'constrained' || hasContentSizeOrLegacySettings ? (0,external_wp_i18n_namespaceObject.__)('Nested blocks use content width with options for full and wide widths.') : (0,external_wp_i18n_namespaceObject.__)('Nested blocks will fill the width of this container. Toggle to constrain.')
}), !inherit && allowSwitching && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(LayoutTypeSwitcher, {
}), layoutType && layoutType.name !== 'default' && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(layoutType.inspectorControls, {
onChange: onChangeLayout,
layoutBlockSupport: blockSupportAndThemeSettings,
}), constrainedType && displayControlsForLegacyLayouts && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(constrainedType.inspectorControls, {
onChange: onChangeLayout,
layoutBlockSupport: blockSupportAndThemeSettings,
}), !inherit && layoutType && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(layoutType.toolBarControls, {
onChange: onChangeLayout,
layoutBlockSupport: layoutBlockSupport,
/* harmony default export */ const layout = ({
shareWithChildBlocks: true,
attributeKeys: ['layout'],
return hasLayoutBlockSupport(name);
function LayoutTypeSwitcher({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.ButtonGroup, {
children: getLayoutTypes().map(({
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_components_namespaceObject.Button, {
isPressed: type === name,
onClick: () => onChange(name),
* Filters registered block settings, extending attributes to include `layout`.
* @param {Object} settings Original block settings.
* @return {Object} Filtered block settings.
function layout_addAttribute(settings) {
var _settings$attributes$;
if ('type' in ((_settings$attributes$ = settings.attributes?.layout) !== null && _settings$attributes$ !== void 0 ? _settings$attributes$ : {})) {
if (hasLayoutBlockSupport(settings)) {
function BlockWithLayoutStyles({
const id = (0,external_wp_compose_namespaceObject.useInstanceId)(BlockListBlock);
default: defaultBlockLayout
} = (0,external_wp_blocks_namespaceObject.getBlockSupport)(name, layoutBlockSupportKey) || {};
const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize ? {
} : layout || defaultBlockLayout || {};
const selectorPrefix = `wp-container-${layout_kebabCase(name)}-is-layout-`;
// Higher specificity to override defaults from theme.json.
const selector = `.${selectorPrefix}${id}`;
const hasBlockGapSupport = blockGapSupport !== null;
// Get CSS string for the current layout type.
// The CSS and `style` element is only output if it is not empty.
const fullLayoutType = getLayoutType(usedLayout?.type || 'default');
const css = fullLayoutType?.getLayoutStyle?.({
style: attributes?.style,
// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
const layoutClassNames = dist_clsx({
[`${selectorPrefix}${id}`]: !!css // Only attach a container class if there is generated CSS to be attached.
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListBlock, {
__unstableLayoutClassNames: layoutClassNames
* Override the default block element to add the layout styles.
* @param {Function} BlockListBlock Original component.
* @return {Function} Wrapped component.
const withLayoutStyles = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(BlockListBlock => props => {
const blockSupportsLayout = hasLayoutBlockSupport(name);
const layoutClasses = useLayoutClasses(attributes, name);
const extraProps = (0,external_wp_data_namespaceObject.useSelect)(select => {
// The callback returns early to avoid block editor subscription.
if (!blockSupportsLayout) {
} = unlock(select(store));
if (disableLayoutStyles) {
const [blockGapSupport] = getBlockSettings(clientId, 'spacing.blockGap');
}, [blockSupportsLayout, clientId]);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockListBlock, {
__unstableLayoutClassNames: blockSupportsLayout ? layoutClasses : undefined
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BlockWithLayoutStyles, {
layoutClasses: layoutClasses,
(0,external_wp_hooks_namespaceObject.addFilter)('blocks.registerBlockType', 'core/layout/addAttribute', layout_addAttribute);
(0,external_wp_hooks_namespaceObject.addFilter)('editor.BlockListBlock', 'core/editor/layout/with-layout-styles', withLayoutStyles);
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-editor/build-module/components/grid-visualizer/grid-item-resizer.js
function GridItemResizer({
const blockElement = useBlockElement(clientId);
const rootBlockElement = blockElement?.parentElement;
if (!blockElement || !rootBlockElement) {
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(GridItemResizerInner, {
blockElement: blockElement,
rootBlockElement: rootBlockElement,