Add duplicate layout definitions in JS.

WordPress · Jun 13, 2023 · deb1fb7 · deb1fb7
1 parent f9cc51b
commit deb1fb7
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 31 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -374,16 +374,10 @@ export default function VisualEditor( { styles } ) {
 									<LayoutStyle
 										selector=".edit-post-visual-editor__post-title-wrapper"
 										layout={ fallbackLayout }
-										layoutDefinitions={
-											globalLayoutSettings?.definitions
-										}
 									/>
 									<LayoutStyle
 										selector=".block-editor-block-list__layout.is-root-container"
 										layout={ blockListLayout }
-										layoutDefinitions={
-											globalLayoutSettings?.definitions
-										}
 									/>
 									{ align && (
 										<LayoutStyle css={ alignCSS } />
@@ -392,9 +386,6 @@ export default function VisualEditor( { styles } ) {
 										<LayoutStyle
 											layout={ postContentLayout }
 											css={ postContentLayoutStyles }
-											layoutDefinitions={
-												globalLayoutSettings?.definitions
-											}
 										/>
 									) }
 								</>

diff --git 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,