@wordpress/block-editor 12.3.0 → 12.3.2

package/src/hooks/font-size.js

@@ -15,7 +15,6 @@ import {
 	getFontSizeClass,
 	getFontSizeObjectByValue,
 	FontSizePicker,
-	getComputedFluidTypographyValue,
 } from '../components/font-sizes';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import {
@@ -25,6 +24,10 @@ import {
 } from './utils';
 import useSetting from '../components/use-setting';
 import { store as blockEditorStore } from '../store';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -289,23 +292,15 @@ function addEditPropsForFluidCustomFontSizes( blockType ) {
 		// BlockListContext.Provider. If we set fontSize using editor.
 		// BlockListBlock instead of using getEditWrapperProps then the value is
 		// clobbered when the core/style/addEditProps filter runs.
-		const fluidTypographyConfig =
+		const fluidTypographySettings = getFluidTypographyOptionsFromSettings(
 			select( blockEditorStore ).getSettings().__experimentalFeatures
-				?.typography?.fluid;
-
-		const fluidTypographySettings =
-			typeof fluidTypographyConfig === 'object'
-				? fluidTypographyConfig
-				: {};
-
-		const newFontSize =
-			fontSize && !! fluidTypographyConfig
-				? getComputedFluidTypographyValue( {
-						fontSize,
-						minimumFontSizeLimit:
-							fluidTypographySettings?.minFontSize,
-				  } )
-				: null;
+		);
+		const newFontSize = fontSize
+			? getTypographyFontSizeValue(
+					{ size: fontSize },
+					fluidTypographySettings
+			  )
+			: null;
 
 		if ( newFontSize === null ) {
 			return wrapperProps;

package/src/hooks/layout.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -30,8 +29,17 @@ 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';
+import { kebabCase } from '../utils/object';
 
-const layoutBlockSupportKey = '__experimentalLayout';
+const layoutBlockSupportKey = 'layout';
+
+function hasLayoutBlockSupport( blockName ) {
+	return (
+		hasBlockSupport( blockName, 'layout' ) ||
+		hasBlockSupport( blockName, '__experimentalLayout' )
+	);
+}
 
 /**
  * Generates the utility classnames for the given block's layout attributes.
@@ -47,8 +55,6 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 		return getSettings().__experimentalFeatures
 			?.useRootPaddingAwareAlignments;
 	}, [] );
-	const globalLayoutSettings = useSetting( 'layout' ) || {};
-
 	const { layout } = blockAttributes;
 
 	const { default: defaultBlockLayout } =
@@ -60,13 +66,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 +120,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,
 	} );
@@ -302,7 +302,7 @@ export function addAttribute( settings ) {
 	if ( 'type' in ( settings.attributes?.layout ?? {} ) ) {
 		return settings;
 	}
-	if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {
+	if ( hasLayoutBlockSupport( settings ) ) {
 		settings.attributes = {
 			...settings.attributes,
 			layout: {
@@ -324,10 +324,7 @@ export function addAttribute( settings ) {
 export const withInspectorControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
-		const supportLayout = hasBlockSupport(
-			blockName,
-			layoutBlockSupportKey
-		);
+		const supportLayout = hasLayoutBlockSupport( blockName );
 
 		const blockEditingMode = useBlockEditingMode();
 		return [
@@ -350,18 +347,14 @@ export const withInspectorControls = createHigherOrderComponent(
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
-		const hasLayoutBlockSupport = hasBlockSupport(
-			name,
-			layoutBlockSupportKey
-		);
+		const blockSupportsLayout = hasLayoutBlockSupport( name );
 		const disableLayoutStyles = useSelect( ( select ) => {
 			const { getSettings } = select( blockEditorStore );
 			return !! getSettings().disableLayoutStyles;
 		} );
 		const shouldRenderLayoutStyles =
-			hasLayoutBlockSupport && ! disableLayoutStyles;
+			blockSupportsLayout && ! disableLayoutStyles;
 		const id = useInstanceId( BlockListBlock );
-		const defaultThemeLayout = useSetting( 'layout' ) || {};
 		const element = useContext( BlockList.__unstableElementContext );
 		const { layout } = attributes;
 		const { default: defaultBlockLayout } =
@@ -370,7 +363,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 			layout?.inherit || layout?.contentSize || layout?.wideSize
 				? { ...layout, type: 'constrained' }
 				: layout || defaultBlockLayout || {};
-		const layoutClasses = hasLayoutBlockSupport
+		const layoutClasses = blockSupportsLayout
 			? useLayoutClasses( attributes, name )
 			: null;
 		// Higher specificity to override defaults from theme.json.
@@ -389,7 +382,6 @@ export const withLayoutStyles = createHigherOrderComponent(
 				blockName: name,
 				selector,
 				layout: usedLayout,
-				layoutDefinitions: defaultThemeLayout?.definitions,
 				style: attributes?.style,
 				hasBlockGapSupport,
 			} );

package/src/hooks/position.js

@@ -28,6 +28,7 @@ import { addFilter } from '@wordpress/hooks';
 import BlockList from '../components/block-list';
 import useSetting from '../components/use-setting';
 import InspectorControls from '../components/inspector-controls';
+import useBlockDisplayInformation from '../components/use-block-display-information';
 import { cleanEmptyObject } from './utils';
 import { unlock } from '../lock-unlock';
 import { store as blockEditorStore } from '../store';
@@ -222,32 +223,39 @@ export function PositionPanel( props ) {
 	const allowSticky = hasStickyPositionSupport( blockName );
 	const value = style?.position?.type;
 
-	const { hasParents } = useSelect(
+	const { firstParentClientId } = useSelect(
 		( select ) => {
 			const { getBlockParents } = select( blockEditorStore );
 			const parents = getBlockParents( clientId );
-			return {
-				hasParents: parents.length,
-			};
+			return { firstParentClientId: parents[ parents.length - 1 ] };
 		},
 		[ clientId ]
 	);
 
+	const blockInformation = useBlockDisplayInformation( firstParentClientId );
+	const stickyHelpText =
+		allowSticky && value === STICKY_OPTION.value && blockInformation
+			? sprintf(
+					/* translators: %s: the name of the parent block. */
+					__(
+						'The block will stick to the scrollable area of the parent %s block.'
+					),
+					blockInformation.title
+			  )
+			: null;
+
 	const options = useMemo( () => {
 		const availableOptions = [ DEFAULT_OPTION ];
-		// Only display sticky option if the block has no parents (is at the root of the document),
-		// or if the block already has a sticky position value set.
-		if (
-			( allowSticky && ! hasParents ) ||
-			value === STICKY_OPTION.value
-		) {
+		// Display options if they are allowed, or if a block already has a valid value set.
+		// This allows for a block to be switched off from a position type that is not allowed.
+		if ( allowSticky || value === STICKY_OPTION.value ) {
 			availableOptions.push( STICKY_OPTION );
 		}
 		if ( allowFixed || value === FIXED_OPTION.value ) {
 			availableOptions.push( FIXED_OPTION );
 		}
 		return availableOptions;
-	}, [ allowFixed, allowSticky, hasParents, value ] );
+	}, [ allowFixed, allowSticky, value ] );
 
 	const onChangeType = ( next ) => {
 		// For now, use a hard-coded `0px` value for the position.
@@ -281,7 +289,11 @@ export function PositionPanel( props ) {
 		web:
 			options.length > 1 ? (
 				<InspectorControls group="position">
-					<BaseControl className="block-editor-hooks__position-selection">
+					<BaseControl
+						className="block-editor-hooks__position-selection"
+						__nextHasNoMarginBottom
+						help={ stickyHelpText }
+					>
 						<CustomSelectControl
 							__nextUnconstrainedWidth
 							__next36pxDefaultSize

package/src/hooks/supports.js

@@ -40,7 +40,7 @@ const TEXT_TRANSFORM_SUPPORT_KEY = 'typography.__experimentalTextTransform';
  * e.g. settings found in `block.json`.
  */
 const LETTER_SPACING_SUPPORT_KEY = 'typography.__experimentalLetterSpacing';
-const LAYOUT_SUPPORT_KEY = '__experimentalLayout';
+const LAYOUT_SUPPORT_KEY = 'layout';
 const TYPOGRAPHY_SUPPORT_KEYS = [
 	LINE_HEIGHT_SUPPORT_KEY,
 	FONT_SIZE_SUPPORT_KEY,

package/src/hooks/use-typography-props.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -9,7 +8,11 @@ import classnames from 'classnames';
  */
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
-import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from '../components/global-styles/typography-utils';
+import { kebabCase } from '../utils/object';
 
 /*
  * This utility is intended to assist where the serialization of the typography
@@ -27,24 +30,16 @@ import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-
  */
 export function getTypographyClassesAndStyles( attributes, settings ) {
 	let typographyStyles = attributes?.style?.typography || {};
-	const fluidTypographySettings = settings?.typography?.fluid;
+	const fluidTypographySettings =
+		getFluidTypographyOptionsFromSettings( settings );
 
-	if (
-		!! fluidTypographySettings &&
-		( true === fluidTypographySettings ||
-			Object.keys( fluidTypographySettings ).length !== 0 )
-	) {
-		const newFontSize =
-			getComputedFluidTypographyValue( {
-				fontSize: attributes?.style?.typography?.fontSize,
-				minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
-				maximumViewPortWidth: settings?.layout?.wideSize,
-			} ) || attributes?.style?.typography?.fontSize;
-		typographyStyles = {
-			...typographyStyles,
-			fontSize: newFontSize,
-		};
-	}
+	typographyStyles = {
+		...typographyStyles,
+		fontSize: getTypographyFontSizeValue(
+			{ size: attributes?.style?.typography?.fontSize },
+			fluidTypographySettings
+		),
+	};
 
 	const style = getInlineStyles( { typography: typographyStyles } );
 	const fontFamilyClassName = !! attributes?.fontFamily

package/src/index.js

@@ -12,8 +12,6 @@ export {
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	useCachedTruthy,
-	useLayoutClasses as __experimentaluseLayoutClasses,
-	useLayoutStyles as __experimentaluseLayoutStyles,
 } from './hooks';
 export * from './components';
 export * from './elements';

package/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 );

package/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,
+				},
+			},
+		],
+	},
+};

package/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;
 
@@ -258,6 +259,10 @@ function FlexLayoutVerticalAlignmentControl( {
 	);
 }
 
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
 function FlexLayoutJustifyContentControl( {
 	layout,
 	onChange,
@@ -282,10 +287,7 @@ function FlexLayoutJustifyContentControl( {
 				allowedControls={ allowedControls }
 				value={ justifyContent }
 				onChange={ onJustificationChange }
-				popoverProps={ {
-					position: 'bottom right',
-					variant: 'toolbar',
-				} }
+				popoverProps={ POPOVER_PROPS }
 			/>
 		);
 	}

package/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 );
 

package/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;
 

package/src/layouts/test/utils.js

@@ -75,15 +75,10 @@ describe( 'getBlockGapCSS', () => {
 		expect( result ).toBe( expected );
 	} );
 
-	it( 'should return an empty string if layout definitions cannot be found', () => {
+	it( 'should return an empty string if layout definitions is null', () => {
 		const expected = '';
 
-		const result = getBlockGapCSS(
-			'.my-container',
-			undefined,
-			'flex',
-			'3em'
-		);
+		const result = getBlockGapCSS( '.my-container', null, 'flex', '3em' );
 
 		expect( result ).toBe( expected );
 	} );

package/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
 ) {

package/src/private-apis.js

@@ -4,6 +4,7 @@
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
+import { getRichTextValues } from './components/rich-text/content';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
@@ -11,6 +12,12 @@ import BlockInfo from './components/block-info-slot-fill';
 import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
 import { cleanEmptyObject } from './hooks/utils';
 import { useBlockEditingMode } from './components/block-editing-mode';
+import BlockQuickNavigation from './components/block-quick-navigation';
+import { LayoutStyle } from './components/block-list/layout';
+import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
+import { useLayoutClasses, useLayoutStyles } from './hooks';
+import DimensionsTool from './components/dimensions-tool';
+import ResolutionTool from './components/resolution-tool';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -19,6 +26,7 @@ export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
+	getRichTextValues,
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,
@@ -26,4 +34,11 @@ lock( privateApis, {
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
 	useBlockEditingMode,
+	BlockQuickNavigation,
+	LayoutStyle,
+	BlockRemovalWarningModal,
+	useLayoutClasses,
+	useLayoutStyles,
+	DimensionsTool,
+	ResolutionTool,
 } );