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,