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 2e150322c1762..680064dc1f70d 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 272e8ed5348a9..5a5c4004465e2 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 (
+