@wordpress/block-editor 12.2.0 → 12.3.1

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/style.js

@@ -34,6 +34,7 @@ import {
 } from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
 import { shouldSkipSerialization } from './utils';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -347,10 +348,11 @@ export function addEditProps( settings ) {
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const shouldDisplayControls = useDisplayBlockControls();
+		const blockEditingMode = useBlockEditingMode();
 
 		return (
 			<>
-				{ shouldDisplayControls && (
+				{ shouldDisplayControls && blockEditingMode === 'default' && (
 					<>
 						<ColorEdit { ...props } />
 						<TypographyPanel { ...props } />

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/hooks/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, get } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -30,12 +30,13 @@ export const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( object )
-			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
-			.filter( ( [ , value ] ) => value !== undefined )
-	);
-	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
+
+	const cleanedNestedObjects = Object.entries( object )
+		.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
+		.filter( ( [ , value ] ) => value !== undefined );
+	return ! cleanedNestedObjects.length
+		? undefined
+		: Object.fromEntries( cleanedNestedObjects );
 };
 
 export function transformStyles(

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,
@@ -35,7 +36,9 @@ export default {
 		layout = {},
 		onChange,
 	} ) {
-		return (
+		return layout?.columnCount ? (
+			<GridLayoutColumnsControl layout={ layout } onChange={ onChange } />
+		) : (
 			<GridLayoutMinimumWidthControl
 				layout={ layout }
 				onChange={ onChange }
@@ -51,9 +54,9 @@ export default {
 		style,
 		blockName,
 		hasBlockGapSupport,
-		layoutDefinitions,
+		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
-		const { minimumColumnWidth = '12rem' } = layout;
+		const { minimumColumnWidth = '12rem', columnCount = null } = layout;
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,
 		// don't apply the user-defined value to the styles.
@@ -66,7 +69,11 @@ export default {
 		let output = '';
 		const rules = [];
 
-		if ( minimumColumnWidth ) {
+		if ( columnCount ) {
+			rules.push(
+				`grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))`
+			);
+		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`
 			);
@@ -170,3 +177,23 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 		</fieldset>
 	);
 }
+
+// Enables setting number of grid columns
+function GridLayoutColumnsControl( { layout, onChange } ) {
+	const { columnCount = 3 } = layout;
+
+	return (
+		<RangeControl
+			label={ __( 'Columns' ) }
+			value={ columnCount }
+			onChange={ ( value ) =>
+				onChange( {
+					...layout,
+					columnCount: value,
+				} )
+			}
+			min={ 1 }
+			max={ 6 }
+		/>
+	);
+}

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,10 @@ 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';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -19,6 +24,7 @@ export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
+	getRichTextValues,
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,
@@ -26,4 +32,9 @@ lock( privateApis, {
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
 	useBlockEditingMode,
+	BlockQuickNavigation,
+	LayoutStyle,
+	BlockRemovalWarningModal,
+	useLayoutClasses,
+	useLayoutStyles,
 } );

package/src/store/actions.js

@@ -25,40 +25,17 @@ import {
 	retrieveSelectedAttribute,
 	START_OF_SELECTED_AREA,
 } from '../utils/selection';
-import { __experimentalUpdateSettings } from './private-actions';
+import {
+	__experimentalUpdateSettings,
+	ensureDefaultBlock,
+	privateRemoveBlocks,
+} from './private-actions';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
-/**
- * Action which will insert a default block insert action if there
- * are no other blocks at the root of the editor. This action should be used
- * in actions which may result in no blocks remaining in the editor (removal,
- * replacement, etc).
- */
-const ensureDefaultBlock =
-	() =>
-	( { select, dispatch } ) => {
-		// To avoid a focus loss when removing the last block, assure there is
-		// always a default block if the last of the blocks have been removed.
-		const count = select.getBlockCount();
-		if ( count > 0 ) {
-			return;
-		}
-
-		// If there's an custom appender, don't insert default block.
-		// We have to remember to manually move the focus elsewhere to
-		// prevent it from being lost though.
-		const { __unstableHasCustomAppender } = select.getSettings();
-		if ( __unstableHasCustomAppender ) {
-			return;
-		}
-
-		dispatch.insertDefaultBlock();
-	};
-
 /**
  * Action that resets blocks state to the specified array of blocks, taking precedence
  * over any other content reflected as an edit in state.
@@ -1195,34 +1172,8 @@ export const mergeBlocks =
  *                                         should be selected
  *                                         when a block is removed.
  */
-export const removeBlocks =
-	( clientIds, selectPrevious = true ) =>
-	( { select, dispatch } ) => {
-		if ( ! clientIds || ! clientIds.length ) {
-			return;
-		}
-
-		clientIds = castArray( clientIds );
-		const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
-		const canRemoveBlocks = select.canRemoveBlocks(
-			clientIds,
-			rootClientId
-		);
-
-		if ( ! canRemoveBlocks ) {
-			return;
-		}
-
-		if ( selectPrevious ) {
-			dispatch.selectPreviousBlock( clientIds[ 0 ], selectPrevious );
-		}
-
-		dispatch( { type: 'REMOVE_BLOCKS', clientIds } );
-
-		// To avoid a focus loss when removing the last block, assure there is
-		// always a default block if the last of the blocks have been removed.
-		dispatch( ensureDefaultBlock() );
-	};
+export const removeBlocks = ( clientIds, selectPrevious = true ) =>
+	privateRemoveBlocks( clientIds, selectPrevious );
 
 /**
  * Returns an action object used in signalling that the block with the