diff --git a/lib/experimental/block-editor-settings.php b/lib/experimental/block-editor-settings.php index 97e58448653be..0da93d6f0ce1a 100644 --- a/lib/experimental/block-editor-settings.php +++ b/lib/experimental/block-editor-settings.php @@ -73,19 +73,16 @@ function get_post_content_block( $blocks ) { } if ( ! empty( $current_template ) ) { - $template_blocks = parse_blocks( $current_template[0]->content ); - $post_content_block = get_post_content_block( $template_blocks ); + $template_blocks = parse_blocks( $current_template[0]->content ); + $post_content_block = get_post_content_block( $template_blocks ); + $post_content_attributes = $post_content_block['attrs']; - if ( ! empty( $post_content_block ) ) { - // mismatched naming x(. - if ( empty( $post_content_block['attributes'] ) && ! empty( $post_content_block['attrs'] ) ) { - $post_content_block['attributes'] = $post_content_block['attrs']; - } - $settings['postContentBlock'] = $post_content_block; + if ( ! empty( $post_content_attributes ) ) { + $settings['postContentAttributes'] = $post_content_attributes; } } return $settings; } -add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_experimental', PHP_INT_MAX ); \ No newline at end of file +add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_experimental', PHP_INT_MAX ); diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index f279cc37d1516..2a6089de4f13b 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -35,11 +35,12 @@ const layoutBlockSupportKey = '__experimentalLayout'; /** * Generates the utility classnames for the given block's layout attributes. * - * @param { Object } block Block object. + * @param { Object } layout Layout object. + * @param { string } blockName Block name. * * @return { Array } Array of CSS classname strings. */ -export function useLayoutClasses( block = {} ) { +export function useLayoutClasses( layout, blockName ) { const rootPaddingAlignment = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().__experimentalFeatures @@ -47,11 +48,8 @@ export function useLayoutClasses( block = {} ) { }, [] ); const globalLayoutSettings = useSetting( 'layout' ) || {}; - const { attributes = {}, name } = block; - const { layout } = attributes; - const { default: defaultBlockLayout } = - getBlockSupport( name, layoutBlockSupportKey ) || {}; + getBlockSupport( blockName, layoutBlockSupportKey ) || {}; const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize ? { ...layout, type: 'constrained' } @@ -100,14 +98,14 @@ export function useLayoutClasses( block = {} ) { /** * Generates a CSS rule with the given block's layout styles. * - * @param { Object } block Block object. - * @param { string } selector A selector to use in generating the CSS rule. + * @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. */ -export function useLayoutStyles( block = {}, selector ) { - const { attributes = {}, name } = block; - const { layout = {}, style = {} } = attributes; +export function useLayoutStyles( blockAttributes, blockName, selector ) { + const { layout = {}, style = {} } = blockAttributes; // Update type for blocks using legacy layouts. const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize @@ -118,7 +116,7 @@ export function useLayoutStyles( block = {}, selector ) { const blockGapSupport = useSetting( 'spacing.blockGap' ); const hasBlockGapSupport = blockGapSupport !== null; const css = fullLayoutType?.getLayoutStyle?.( { - blockName: name, + blockName, selector, layout, layoutDefinitions: globalLayoutSettings?.definitions, @@ -338,7 +336,7 @@ export const withInspectorControls = createHigherOrderComponent( */ export const withLayoutStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const { name, attributes, block } = props; + const { name, attributes } = props; const hasLayoutBlockSupport = hasBlockSupport( name, layoutBlockSupportKey @@ -360,7 +358,7 @@ export const withLayoutStyles = createHigherOrderComponent( ? { ...layout, type: 'constrained' } : layout || defaultBlockLayout || {}; const layoutClasses = hasLayoutBlockSupport - ? useLayoutClasses( block ) + ? useLayoutClasses( layout, name ) : null; // Higher specificity to override defaults from theme.json. const selector = `.wp-container-${ id }.wp-container-${ id }`; diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index aaff398a3ef52..d74cd22c8a677 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -81,7 +81,7 @@ export default function VisualEditor( { styles } ) { deviceType, isWelcomeGuideVisible, isTemplateMode, - postContentBlock, + postContentAttributes, wrapperBlockName, wrapperUniqueId, isBlockBasedTheme, @@ -108,7 +108,7 @@ export default function VisualEditor( { styles } ) { deviceType: __experimentalGetPreviewDeviceType(), isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), isTemplateMode: _isTemplateMode, - postContentBlock: getEditorSettings().postContentBlock, + postContentAttributes: getEditorSettings().postContentAttributes, wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme, @@ -192,7 +192,12 @@ export default function VisualEditor( { styles } ) { return { type: 'default' }; }, [ isTemplateMode, themeSupportsLayout, globalLayoutSettings ] ); - const postContentLayoutClasses = useLayoutClasses( postContentBlock ); + const layout = postContentAttributes?.layout || {}; + + const postContentLayoutClasses = useLayoutClasses( + layout, + 'core/post-content' + ); const blockListLayoutClass = classnames( { @@ -202,12 +207,11 @@ export default function VisualEditor( { styles } ) { ); const postContentLayoutStyles = useLayoutStyles( - postContentBlock, + postContentAttributes, + 'core/post-content', '.block-editor-block-list__layout.is-root-container' ); - const layout = postContentBlock?.attributes?.layout || {}; - // Update type for blocks using legacy layouts. const postContentLayout = useMemo( () => { return layout && @@ -227,7 +231,7 @@ export default function VisualEditor( { styles } ) { // If there is a Post Content block we use its layout for the block list; // if not, this must be a classic theme, in which case we use the fallback layout. - const blockListLayout = postContentBlock + const blockListLayout = postContentAttributes ? postContentLayout : fallbackLayout;