From cf0b87ad2e0893324ee358c669432ec84e6be038 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 27 Sep 2022 13:22:48 +1000 Subject: [PATCH] Add layout styles from Post Content block to post editor (#44258) * Add layout styles from Post Content block to post editor * Fix post content finding logic. * Remove extra styles when Post Content block exists. * templateContent should always be a string * Memoise post content block. * Change function signature and mark experimental * _Really_ make sure templateContent is a string * Update layout type for legacy layouts. * Fix selector specificity and legacy layout logic. * Fix 404s on fetch and only parse content if needed * Fix acces to layout when no Post Content block * Add doc comment to findPostContent * Increase specificity * Remove unneeded LayoutStyle --- packages/block-editor/src/hooks/index.js | 1 + packages/block-editor/src/hooks/layout.js | 85 +++++++++--- packages/block-editor/src/index.js | 2 + .../block-library/src/post-content/edit.js | 4 +- .../src/components/visual-editor/index.js | 131 +++++++++++++++--- 5 files changed, 180 insertions(+), 43 deletions(-) diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 60a34f6ea55fb0..f6fa73a053ac58 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -20,6 +20,7 @@ import './metadata'; import './metadata-name'; export { useCustomSides } from './dimensions'; +export { useLayoutClasses, useLayoutStyles } from './layout'; export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; export { getSpacingClassesAndStyles } from './use-spacing-props'; diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index ac24fa6f4e232a..73d655c57c2acb 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -37,58 +37,101 @@ import { getLayoutType, getLayoutTypes } from '../layouts'; const layoutBlockSupportKey = '__experimentalLayout'; /** - * Generates the utility classnames for the given blocks layout attributes. - * This method was primarily added to reintroduce classnames that were removed - * in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719), rather - * than providing an extensive list of all possible layout classes. The plan is to - * have the style engine generate a more extensive list of utility classnames which - * will then replace this method. + * Generates the utility classnames for the given block's layout attributes. * - * @param { Object } layout Layout object. - * @param { Object } layoutDefinitions An object containing layout definitions, stored in theme.json. + * @param { Object } block Block object. * * @return { Array } Array of CSS classname strings. */ -function useLayoutClasses( layout, layoutDefinitions ) { +export function useLayoutClasses( block = {} ) { const rootPaddingAlignment = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().__experimentalFeatures ?.useRootPaddingAwareAlignments; }, [] ); + const globalLayoutSettings = useSetting( 'layout' ) || {}; + + const { attributes = {}, name } = block; + const { layout } = attributes; + + const { default: defaultBlockLayout } = + getBlockSupport( name, layoutBlockSupportKey ) || {}; + const usedLayout = + layout?.inherit || layout?.contentSize || layout?.wideSize + ? { ...layout, type: 'constrained' } + : layout || defaultBlockLayout || {}; + const layoutClassnames = []; - if ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) { + if ( + globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ] + ?.className + ) { layoutClassnames.push( - layoutDefinitions?.[ layout?.type || 'default' ]?.className + globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ] + ?.className ); } if ( - ( layout?.inherit || - layout?.contentSize || - layout?.type === 'constrained' ) && + ( usedLayout?.inherit || + usedLayout?.contentSize || + usedLayout?.type === 'constrained' ) && rootPaddingAlignment ) { layoutClassnames.push( 'has-global-padding' ); } - if ( layout?.orientation ) { - layoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` ); + if ( usedLayout?.orientation ) { + layoutClassnames.push( `is-${ kebabCase( usedLayout.orientation ) }` ); } - if ( layout?.justifyContent ) { + if ( usedLayout?.justifyContent ) { layoutClassnames.push( - `is-content-justification-${ kebabCase( layout.justifyContent ) }` + `is-content-justification-${ kebabCase( + usedLayout.justifyContent + ) }` ); } - if ( layout?.flexWrap && layout.flexWrap === 'nowrap' ) { + if ( usedLayout?.flexWrap && usedLayout.flexWrap === 'nowrap' ) { layoutClassnames.push( 'is-nowrap' ); } return layoutClassnames; } +/** + * 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. + * + * @return { string } CSS rule. + */ +export function useLayoutStyles( block = {}, selector ) { + const { attributes = {}, name } = block; + const { layout = {}, style = {} } = attributes; + // Update type for blocks using legacy layouts. + const usedLayout = + layout?.inherit || layout?.contentSize || layout?.wideSize + ? { ...layout, type: 'constrained' } + : layout || {}; + const fullLayoutType = getLayoutType( usedLayout?.type || 'default' ); + const globalLayoutSettings = useSetting( 'layout' ) || {}; + const blockGapSupport = useSetting( 'spacing.blockGap' ); + const hasBlockGapSupport = blockGapSupport !== null; + const css = fullLayoutType?.getLayoutStyle?.( { + blockName: name, + selector, + layout, + layoutDefinitions: globalLayoutSettings?.definitions, + style, + hasBlockGapSupport, + } ); + return css; +} + function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const { layout } = attributes; const defaultThemeLayout = useSetting( 'layout' ); @@ -299,7 +342,7 @@ export const withInspectorControls = createHigherOrderComponent( */ export const withLayoutStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const { name, attributes } = props; + const { name, attributes, block } = props; const hasLayoutBlockSupport = hasBlockSupport( name, layoutBlockSupportKey @@ -321,7 +364,7 @@ export const withLayoutStyles = createHigherOrderComponent( ? { ...layout, type: 'constrained' } : layout || defaultBlockLayout || {}; const layoutClasses = hasLayoutBlockSupport - ? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions ) + ? useLayoutClasses( block ) : null; const selector = `.${ getBlockDefaultClassName( name diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index ec0f20a8f9c892..1c81c910b21e12 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -12,6 +12,8 @@ export { getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles, getGapCSSValue as __experimentalGetGapCSSValue, useCachedTruthy, + useLayoutClasses as __experimentaluseLayoutClasses, + useLayoutStyles as __experimentaluseLayoutStyles, } from './hooks'; export * from './components'; export * from './elements'; diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index 233399a63f8d55..1949553b2540f6 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/packages/block-library/src/post-content/edit.js @@ -46,7 +46,9 @@ function EditableContent( { layout, context = {} } ) { return getSettings()?.supportsLayout; }, [] ); const defaultLayout = useSetting( 'layout' ) || {}; - const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; + const usedLayout = ! layout?.type + ? { ...defaultLayout, ...layout, type: 'default' } + : { ...defaultLayout, ...layout }; const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', postType, diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 8f6d54f064c38b..6ba8db74122d6c 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -28,6 +28,8 @@ import { __unstableUseMouseMoveTypingReset as useMouseMoveTypingReset, __unstableIframe as Iframe, __experimentalRecursionProvider as RecursionProvider, + __experimentaluseLayoutClasses as useLayoutClasses, + __experimentaluseLayoutStyles as useLayoutStyles, } from '@wordpress/block-editor'; import { useEffect, useRef, useMemo } from '@wordpress/element'; import { Button, __unstableMotion as motion } from '@wordpress/components'; @@ -35,6 +37,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useMergeRefs } from '@wordpress/compose'; import { arrowLeft } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; +import { parse } from '@wordpress/blocks'; /** * Internal dependencies @@ -82,11 +85,37 @@ function MaybeIframe( { ); } +/** + * Given an array of nested blocks, find the first Post Content + * block inside it, recursing through any nesting levels. + * + * @param {Array} blocks A list of blocks. + * + * @return {Object} The Post Content block. + */ +function findPostContent( blocks ) { + for ( let i = 0; i < blocks.length; i++ ) { + if ( blocks[ i ].name === 'core/post-content' ) { + return blocks[ i ]; + } + if ( blocks[ i ].innerBlocks.length ) { + const nestedPostContent = findPostContent( + blocks[ i ].innerBlocks + ); + + if ( nestedPostContent ) { + return nestedPostContent; + } + } + } +} + export default function VisualEditor( { styles } ) { const { deviceType, isWelcomeGuideVisible, isTemplateMode, + editedPostTemplate = {}, wrapperBlockName, wrapperUniqueId, } = useSelect( ( select ) => { @@ -94,8 +123,10 @@ export default function VisualEditor( { styles } ) { isFeatureActive, isEditingTemplate, __experimentalGetPreviewDeviceType, + getEditedPostTemplate, } = select( editPostStore ); - const { getCurrentPostId, getCurrentPostType } = select( editorStore ); + const { getCurrentPostId, getCurrentPostType, getEditorSettings } = + select( editorStore ); const _isTemplateMode = isEditingTemplate(); let _wrapperBlockName; @@ -105,10 +136,17 @@ export default function VisualEditor( { styles } ) { _wrapperBlockName = 'core/post-content'; } + const supportsTemplateMode = getEditorSettings().supportsTemplateMode; + return { deviceType: __experimentalGetPreviewDeviceType(), isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), isTemplateMode: _isTemplateMode, + // Post template fetch returns a 404 on classic themes, which + // messes with e2e tests, so we check it's a block theme first. + editedPostTemplate: supportsTemplateMode + ? getEditedPostTemplate() + : {}, wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), }; @@ -122,7 +160,6 @@ export default function VisualEditor( { styles } ) { themeHasDisabledLayoutStyles, themeSupportsLayout, assets, - useRootPaddingAwareAlignments, isFocusMode, } = useSelect( ( select ) => { const _settings = select( blockEditorStore ).getSettings(); @@ -130,8 +167,6 @@ export default function VisualEditor( { styles } ) { themeHasDisabledLayoutStyles: _settings.disableLayoutStyles, themeSupportsLayout: _settings.supportsLayout, assets: _settings.__unstableResolvedAssets, - useRootPaddingAwareAlignments: - _settings.__experimentalFeatures?.useRootPaddingAwareAlignments, isFocusMode: _settings.focusMode, }; }, [] ); @@ -154,7 +189,7 @@ export default function VisualEditor( { styles } ) { borderBottom: 0, }; const resizedCanvasStyles = useResizeCanvas( deviceType, isTemplateMode ); - const defaultLayout = useSetting( 'layout' ); + const globalLayoutSettings = useSetting( 'layout' ); const previewMode = 'is-' + deviceType.toLowerCase() + '-preview'; let animatedStyles = isTemplateMode @@ -183,7 +218,9 @@ export default function VisualEditor( { styles } ) { const blockSelectionClearerRef = useBlockSelectionClearer(); - const layout = useMemo( () => { + // fallbackLayout is used if there is no Post Content, + // and for Post Title. + const fallbackLayout = useMemo( () => { if ( isTemplateMode ) { return { type: 'default' }; } @@ -191,17 +228,58 @@ export default function VisualEditor( { styles } ) { if ( themeSupportsLayout ) { // We need to ensure support for wide and full alignments, // so we add the constrained type. - return { ...defaultLayout, type: 'constrained' }; + return { ...globalLayoutSettings, type: 'constrained' }; } // Set default layout for classic themes so all alignments are supported. return { type: 'default' }; - }, [ isTemplateMode, themeSupportsLayout, defaultLayout ] ); + }, [ isTemplateMode, themeSupportsLayout, globalLayoutSettings ] ); + + const postContentBlock = useMemo( () => { + // When in template editing mode, we can access the blocks directly. + if ( editedPostTemplate?.blocks ) { + return findPostContent( editedPostTemplate?.blocks ); + } + // If there are no blocks, we have to parse the content string. + // Best double-check it's a string otherwise the parse function gets unhappy. + const parseableContent = + typeof editedPostTemplate?.content === 'string' + ? editedPostTemplate?.content + : ''; + + return findPostContent( parse( parseableContent ) ) || {}; + }, [ editedPostTemplate?.content, editedPostTemplate?.blocks ] ); + + const postContentLayoutClasses = useLayoutClasses( postContentBlock ); + + const blockListLayoutClass = classnames( + { + 'is-layout-flow': ! themeSupportsLayout, + }, + themeSupportsLayout && postContentLayoutClasses + ); - const blockListLayoutClass = classnames( { - 'is-layout-constrained': themeSupportsLayout, - 'is-layout-flow': ! themeSupportsLayout, - 'has-global-padding': useRootPaddingAwareAlignments, - } ); + const postContentLayoutStyles = useLayoutStyles( + postContentBlock, + '.block-editor-block-list__layout.is-root-container' + ); + + const layout = postContentBlock?.attributes?.layout || {}; + + // Update type for blocks using legacy layouts. + const postContentLayout = + layout && + ( layout?.type === 'constrained' || + layout?.inherit || + layout?.contentSize || + layout?.wideSize ) + ? { ...globalLayoutSettings, ...layout, type: 'constrained' } + : { ...globalLayoutSettings, ...layout, type: 'default' }; + + // 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 + ? postContentLayout + : fallbackLayout; const titleRef = useRef(); useEffect( () => { @@ -257,13 +335,24 @@ export default function VisualEditor( { styles } ) { { themeSupportsLayout && ! themeHasDisabledLayoutStyles && ! isTemplateMode && ( - + <> + + { postContentLayoutStyles && ( + + ) } + ) } { ! isTemplateMode && (