diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 9048ca6183bd1..7baa5fec4ffd6 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -25,6 +25,56 @@ function gutenberg_register_layout_support( $block_type ) {
}
}
+/**
+ * Generates the CSS corresponding to the provided layout.
+ *
+ * @param string $selector CSS selector.
+ * @param array $layout Layout object.
+ *
+ * @return string CSS style.
+ */
+function gutenberg_get_layout_style( $selector, $layout ) {
+ $layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
+
+ $style = '';
+ if ( 'default' === $layout_type ) {
+ $content_size = isset( $layout['contentSize'] ) ? $layout['contentSize'] : null;
+ $wide_size = isset( $layout['wideSize'] ) ? $layout['wideSize'] : null;
+
+ $all_max_width_value = $content_size ? $content_size : $wide_size;
+ $wide_max_width_value = $wide_size ? $wide_size : $content_size;
+
+ // Make sure there is a single CSS rule, and all tags are stripped for security.
+ // TODO: Use `safecss_filter_attr` instead - once https://core.trac.wordpress.org/ticket/46197 is patched.
+ $all_max_width_value = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] );
+ $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );
+
+ $style = '';
+ if ( $content_size || $wide_size ) {
+ $style = "$selector > * {";
+ $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
+ $style .= 'margin-left: auto !important;';
+ $style .= 'margin-right: auto !important;';
+ $style .= '}';
+
+ $style .= "$selector > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
+
+ $style .= "$selector .alignfull { max-width: none; }";
+ }
+
+ $style .= "$selector .alignleft { float: left; margin-right: 2em; }";
+ $style .= "$selector .alignright { float: right; margin-left: 2em; }";
+ } elseif ( 'flex' === $layout_type ) {
+ $style = "$selector {";
+ $style .= 'display: flex;';
+ $style .= 'column-gap: 0.5em;';
+ $style .= 'align-items: center;';
+ $style .= '}';
+ }
+
+ return $style;
+}
+
/**
* Renders the layout config to the block wrapper.
*
@@ -49,34 +99,8 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$used_layout = $default_layout;
}
- $id = uniqid();
- $content_size = isset( $used_layout['contentSize'] ) ? $used_layout['contentSize'] : null;
- $wide_size = isset( $used_layout['wideSize'] ) ? $used_layout['wideSize'] : null;
-
- $all_max_width_value = $content_size ? $content_size : $wide_size;
- $wide_max_width_value = $wide_size ? $wide_size : $content_size;
-
- // Make sure there is a single CSS rule, and all tags are stripped for security.
- // TODO: Use `safecss_filter_attr` instead - once https://core.trac.wordpress.org/ticket/46197 is patched.
- $all_max_width_value = wp_strip_all_tags( explode( ';', $all_max_width_value )[0] );
- $wide_max_width_value = wp_strip_all_tags( explode( ';', $wide_max_width_value )[0] );
-
- $style = '';
- if ( $content_size || $wide_size ) {
- $style = ".wp-container-$id > * {";
- $style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
- $style .= 'margin-left: auto !important;';
- $style .= 'margin-right: auto !important;';
- $style .= '}';
-
- $style .= ".wp-container-$id > .alignwide { max-width: " . esc_html( $wide_max_width_value ) . ';}';
-
- $style .= ".wp-container-$id .alignfull { max-width: none; }";
- }
-
- $style .= ".wp-container-$id .alignleft { float: left; margin-right: 2em; }";
- $style .= ".wp-container-$id .alignright { float: right; margin-left: 2em; }";
-
+ $id = uniqid();
+ $style = gutenberg_get_layout_style( ".wp-container-$id", $used_layout );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
@@ -99,17 +123,17 @@ function () use ( $style ) {
return $content;
}
-// This can be removed when plugin support requires WordPress 5.8.0+.
-if ( ! function_exists( 'wp_render_layout_support_flag' ) ) {
- // Register the block support.
- WP_Block_Supports::get_instance()->register(
- 'layout',
- array(
- 'register_attribute' => 'gutenberg_register_layout_support',
- )
- );
- add_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
+// Register the block support. (overrides core one).
+WP_Block_Supports::get_instance()->register(
+ 'layout',
+ array(
+ 'register_attribute' => 'gutenberg_register_layout_support',
+ )
+);
+if ( function_exists( 'wp_render_layout_support_flag' ) ) {
+ remove_filter( 'render_block', 'wp_render_layout_support_flag' );
}
+add_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
/**
* For themes without theme.json file, make sure
diff --git a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
index 64b85323a4c52..6f420f0ca8ca9 100644
--- a/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
+++ b/packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
@@ -8,22 +8,35 @@ import { useSelect } from '@wordpress/data';
*/
import { useLayout } from '../block-list/layout';
import { store as blockEditorStore } from '../../store';
+import { getLayoutType } from '../../layouts';
const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
const WIDE_CONTROLS = [ 'wide', 'full' ];
export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
- const { wideControlsEnabled = false } = useSelect( ( select ) => {
- const { getSettings } = select( blockEditorStore );
- const settings = getSettings();
- return {
- wideControlsEnabled: settings.alignWide,
- };
- }, [] );
+ const { wideControlsEnabled = false, themeSupportsLayout } = useSelect(
+ ( select ) => {
+ const { getSettings } = select( blockEditorStore );
+ const settings = getSettings();
+ return {
+ wideControlsEnabled: settings.alignWide,
+ themeSupportsLayout: settings.supportsLayout,
+ };
+ },
+ []
+ );
const layout = useLayout();
- const supportsAlignments = layout.type === 'default';
+ const layoutType = getLayoutType( layout?.type );
+ const layoutAlignments = layoutType.getAlignments( layout );
+
+ if ( themeSupportsLayout ) {
+ return layoutAlignments.filter( ( control ) =>
+ controls.includes( control )
+ );
+ }
- if ( ! supportsAlignments ) {
+ // Starting here, it's the fallback for themes not supporting the layout config.
+ if ( layoutType.name !== 'default' ) {
return [];
}
const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
diff --git a/packages/block-editor/src/components/block-list/layout.js b/packages/block-editor/src/components/block-list/layout.js
index e29fb8ab05cca..79ff15811ab52 100644
--- a/packages/block-editor/src/components/block-list/layout.js
+++ b/packages/block-editor/src/components/block-list/layout.js
@@ -3,26 +3,15 @@
*/
import { createContext, useContext } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { getLayoutType } from '../../layouts';
+
export const defaultLayout = { type: 'default' };
const Layout = createContext( defaultLayout );
-function appendSelectors( selectors, append ) {
- // Ideally we shouldn't need the `.editor-styles-wrapper` increased specificity here
- // The problem though is that we have a `.editor-styles-wrapper p { margin: reset; }` style
- // it's used to reset the default margin added by wp-admin to paragraphs
- // so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers
- // When the post editor is fully iframed, this extra classname could be removed.
-
- return selectors
- .split( ',' )
- .map(
- ( subselector ) =>
- `.editor-styles-wrapper ${ subselector } ${ append }`
- )
- .join( ',' );
-}
-
/**
* Allows to define the layout.
*/
@@ -35,39 +24,12 @@ export function useLayout() {
return useContext( Layout );
}
-export function LayoutStyle( { selector, layout = {} } ) {
- const { contentSize, wideSize } = layout;
-
- let style =
- !! contentSize || !! wideSize
- ? `
- ${ appendSelectors( selector, '> *' ) } {
- max-width: ${ contentSize ?? wideSize };
- margin-left: auto !important;
- margin-right: auto !important;
- }
-
- ${ appendSelectors( selector, '> [data-align="wide"]' ) } {
- max-width: ${ wideSize ?? contentSize };
- }
-
- ${ appendSelectors( selector, '> [data-align="full"]' ) } {
- max-width: none;
- }
- `
- : '';
-
- style += `
- ${ appendSelectors( selector, '> [data-align="left"]' ) } {
- float: left;
- margin-right: 2em;
- }
+export function LayoutStyle( { layout = {}, ...props } ) {
+ const layoutType = getLayoutType( layout.type );
- ${ appendSelectors( selector, '> [data-align="right"]' ) } {
- float: right;
- margin-left: 2em;
- }
- `;
+ if ( layoutType ) {
+ return ;
+ }
- return ;
+ return null;
}
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index d091c51fc40e0..546bce1855cef 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -251,15 +251,6 @@
&[data-clear="true"] {
float: none;
}
-
- // This essentially duplicates the mobile styles for the appender component.
- // It would be nice to be able to use element queries in that component instead https://github.com/tomhodgins/element-queries-spec
- .block-editor-block-list__layout {
- .block-editor-default-block-appender .block-editor-inserter {
- left: auto;
- right: $grid-unit-10;
- }
- }
}
.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
diff --git a/packages/block-editor/src/components/default-block-appender/index.js b/packages/block-editor/src/components/default-block-appender/index.js
index 5f3b52bcb2881..0911af35f6ed9 100644
--- a/packages/block-editor/src/components/default-block-appender/index.js
+++ b/packages/block-editor/src/components/default-block-appender/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
@@ -37,7 +42,9 @@ export function DefaultBlockAppender( {
return (
{
+ const layoutBlockSupportConfig = getBlockSupport(
+ blockTypeOrName,
+ layoutBlockSupportKey
+ );
+
+ return layoutBlockSupportConfig?.allowSwitching;
+};
+
+function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
const { layout = {} } = attributes;
- const { wideSize, contentSize, inherit = false } = layout;
const defaultLayout = useSetting( 'layout' );
const themeSupportsLayout = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
return getSettings().supportsLayout;
}, [] );
- const units = useCustomUnits( {
- availableUnits: useSetting( 'spacing.units' ) || [
- '%',
- 'px',
- 'em',
- 'rem',
- 'vw',
- ],
- } );
-
if ( ! themeSupportsLayout ) {
return null;
}
+
+ const allowLayoutSwitching = canBlockSwitchLayout( blockName );
+ const { inherit = false, type = 'default' } = layout;
+ const layoutType = getLayoutType( type );
+
+ const onChangeType = ( newType ) =>
+ setAttributes( { layout: { type: newType } } );
+ const onChangeLayout = ( newLayout ) =>
+ setAttributes( { layout: newLayout } );
+
return (
@@ -65,84 +74,43 @@ function LayoutPanel( { setAttributes, attributes } ) {
}
/>
) }
- { ! inherit && (
- <>
-
-
- {
- nextWidth =
- 0 > parseFloat( nextWidth )
- ? '0'
- : nextWidth;
- setAttributes( {
- layout: {
- ...layout,
- contentSize: nextWidth,
- },
- } );
- } }
- units={ units }
- />
-
-
-
- {
- nextWidth =
- 0 > parseFloat( nextWidth )
- ? '0'
- : nextWidth;
- setAttributes( {
- layout: {
- ...layout,
- wideSize: nextWidth,
- },
- } );
- } }
- units={ units }
- />
-
-
-
-
-
-
- >
+
+ { ! inherit && allowLayoutSwitching && (
+
+ ) }
+
+ { ! inherit && layoutType && (
+
) }
-
- { __(
- 'Customize the width for all elements that are assigned to the center or wide columns.'
- ) }
-
);
}
+function LayoutTypeSwitcher( { type, onChange } ) {
+ return (
+
+ { getLayoutTypes().map( ( { name, label } ) => {
+ return (
+
+ );
+ } ) }
+
+ );
+}
+
/**
* Filters registered block settings, extending attributes to include `layout`.
*
@@ -154,7 +122,7 @@ export function addAttribute( settings ) {
if ( has( settings.attributes, [ 'layout', 'type' ] ) ) {
return settings;
}
- if ( hasBlockSupport( settings, '__experimentalLayout' ) ) {
+ if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {
settings.attributes = {
...settings.attributes,
layout: {
@@ -178,7 +146,7 @@ export const withInspectorControls = createHigherOrderComponent(
const { name: blockName } = props;
const supportLayout = hasBlockSupport(
blockName,
- '__experimentalLayout'
+ layoutBlockSupportKey
);
return [
@@ -199,7 +167,7 @@ export const withInspectorControls = createHigherOrderComponent(
export const withLayoutStyles = createHigherOrderComponent(
( BlockListBlock ) => ( props ) => {
const { name, attributes } = props;
- const supportLayout = hasBlockSupport( name, '__experimentalLayout' );
+ const supportLayout = hasBlockSupport( name, layoutBlockSupportKey );
const id = useInstanceId( BlockListBlock );
const defaultLayout = useSetting( 'layout' ) || {};
if ( ! supportLayout ) {
diff --git a/packages/block-editor/src/hooks/test/align.js b/packages/block-editor/src/hooks/test/align.js
index 903ba635c94bd..39e61d833e32d 100644
--- a/packages/block-editor/src/hooks/test/align.js
+++ b/packages/block-editor/src/hooks/test/align.js
@@ -213,7 +213,7 @@ describe( 'align', () => {
act( () => {
wrapper = renderer.create(
{ `${ appendSelectors( selector ) } {
+ display: flex;
+ column-gap: 0.5em;
+ align-items: center;
+ }` }
+ );
+ },
+
+ getOrientation() {
+ return 'horizontal';
+ },
+
+ getAlignments() {
+ return [];
+ },
+};
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
new file mode 100644
index 0000000000000..8c350f4e229fc
--- /dev/null
+++ b/packages/block-editor/src/layouts/flow.js
@@ -0,0 +1,155 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ Button,
+ __experimentalUseCustomUnits as useCustomUnits,
+ __experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+import { appendSelectors } from './utils';
+
+export default {
+ name: 'default',
+
+ label: __( 'Flow' ),
+
+ edit: function LayoutDefaultEdit( { layout, onChange } ) {
+ const { wideSize, contentSize } = layout;
+ const units = useCustomUnits( {
+ availableUnits: useSetting( 'spacing.units' ) || [
+ '%',
+ 'px',
+ 'em',
+ 'rem',
+ 'vw',
+ ],
+ } );
+
+ return (
+ <>
+
+
+ {
+ nextWidth =
+ 0 > parseFloat( nextWidth )
+ ? '0'
+ : nextWidth;
+ onChange( {
+ ...layout,
+ contentSize: nextWidth,
+ } );
+ } }
+ units={ units }
+ />
+
+
+
+ {
+ nextWidth =
+ 0 > parseFloat( nextWidth )
+ ? '0'
+ : nextWidth;
+ onChange( {
+ ...layout,
+ wideSize: nextWidth,
+ } );
+ } }
+ units={ units }
+ />
+
+
+
+
+
+
+
+
+ { __(
+ 'Customize the width for all elements that are assigned to the center or wide columns.'
+ ) }
+
+ >
+ );
+ },
+
+ save: function DefaultLayoutStyle( { selector, layout = {} } ) {
+ const { contentSize, wideSize } = layout;
+
+ let style =
+ !! contentSize || !! wideSize
+ ? `
+ ${ appendSelectors( selector, '> *' ) } {
+ max-width: ${ contentSize ?? wideSize };
+ margin-left: auto !important;
+ margin-right: auto !important;
+ }
+
+ ${ appendSelectors( selector, '> [data-align="wide"]' ) } {
+ max-width: ${ wideSize ?? contentSize };
+ }
+
+ ${ appendSelectors( selector, '> [data-align="full"]' ) } {
+ max-width: none;
+ }
+ `
+ : '';
+
+ style += `
+ ${ appendSelectors( selector, '> [data-align="left"]' ) } {
+ float: left;
+ margin-right: 2em;
+ }
+
+ ${ appendSelectors( selector, '> [data-align="right"]' ) } {
+ float: right;
+ margin-left: 2em;
+ }
+ `;
+
+ return ;
+ },
+
+ getOrientation() {
+ return 'vertical';
+ },
+
+ getAlignments( layout ) {
+ if ( layout.alignments !== undefined ) {
+ return layout.alignments;
+ }
+
+ return layout.contentSize || layout.wideSize
+ ? [ 'wide', 'full', 'left', 'center', 'right' ]
+ : [ 'left', 'center', 'right' ];
+ },
+};
diff --git a/packages/block-editor/src/layouts/index.js b/packages/block-editor/src/layouts/index.js
new file mode 100644
index 0000000000000..928876c1365f7
--- /dev/null
+++ b/packages/block-editor/src/layouts/index.js
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import flex from './flex';
+import flow from './flow';
+
+const layoutTypes = [ flow, flex ];
+
+/**
+ * Retrieves a layout type by name.
+ *
+ * @param {string} name - The name of the layout type.
+ * @return {Object} Layout type.
+ */
+export function getLayoutType( name = 'default' ) {
+ return layoutTypes.find( ( layoutType ) => layoutType.name === name );
+}
+
+/**
+ * Retrieves the available layout types.
+ *
+ * @return {Array} Layout types.
+ */
+export function getLayoutTypes() {
+ return layoutTypes;
+}
diff --git a/packages/block-editor/src/layouts/utils.js b/packages/block-editor/src/layouts/utils.js
new file mode 100644
index 0000000000000..89e83fdbfb41e
--- /dev/null
+++ b/packages/block-editor/src/layouts/utils.js
@@ -0,0 +1,23 @@
+/**
+ * Utility to generate the proper CSS selector for layout styles.
+ *
+ * @param {string|string[]} selectors - CSS selectors
+ * @param {boolean} append - string to append.
+ *
+ * @return {string} - CSS selector.
+ */
+export function appendSelectors( selectors, append = '' ) {
+ // Ideally we shouldn't need the `.editor-styles-wrapper` increased specificity here
+ // The problem though is that we have a `.editor-styles-wrapper p { margin: reset; }` style
+ // it's used to reset the default margin added by wp-admin to paragraphs
+ // so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers
+ // When the post editor is fully iframed, this extra classname could be removed.
+
+ return selectors
+ .split( ',' )
+ .map(
+ ( subselector ) =>
+ `.editor-styles-wrapper ${ subselector } ${ append }`
+ )
+ .join( ',' );
+}
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index cc7a14c7cf771..5628ea0105ce8 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -12,7 +12,6 @@ import {
} from '@wordpress/block-editor';
import { SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
-import { useMemo } from '@wordpress/element';
function GroupEdit( { attributes, setAttributes, clientId } ) {
const { hasInnerBlocks, themeSupportsLayout } = useSelect(
@@ -29,21 +28,6 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
const defaultLayout = useSetting( 'layout' ) || {};
const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
- const { contentSize, wideSize } = usedLayout;
- const _layout = useMemo( () => {
- if ( themeSupportsLayout ) {
- const alignments =
- contentSize || wideSize
- ? [ 'wide', 'full', 'left', 'center', 'right' ]
- : [ 'left', 'center', 'right' ];
- return {
- type: 'default',
- // Find a way to inject this in the support flag code (hooks).
- alignments,
- };
- }
- return undefined;
- }, [ themeSupportsLayout, contentSize, wideSize ] );
const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps(
@@ -55,7 +39,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
renderAppender: hasInnerBlocks
? undefined
: InnerBlocks.ButtonBlockAppender,
- __experimentalLayout: _layout,
+ __experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
}
);
diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
index 537181c6b8cd8..6fb898fab3c44 100644
--- a/packages/block-library/src/post-content/edit.js
+++ b/packages/block-library/src/post-content/edit.js
@@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
-import { useMemo, RawHTML } from '@wordpress/element';
+import { RawHTML } from '@wordpress/element';
import {
useBlockProps,
__experimentalUseInnerBlocksProps as useInnerBlocksProps,
@@ -46,21 +46,6 @@ function EditableContent( { layout, context = {} } ) {
}, [] );
const defaultLayout = useSetting( 'layout' ) || {};
const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
- const { contentSize, wideSize } = usedLayout;
- const _layout = useMemo( () => {
- if ( themeSupportsLayout ) {
- const alignments =
- contentSize || wideSize
- ? [ 'wide', 'full', 'left', 'center', 'right' ]
- : [ 'left', 'center', 'right' ];
- return {
- type: 'default',
- // Find a way to inject this in the support flag code (hooks).
- alignments,
- };
- }
- return undefined;
- }, [ themeSupportsLayout, contentSize, wideSize ] );
const [ blocks, onInput, onChange ] = useEntityBlockEditor(
'postType',
postType,
@@ -73,7 +58,7 @@ function EditableContent( { layout, context = {} } ) {
value: blocks,
onInput,
onChange,
- __experimentalLayout: _layout,
+ __experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
}
);
return ;
diff --git a/packages/block-library/src/query/deprecated.js b/packages/block-library/src/query/deprecated.js
index e39ad4cf37249..34cb5da80f85e 100644
--- a/packages/block-library/src/query/deprecated.js
+++ b/packages/block-library/src/query/deprecated.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
/**
* WordPress dependencies
*/
@@ -38,6 +43,12 @@ const deprecated = [
supports: {
html: false,
},
+ migrate( attributes ) {
+ return {
+ ...omit( attributes, [ 'layout' ] ),
+ displayLayout: attributes.layout,
+ };
+ },
save() {
return ;
},
diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
index b03d68aceae9e..e297534ed8f79 100644
--- a/packages/block-library/src/query/edit/index.js
+++ b/packages/block-library/src/query/edit/index.js
@@ -4,7 +4,7 @@
import { useSelect, useDispatch } from '@wordpress/data';
import { cloneBlock } from '@wordpress/blocks';
import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useMemo } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
import {
BlockControls,
InspectorAdvancedControls,
@@ -45,25 +45,10 @@ export function QueryContent( { attributes, setAttributes } ) {
}, [] );
const defaultLayout = useSetting( 'layout' ) || {};
const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
- const { contentSize, wideSize } = usedLayout;
const blockProps = useBlockProps();
- const _layout = useMemo( () => {
- if ( themeSupportsLayout ) {
- const alignments =
- contentSize || wideSize
- ? [ 'wide', 'full', 'left', 'center', 'right' ]
- : [ 'left', 'center', 'right' ];
- return {
- type: 'default',
- // Find a way to inject this in the support flag code (hooks).
- alignments,
- };
- }
- return undefined;
- }, [ themeSupportsLayout, contentSize, wideSize ] );
const innerBlocksProps = useInnerBlocksProps( blockProps, {
template: TEMPLATE,
- __experimentalLayout: _layout,
+ __experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
} );
const { postsPerPage } = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index e55d7e6bdbe58..ba07a28e14f19 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -10,7 +10,6 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
export default function TemplatePartInnerBlocks( {
postId: id,
@@ -26,21 +25,6 @@ export default function TemplatePartInnerBlocks( {
}, [] );
const defaultLayout = useSetting( 'layout' ) || {};
const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
- const { contentSize, wideSize } = usedLayout;
- const _layout = useMemo( () => {
- if ( themeSupportsLayout ) {
- const alignments =
- contentSize || wideSize
- ? [ 'wide', 'full', 'left', 'center', 'right' ]
- : [ 'left', 'center', 'right' ];
- return {
- type: 'default',
- // Find a way to inject this in the support flag code (hooks).
- alignments,
- };
- }
- return undefined;
- }, [ themeSupportsLayout, contentSize, wideSize ] );
const [ blocks, onInput, onChange ] = useEntityBlockEditor(
'postType',
@@ -55,7 +39,7 @@ export default function TemplatePartInnerBlocks( {
renderAppender: hasInnerBlocks
? undefined
: InnerBlocks.ButtonBlockAppender,
- __experimentalLayout: _layout,
+ __experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
} );
return (
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 11280543f9d64..eced55ecdc0a8 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -137,7 +137,6 @@ export default function VisualEditor( { styles } ) {
};
const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode );
const defaultLayout = useSetting( 'layout' );
- const { contentSize, wideSize } = defaultLayout || {};
const previewMode = 'is-' + deviceType.toLowerCase() + '-preview';
let animatedStyles = isTemplateMode
@@ -178,18 +177,11 @@ export default function VisualEditor( { styles } ) {
}
if ( themeSupportsLayout ) {
- const alignments =
- contentSize || wideSize
- ? [ 'wide', 'full', 'left', 'center', 'right' ]
- : [ 'left', 'center', 'right' ];
- return {
- type: 'default',
- // Find a way to inject this in the support flag code (hooks).
- alignments,
- };
+ return defaultLayout;
}
+
return undefined;
- }, [ isTemplateMode, themeSupportsLayout, contentSize, wideSize ] );
+ }, [ isTemplateMode, themeSupportsLayout ] );
return (
+