@wordpress/block-editor 9.5.0 → 9.6.0

package/src/components/rich-text/format-toolbar-container.js

@@ -2,32 +2,81 @@
  * WordPress dependencies
  */
 import { Popover, ToolbarGroup } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import {
+	isCollapsed,
+	getActiveFormats,
+	useAnchorRef,
+	store as richTextStore,
+} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
  */
 import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
+import { store as blockEditorStore } from '../../store';
+
+function InlineSelectionToolbar( { value, anchorRef, activeFormats } ) {
+	const lastFormat = activeFormats[ activeFormats.length - 1 ];
+	const lastFormatType = lastFormat?.type;
+	const settings = useSelect(
+		( select ) => select( richTextStore ).getFormatType( lastFormatType ),
+		[ lastFormatType ]
+	);
+	const selectionRef = useAnchorRef( {
+		ref: anchorRef,
+		value,
+		settings,
+	} );
+
+	return <InlineToolbar anchorRef={ selectionRef } />;
+}
+
+function InlineToolbar( { anchorRef } ) {
+	return (
+		<Popover
+			position="top center"
+			focusOnMount={ false }
+			anchorRef={ anchorRef }
+			className="block-editor-rich-text__inline-format-toolbar"
+			__unstableSlotName="block-toolbar"
+		>
+			<div className="block-editor-rich-text__inline-format-toolbar-group">
+				<ToolbarGroup>
+					<FormatToolbar />
+				</ToolbarGroup>
+			</div>
+		</Popover>
+	);
+}
+
+const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
+	const hasInlineToolbar = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
+		[]
+	);
 
-const FormatToolbarContainer = ( { inline, anchorRef } ) => {
 	if ( inline ) {
-		// Render in popover.
+		return <InlineToolbar anchorRef={ anchorRef } />;
+	}
+
+	if ( hasInlineToolbar ) {
+		const activeFormats = getActiveFormats( value );
+
+		if ( isCollapsed( value ) && ! activeFormats.length ) {
+			return null;
+		}
+
 		return (
-			<Popover
-				position="top center"
-				focusOnMount={ false }
+			<InlineSelectionToolbar
 				anchorRef={ anchorRef }
-				className="block-editor-rich-text__inline-format-toolbar"
-				__unstableSlotName="block-toolbar"
-			>
-				<div className="block-editor-rich-text__inline-format-toolbar-group">
-					<ToolbarGroup>
-						<FormatToolbar />
-					</ToolbarGroup>
-				</div>
-			</Popover>
+				value={ value }
+				activeFormats={ activeFormats }
+			/>
 		);
 	}
+
 	// Render regular toolbar.
 	return (
 		<BlockControls group="inline">

package/src/components/rich-text/index.js

@@ -344,6 +344,7 @@ function RichTextWrapper(
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
 					anchorRef={ anchorRef }
+					value={ value }
 				/>
 			) }
 			<TagName

package/src/components/rich-text/use-format-types.js

@@ -1,12 +1,13 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { mapKeys } from 'lodash';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as richTextStore } from '@wordpress/rich-text';
 
 function formatTypesSelector( select ) {
@@ -32,6 +33,21 @@ const interactiveContentTags = new Set( [
 	'video',
 ] );
 
+function prefixSelectKeys( selected, prefix ) {
+	if ( typeof selected !== 'object' ) return { [ prefix ]: selected };
+	return mapKeys( selected, ( value, key ) => `${ prefix }.${ key }` );
+}
+
+function getPrefixedSelectKeys( selected, prefix ) {
+	if ( selected[ prefix ] ) return selected[ prefix ];
+	return Object.keys( selected )
+		.filter( ( key ) => key.startsWith( prefix + '.' ) )
+		.reduce( ( accumulator, key ) => {
+			accumulator[ key.slice( prefix.length + 1 ) ] = selected[ key ];
+			return accumulator;
+		}, {} );
+}
+
 /**
  * This hook provides RichText with the `formatTypes` and its derived props from
  * experimental format type settings.
@@ -68,18 +84,23 @@ export function useFormatTypes( {
 	const keyedSelected = useSelect(
 		( select ) =>
 			formatTypes.reduce( ( accumulator, type ) => {
-				if ( type.__experimentalGetPropsForEditableTreePreparation ) {
-					accumulator[ type.name ] =
+				if ( ! type.__experimentalGetPropsForEditableTreePreparation ) {
+					return accumulator;
+				}
+
+				return {
+					...accumulator,
+					...prefixSelectKeys(
 						type.__experimentalGetPropsForEditableTreePreparation(
 							select,
 							{
 								richTextIdentifier: identifier,
 								blockClientId: clientId,
 							}
-						);
-				}
-
-				return accumulator;
+						),
+						type.name
+					),
+				};
 			}, {} ),
 		[ formatTypes, clientId, identifier ]
 	);
@@ -89,11 +110,14 @@ export function useFormatTypes( {
 	const changeHandlers = [];
 	const dependencies = [];
 
+	for ( const key in keyedSelected ) {
+		dependencies.push( keyedSelected[ key ] );
+	}
+
 	formatTypes.forEach( ( type ) => {
 		if ( type.__experimentalCreatePrepareEditableTree ) {
-			const selected = keyedSelected[ type.name ];
 			const handler = type.__experimentalCreatePrepareEditableTree(
-				selected,
+				getPrefixedSelectKeys( keyedSelected, type.name ),
 				{
 					richTextIdentifier: identifier,
 					blockClientId: clientId,
@@ -105,10 +129,6 @@ export function useFormatTypes( {
 			} else {
 				prepareHandlers.push( handler );
 			}
-
-			for ( const key in selected ) {
-				dependencies.push( selected[ key ] );
-			}
 		}
 
 		if ( type.__experimentalCreateOnChangeEditableValue ) {
@@ -125,10 +145,11 @@ export function useFormatTypes( {
 					);
 			}
 
+			const selected = getPrefixedSelectKeys( keyedSelected, type.name );
 			changeHandlers.push(
 				type.__experimentalCreateOnChangeEditableValue(
 					{
-						...( keyedSelected[ type.name ] || {} ),
+						...( typeof selected === 'object' ? selected : {} ),
 						...dispatchers,
 					},
 					{

package/src/components/writing-flow/use-tab-nav.js

@@ -75,7 +75,7 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
+			if ( event.keyCode === ESCAPE ) {
 				event.preventDefault();
 				setNavigationMode( true );
 				return;

package/src/hooks/layout.js

@@ -49,7 +49,12 @@ const layoutBlockSupportKey = '__experimentalLayout';
  *
  * @return { Array } Array of CSS classname strings.
  */
-function getLayoutClasses( layout, layoutDefinitions ) {
+function useLayoutClasses( layout, layoutDefinitions ) {
+	const rootPaddingAlignment = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().__experimentalFeatures
+			?.useRootPaddingAwareAlignments;
+	}, [] );
 	const layoutClassnames = [];
 
 	if ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) {
@@ -58,6 +63,10 @@ function getLayoutClasses( layout, layoutDefinitions ) {
 		);
 	}
 
+	if ( ( layout?.inherit || layout?.contentSize ) && rootPaddingAlignment ) {
+		layoutClassnames.push( 'has-global-padding' );
+	}
+
 	if ( layout?.orientation ) {
 		layoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` );
 	}
@@ -136,7 +145,9 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 								checked={ ! inherit }
 								onChange={ () =>
 									setAttributes( {
-										layout: { inherit: ! inherit },
+										layout: {
+											inherit: ! inherit,
+										},
 									} )
 								}
 							/>
@@ -267,7 +278,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 			? defaultThemeLayout
 			: layout || defaultBlockLayout || {};
 		const layoutClasses = shouldRenderLayoutStyles
-			? getLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
+			? useLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
 			: null;
 		const selector = `.${ getBlockDefaultClassName(
 			name

package/src/hooks/style.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { get, has, isEmpty, kebabCase, omit } from 'lodash';
+import { get, has, omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { useContext, createPortal } from '@wordpress/element';
+import { useContext, useMemo, createPortal } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -16,7 +16,10 @@ import {
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
-import { getCSSRules } from '@wordpress/style-engine';
+import {
+	getCSSRules,
+	generate as generateStyles,
+} from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -68,6 +71,9 @@ export function getInlineStyles( styles = {} ) {
 	const ignoredStyles = [ 'spacing.blockGap' ];
 	const output = {};
 	Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => {
+		if ( STYLE_PROPERTY[ propKey ].rootOnly ) {
+			return;
+		}
 		const path = STYLE_PROPERTY[ propKey ].value;
 		const subPaths = STYLE_PROPERTY[ propKey ].properties;
 		// Ignore styles on elements because they are handled on the server.
@@ -105,28 +111,6 @@ export function getInlineStyles( styles = {} ) {
 	return output;
 }
 
-function compileElementsStyles( selector, elements = {} ) {
-	return Object.entries( elements )
-		.map( ( [ element, styles ] ) => {
-			const elementStyles = getInlineStyles( styles );
-			if ( ! isEmpty( elementStyles ) ) {
-				// The .editor-styles-wrapper selector is required on elements styles. As it is
-				// added to all other editor styles, not providing it causes reset and global
-				// styles to override element styles because of higher specificity.
-				return [
-					`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
-					...Object.entries( elementStyles ).map(
-						( [ cssProperty, value ] ) =>
-							`\t${ kebabCase( cssProperty ) }: ${ value };`
-					),
-					'}',
-				].join( '\n' );
-			}
-			return '';
-		} )
-		.join( '\n' );
-}
-
 /**
  * Filters registered block settings, extending attributes to include `style` attribute.
  *
@@ -323,23 +307,46 @@ const withElementsStyles = createHigherOrderComponent(
 			'link'
 		);
 
-		// The Elements API only supports link colors for now,
-		// hence the specific omission of `link` in the elements styles.
-		// This might need to be refactored or removed if the Elements API
-		// changes or `link` supports styles beyond `color`.
-		const elements = skipLinkColorSerialization
-			? omit( props.attributes.style?.elements, [ 'link' ] )
-			: props.attributes.style?.elements;
-
-		const styles = compileElementsStyles(
-			blockElementsContainerIdentifier,
-			elements
-		);
+		const styles = useMemo( () => {
+			const rawElementsStyles = props.attributes.style?.elements;
+			const elementCssRules = [];
+			if (
+				rawElementsStyles &&
+				Object.keys( rawElementsStyles ).length > 0
+			) {
+				// Remove values based on whether serialization has been skipped for a specific style.
+				const filteredElementsStyles = {
+					...rawElementsStyles,
+					link: {
+						...rawElementsStyles.link,
+						color: ! skipLinkColorSerialization
+							? rawElementsStyles.link?.color
+							: undefined,
+					},
+				};
+
+				for ( const [ elementName, elementStyles ] of Object.entries(
+					filteredElementsStyles
+				) ) {
+					const cssRule = generateStyles( elementStyles, {
+						// The .editor-styles-wrapper selector is required on elements styles. As it is
+						// added to all other editor styles, not providing it causes reset and global
+						// styles to override element styles because of higher specificity.
+						selector: `.editor-styles-wrapper .${ blockElementsContainerIdentifier } ${ ELEMENTS[ elementName ] }`,
+					} );
+					if ( !! cssRule ) {
+						elementCssRules.push( cssRule );
+					}
+				}
+			}
+			return elementCssRules.length > 0 ? elementCssRules : undefined;
+		}, [ props.attributes.style?.elements ] );
+
 		const element = useContext( BlockList.__unstableElementContext );
 
 		return (
 			<>
-				{ elements &&
+				{ styles &&
 					element &&
 					createPortal(
 						<style
@@ -353,7 +360,7 @@ const withElementsStyles = createHigherOrderComponent(
 				<BlockListBlock
 					{ ...props }
 					className={
-						elements
+						props.attributes.style?.elements
 							? classnames(
 									props.className,
 									blockElementsContainerIdentifier

package/src/layouts/flow.js

@@ -8,6 +8,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
+import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -132,7 +133,7 @@ export default {
 				? `
 					${ appendSelectors(
 						selector,
-						'> :where(:not(.alignleft):not(.alignright))'
+						'> :where(:not(.alignleft):not(.alignright):not(.alignfull))'
 					) } {
 						max-width: ${ contentSize ?? wideSize };
 						margin-left: auto !important;
@@ -147,6 +148,27 @@ export default {
 				`
 				: '';
 
+		// If there is custom padding, add negative margins for alignfull blocks.
+		if ( style?.spacing?.padding ) {
+			// The style object might be storing a preset so we need to make sure we get a usable value.
+			const paddingValues = getCSSRules( style );
+			paddingValues.forEach( ( rule ) => {
+				if ( rule.key === 'paddingRight' ) {
+					output += `
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						margin-right: calc(${ rule.value } * -1);
+					}
+					`;
+				} else if ( rule.key === 'paddingLeft' ) {
+					output += `
+					${ appendSelectors( selector, '> .alignfull' ) } {
+						margin-left: calc(${ rule.value } * -1);
+					}
+					`;
+				}
+			} );
+		}
+
 		// Output blockGap styles based on rules contained in layout definitions in theme.json.
 		if ( hasBlockGapSupport && blockGapValue ) {
 			output += getBlockGapCSS(