diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js index ff730b5cac7ce8..7fa25c58cc93d0 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js @@ -31,6 +31,7 @@ import { useGlobalSetting } from './hooks'; import { PresetDuotoneFilter } from '../duotone/components'; import { getGapCSSValue } from '../../hooks/gap'; import { store as blockEditorStore } from '../../store'; +import { LAYOUT_DEFINITIONS } from '../../layouts/definitions'; // List of block support features that can have their related styles // generated under their own feature level selector rather than the block's. @@ -425,7 +426,7 @@ export function getStylesDeclarations( * @return {string} Generated CSS rules for the layout styles. */ export function getLayoutStyles( { - layoutDefinitions, + layoutDefinitions = LAYOUT_DEFINITIONS, style, selector, hasBlockGapSupport, @@ -877,7 +878,6 @@ export const toStyles = ( ( ROOT_BLOCK_SELECTOR === selector || hasLayoutSupport ) ) { ruleset += getLayoutStyles( { - layoutDefinitions: tree?.settings?.layout?.definitions, style: styles, selector, hasBlockGapSupport, diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index e02e34caf82918..78a2c3b542c4e7 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -30,6 +30,7 @@ import { LayoutStyle } from '../components/block-list/layout'; import BlockList from '../components/block-list'; import { getLayoutType, getLayoutTypes } from '../layouts'; import { useBlockEditingMode } from '../components/block-editing-mode'; +import { LAYOUT_DEFINITIONS } from '../layouts/definitions'; const layoutBlockSupportKey = '__experimentalLayout'; @@ -47,8 +48,6 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) { return getSettings().__experimentalFeatures ?.useRootPaddingAwareAlignments; }, [] ); - const globalLayoutSettings = useSetting( 'layout' ) || {}; - const { layout } = blockAttributes; const { default: defaultBlockLayout } = @@ -60,13 +59,9 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) { const layoutClassnames = []; - if ( - globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ] - ?.className - ) { + if ( LAYOUT_DEFINITIONS[ usedLayout?.type || 'default' ]?.className ) { const baseClassName = - globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ] - ?.className; + LAYOUT_DEFINITIONS[ usedLayout?.type || 'default' ]?.className; const compoundClassName = `wp-block-${ blockName .split( '/' ) .pop() }-${ baseClassName }`; @@ -118,14 +113,12 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) { ? { ...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, selector, layout, - layoutDefinitions: globalLayoutSettings?.definitions, style, hasBlockGapSupport, } ); @@ -361,7 +354,6 @@ export const withLayoutStyles = createHigherOrderComponent( const shouldRenderLayoutStyles = hasLayoutBlockSupport && ! disableLayoutStyles; const id = useInstanceId( BlockListBlock ); - const defaultThemeLayout = useSetting( 'layout' ) || {}; const element = useContext( BlockList.__unstableElementContext ); const { layout } = attributes; const { default: defaultBlockLayout } = @@ -389,7 +381,6 @@ export const withLayoutStyles = createHigherOrderComponent( blockName: name, selector, layout: usedLayout, - layoutDefinitions: defaultThemeLayout?.definitions, style: attributes?.style, hasBlockGapSupport, } ); diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js index c8c6d741199427..9e4bdee1dfa96a 100644 --- a/packages/block-editor/src/layouts/constrained.js +++ b/packages/block-editor/src/layouts/constrained.js @@ -25,6 +25,7 @@ import useSetting from '../components/use-setting'; import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils'; import { getGapCSSValue } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; +import { LAYOUT_DEFINITIONS } from './definitions'; export default { name: 'constrained', @@ -152,7 +153,7 @@ export default { style, blockName, hasBlockGapSupport, - layoutDefinitions, + layoutDefinitions = LAYOUT_DEFINITIONS, } ) { const { contentSize, wideSize, justifyContent } = layout; const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap ); diff --git a/packages/block-editor/src/layouts/definitions.js b/packages/block-editor/src/layouts/definitions.js new file mode 100644 index 00000000000000..3b1e5c7ab5896a --- /dev/null +++ b/packages/block-editor/src/layouts/definitions.js @@ -0,0 +1,174 @@ +// Layout definitions keyed by layout type. +// Provides a common definition of slugs, classnames, base styles, and spacing styles for each layout type. +// If making changes or additions to layout definitions, be sure to update the corresponding PHP definitions in +// `block-supports/layout.php` so that the server-side and client-side definitions match. +export const LAYOUT_DEFINITIONS = { + default: { + name: 'default', + slug: 'flow', + className: 'is-layout-flow', + baseStyles: [ + { + selector: ' > .alignleft', + rules: { + float: 'left', + 'margin-inline-start': '0', + 'margin-inline-end': '2em', + }, + }, + { + selector: ' > .alignright', + rules: { + float: 'right', + 'margin-inline-start': '2em', + 'margin-inline-end': '0', + }, + }, + { + selector: ' > .aligncenter', + rules: { + 'margin-left': 'auto !important', + 'margin-right': 'auto !important', + }, + }, + ], + spacingStyles: [ + { + selector: ' > :first-child:first-child', + rules: { + 'margin-block-start': '0', + }, + }, + { + selector: ' > :last-child:last-child', + rules: { + 'margin-block-end': '0', + }, + }, + { + selector: ' > *', + rules: { + 'margin-block-start': null, + 'margin-block-end': '0', + }, + }, + ], + }, + constrained: { + name: 'constrained', + slug: 'constrained', + className: 'is-layout-constrained', + baseStyles: [ + { + selector: ' > .alignleft', + rules: { + float: 'left', + 'margin-inline-start': '0', + 'margin-inline-end': '2em', + }, + }, + { + selector: ' > .alignright', + rules: { + float: 'right', + 'margin-inline-start': '2em', + 'margin-inline-end': '0', + }, + }, + { + selector: ' > .aligncenter', + rules: { + 'margin-left': 'auto !important', + 'margin-right': 'auto !important', + }, + }, + { + selector: + ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))', + rules: { + 'max-width': 'var(--wp--style--global--content-size)', + 'margin-left': 'auto !important', + 'margin-right': 'auto !important', + }, + }, + { + selector: ' > .alignwide', + rules: { + 'max-width': 'var(--wp--style--global--wide-size)', + }, + }, + ], + spacingStyles: [ + { + selector: ' > :first-child:first-child', + rules: { + 'margin-block-start': '0', + }, + }, + { + selector: ' > :last-child:last-child', + rules: { + 'margin-block-end': '0', + }, + }, + { + selector: ' > *', + rules: { + 'margin-block-start': null, + 'margin-block-end': '0', + }, + }, + ], + }, + flex: { + name: 'flex', + slug: 'flex', + className: 'is-layout-flex', + displayMode: 'flex', + baseStyles: [ + { + selector: '', + rules: { + 'flex-wrap': 'wrap', + 'align-items': 'center', + }, + }, + { + selector: ' > *', + rules: { + margin: '0', + }, + }, + ], + spacingStyles: [ + { + selector: '', + rules: { + gap: null, + }, + }, + ], + }, + grid: { + name: 'grid', + slug: 'grid', + className: 'is-layout-grid', + displayMode: 'grid', + baseStyles: [ + { + selector: ' > *', + rules: { + margin: '0', + }, + }, + ], + spacingStyles: [ + { + selector: '', + rules: { + gap: null, + }, + }, + ], + }, +}; diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index fe45cda624b1bf..f628a9bf3c3f66 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -31,6 +31,7 @@ import { BlockVerticalAlignmentControl, } from '../components'; import { shouldSkipSerialization } from '../hooks/utils'; +import { LAYOUT_DEFINITIONS } from './definitions'; // Used with the default, horizontal flex orientation. const justifyContentMap = { @@ -121,7 +122,7 @@ export default { style, blockName, hasBlockGapSupport, - layoutDefinitions, + layoutDefinitions = LAYOUT_DEFINITIONS, } ) { const { orientation = 'horizontal' } = layout; diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index d064edce65fedc..de76e430eac888 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n'; import { getBlockGapCSS, getAlignmentsInfo } from './utils'; import { getGapCSSValue } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; +import { LAYOUT_DEFINITIONS } from './definitions'; export default { name: 'default', @@ -24,7 +25,7 @@ export default { style, blockName, hasBlockGapSupport, - layoutDefinitions, + layoutDefinitions = LAYOUT_DEFINITIONS, } ) { const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap ); diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js index c2cda643baa703..55ac1e53bcd87e 100644 --- a/packages/block-editor/src/layouts/grid.js +++ b/packages/block-editor/src/layouts/grid.js @@ -18,6 +18,7 @@ import { import { appendSelectors, getBlockGapCSS } from './utils'; import { getGapCSSValue } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; +import { LAYOUT_DEFINITIONS } from './definitions'; const RANGE_CONTROL_MAX_VALUES = { px: 600, @@ -53,7 +54,7 @@ export default { style, blockName, hasBlockGapSupport, - layoutDefinitions, + layoutDefinitions = LAYOUT_DEFINITIONS, } ) { const { minimumColumnWidth = '12rem', columnCount = null } = layout; diff --git a/packages/block-editor/src/layouts/utils.js b/packages/block-editor/src/layouts/utils.js index e058c778960544..51c92b5eb457e7 100644 --- a/packages/block-editor/src/layouts/utils.js +++ b/packages/block-editor/src/layouts/utils.js @@ -3,6 +3,11 @@ */ import { __, sprintf } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import { LAYOUT_DEFINITIONS } from './definitions'; + /** * Utility to generate the proper CSS selector for layout styles. * @@ -35,14 +40,14 @@ export function appendSelectors( selectors, append = '' ) { * with the provided `blockGapValue`. * * @param {string} selector The CSS selector to target for the generated rules. - * @param {Object} layoutDefinitions Layout definitions object from theme.json. + * @param {Object} layoutDefinitions Layout definitions object. * @param {string} layoutType The layout type (e.g. `default` or `flex`). * @param {string} blockGapValue The current blockGap value to be applied. * @return {string} The generated CSS rules. */ export function getBlockGapCSS( selector, - layoutDefinitions, + layoutDefinitions = LAYOUT_DEFINITIONS, layoutType, blockGapValue ) { diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 266003f76454a5..4f4794be59c3bd 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -374,16 +374,10 @@ export default function VisualEditor( { styles } ) { { align && ( @@ -392,9 +386,6 @@ export default function VisualEditor( { styles } ) { ) } diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index a6c9c42c22279e..42a393c5fe3242 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -180,8 +180,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) { ) { defaultEditorStyles.push( { css: getLayoutStyles( { - layoutDefinitions: - settings.__experimentalFeatures?.layout?.definitions, style: {}, selector: 'body', hasBlockGapSupport: false,