@wordpress/block-editor 12.13.0 → 12.15.0

package/src/hooks/position.js

@@ -14,22 +14,16 @@ import {
 } from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import {
-	useContext,
-	useMemo,
-	createPortal,
-	Platform,
-} from '@wordpress/element';
+import { useMemo, Platform } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
-import BlockList from '../components/block-list';
 import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import useBlockDisplayInformation from '../components/use-block-display-information';
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
 import { store as blockEditorStore } from '../store';
 
@@ -329,7 +323,7 @@ export function PositionPanel( props ) {
  *
  * @return {Function} Wrapped component.
  */
-export const withInspectorControls = createHigherOrderComponent(
+export const withPositionControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
 		const positionSupport = hasBlockSupport(
@@ -346,7 +340,7 @@ export const withInspectorControls = createHigherOrderComponent(
 			<BlockEdit key="edit" { ...props } />,
 		];
 	},
-	'withInspectorControls'
+	'withPositionControls'
 );
 
 /**
@@ -368,7 +362,6 @@ export const withPositionStyles = createHigherOrderComponent(
 			hasPositionBlockSupport && ! isPositionDisabled;
 
 		const id = useInstanceId( BlockListBlock );
-		const element = useContext( BlockList.__unstableElementContext );
 
 		// Higher specificity to override defaults in editor UI.
 		const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
@@ -392,15 +385,9 @@ export const withPositionStyles = createHigherOrderComponent(
 				!! attributes?.style?.position?.type,
 		} );
 
-		return (
-			<>
-				{ allowPositionStyles &&
-					element &&
-					!! css &&
-					createPortal( <style>{ css }</style>, element ) }
-				<BlockListBlock { ...props } className={ className } />
-			</>
-		);
+		useStyleOverride( { css } );
+
+		return <BlockListBlock { ...props } className={ className } />;
 	},
 	'withPositionStyles'
 );
@@ -413,5 +400,5 @@ addFilter(
 addFilter(
 	'editor.BlockEdit',
 	'core/editor/position/with-inspector-controls',
-	withInspectorControls
+	withPositionControls
 );

package/src/hooks/style.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useContext, useMemo, createPortal } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -19,7 +19,6 @@ import { getCSSRules, compileCSS } from '@wordpress/style-engine';
 /**
  * Internal dependencies
  */
-import BlockList from '../components/block-list';
 import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
 import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
@@ -34,7 +33,7 @@ import {
 	DimensionsPanel,
 } from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
-import { shouldSkipSerialization } from './utils';
+import { shouldSkipSerialization, useStyleOverride } from './utils';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 
@@ -354,7 +353,7 @@ export function addEditProps( settings ) {
  *
  * @return {Function} Wrapped component.
  */
-export const withBlockControls = createHigherOrderComponent(
+export const withBlockStyleControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		if ( ! hasStyleSupport( props.name ) ) {
 			return <BlockEdit key="edit" { ...props } />;
@@ -378,7 +377,7 @@ export const withBlockControls = createHigherOrderComponent(
 			</>
 		);
 	},
-	'withToolbarControls'
+	'withBlockStyleControls'
 );
 
 // Defines which element types are supported, including their hover styles or
@@ -484,33 +483,20 @@ const withElementsStyles = createHigherOrderComponent(
 				: undefined;
 		}, [ baseElementSelector, blockElementStyles, props.name ] );
 
-		const element = useContext( BlockList.__unstableElementContext );
+		useStyleOverride( { css: styles } );
 
 		return (
-			<>
-				{ styles &&
-					element &&
-					createPortal(
-						<style
-							dangerouslySetInnerHTML={ {
-								__html: styles,
-							} }
-						/>,
-						element
-					) }
-
-				<BlockListBlock
-					{ ...props }
-					className={
-						props.attributes.style?.elements
-							? classnames(
-									props.className,
-									blockElementsContainerIdentifier
-							  )
-							: props.className
-					}
-				/>
-			</>
+			<BlockListBlock
+				{ ...props }
+				className={
+					props.attributes.style?.elements
+						? classnames(
+								props.className,
+								blockElementsContainerIdentifier
+						  )
+						: props.className
+				}
+			/>
 		);
 	},
 	'withElementsStyles'
@@ -537,7 +523,7 @@ addFilter(
 addFilter(
 	'editor.BlockEdit',
 	'core/style/with-block-controls',
-	withBlockControls
+	withBlockStyleControls
 );
 
 addFilter(

package/src/hooks/test/__snapshots__/align.native.js.snap

@@ -19,25 +19,25 @@ exports[`Align options for group block sets Wide width option 1`] = `
 `;
 
 exports[`Align options for media block sets Align center option 1`] = `
-"<!-- wp:image {"align":"center","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
 <figure class="wp-block-image aligncenter size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align left option 1`] = `
-"<!-- wp:image {"align":"left","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
 <figure class="wp-block-image alignleft size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align right option 1`] = `
-"<!-- wp:image {"align":"right","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"right"} -->
 <figure class="wp-block-image alignright size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Full width option 1`] = `
-"<!-- wp:image {"align":"full","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"full"} -->
 <figure class="wp-block-image alignfull size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
@@ -49,7 +49,7 @@ exports[`Align options for media block sets None option 1`] = `
 `;
 
 exports[`Align options for media block sets Wide width option 1`] = `
-"<!-- wp:image {"align":"wide","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"wide"} -->
 <figure class="wp-block-image alignwide size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;

package/src/hooks/test/align.js

@@ -22,7 +22,7 @@ import BlockEdit from '../../components/block-edit';
 import BlockEditorProvider from '../../components/provider';
 import {
 	getValidAlignments,
-	withToolbarControls,
+	withAlignmentControls,
 	withDataAlign,
 	addAssignedAlign,
 } from '../align';
@@ -157,7 +157,7 @@ describe( 'align', () => {
 		} );
 	} );
 
-	describe( 'withToolbarControls', () => {
+	describe( 'withAlignControls', () => {
 		const componentProps = {
 			name: 'core/foo',
 			attributes: {},
@@ -167,7 +167,7 @@ describe( 'align', () => {
 		it( 'should do nothing if no valid alignments', () => {
 			registerBlockType( 'core/foo', blockSettings );
 
-			const EnhancedComponent = withToolbarControls(
+			const EnhancedComponent = withAlignmentControls(
 				( { wrapperProps } ) => <div { ...wrapperProps } />
 			);
 
@@ -197,7 +197,7 @@ describe( 'align', () => {
 				},
 			} );
 
-			const EnhancedComponent = withToolbarControls(
+			const EnhancedComponent = withAlignmentControls(
 				( { wrapperProps } ) => <div { ...wrapperProps } />
 			);
 

package/src/hooks/utils.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect, useId } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -10,6 +11,8 @@ import { useMemo } from '@wordpress/element';
 import { useSettings } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 
 /**
  * Removed falsy values from nested object.
@@ -115,6 +118,35 @@ export function shouldSkipSerialization( blockType, featureSet, feature ) {
 	return skipSerialization;
 }
 
+export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
+	const { setStyleOverride, deleteStyleOverride } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	const fallbackId = useId();
+	useEffect( () => {
+		// Unmount if there is CSS and assets are empty.
+		if ( ! css && ! assets ) return;
+		const _id = id || fallbackId;
+		setStyleOverride( _id, {
+			id,
+			css,
+			assets,
+			__unstableType,
+		} );
+		return () => {
+			deleteStyleOverride( _id );
+		};
+	}, [
+		id,
+		css,
+		assets,
+		__unstableType,
+		fallbackId,
+		setStyleOverride,
+		deleteStyleOverride,
+	] );
+}
+
 /**
  * Based on the block and its context, returns an object of all the block settings.
  * This object can be passed as a prop to all the Styles UI components

package/src/layouts/constrained.js

@@ -36,7 +36,10 @@ export default {
 		layoutBlockSupport = {},
 	} ) {
 		const { wideSize, contentSize, justifyContent = 'center' } = layout;
-		const { allowJustification = true } = layoutBlockSupport;
+		const {
+			allowJustification = true,
+			allowCustomContentAndWideSize = true,
+		} = layoutBlockSupport;
 		const onJustificationChange = ( value ) => {
 			onChange( {
 				...layout,
@@ -66,55 +69,59 @@ export default {
 		} );
 		return (
 			<>
-				<div className="block-editor-hooks__layout-controls">
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							className="block-editor-hooks__layout-controls-unit-input"
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSize || wideSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									contentSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ positionCenter } />
-					</div>
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							className="block-editor-hooks__layout-controls-unit-input"
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSize || contentSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									wideSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ stretchWide } />
-					</div>
-				</div>
-				<p className="block-editor-hooks__layout-controls-helptext">
-					{ __(
-						'Customize the width for all elements that are assigned to the center or wide columns.'
-					) }
-				</p>
+				{ allowCustomContentAndWideSize && (
+					<>
+						<div className="block-editor-hooks__layout-controls">
+							<div className="block-editor-hooks__layout-controls-unit">
+								<UnitControl
+									className="block-editor-hooks__layout-controls-unit-input"
+									label={ __( 'Content' ) }
+									labelPosition="top"
+									__unstableInputWidth="80px"
+									value={ contentSize || wideSize || '' }
+									onChange={ ( nextWidth ) => {
+										nextWidth =
+											0 > parseFloat( nextWidth )
+												? '0'
+												: nextWidth;
+										onChange( {
+											...layout,
+											contentSize: nextWidth,
+										} );
+									} }
+									units={ units }
+								/>
+								<Icon icon={ positionCenter } />
+							</div>
+							<div className="block-editor-hooks__layout-controls-unit">
+								<UnitControl
+									className="block-editor-hooks__layout-controls-unit-input"
+									label={ __( 'Wide' ) }
+									labelPosition="top"
+									__unstableInputWidth="80px"
+									value={ wideSize || contentSize || '' }
+									onChange={ ( nextWidth ) => {
+										nextWidth =
+											0 > parseFloat( nextWidth )
+												? '0'
+												: nextWidth;
+										onChange( {
+											...layout,
+											wideSize: nextWidth,
+										} );
+									} }
+									units={ units }
+								/>
+								<Icon icon={ stretchWide } />
+							</div>
+						</div>
+						<p className="block-editor-hooks__layout-controls-helptext">
+							{ __(
+								'Customize the width for all elements that are assigned to the center or wide columns.'
+							) }
+						</p>
+					</>
+				) }
 				{ allowJustification && (
 					<ToggleGroupControl
 						__nextHasNoMarginBottom

package/src/private-apis.js

@@ -10,8 +10,9 @@ import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
+import BlockContextualToolbar from './components/block-tools/block-contextual-toolbar';
 import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
-import { cleanEmptyObject } from './hooks/utils';
+import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
@@ -41,8 +42,10 @@ lock( privateApis, {
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
+	BlockContextualToolbar,
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
+	useStyleOverride,
 	BlockQuickNavigation,
 	LayoutStyle,
 	BlockRemovalWarningModal,

package/src/store/actions.js

@@ -23,7 +23,6 @@ import deprecated from '@wordpress/deprecated';
 /**
  * Internal dependencies
  */
-import { mapRichTextSettings } from './utils';
 import {
 	retrieveSelectedAttribute,
 	START_OF_SELECTED_AREA,
@@ -759,43 +758,23 @@ export const __unstableDeleteSelection =
 		const selectionB = selectionEnd;
 
 		const blockA = select.getBlock( selectionA.clientId );
-		const blockAType = getBlockType( blockA.name );
-
 		const blockB = select.getBlock( selectionB.clientId );
-		const blockBType = getBlockType( blockB.name );
 
 		const htmlA = blockA.attributes[ selectionA.attributeKey ];
 		const htmlB = blockB.attributes[ selectionB.attributeKey ];
 
-		const attributeDefinitionA =
-			blockAType.attributes[ selectionA.attributeKey ];
-		const attributeDefinitionB =
-			blockBType.attributes[ selectionB.attributeKey ];
-
-		let valueA = create( {
-			html: htmlA,
-			...mapRichTextSettings( attributeDefinitionA ),
-		} );
-		let valueB = create( {
-			html: htmlB,
-			...mapRichTextSettings( attributeDefinitionB ),
-		} );
+		let valueA = create( { html: htmlA } );
+		let valueB = create( { html: htmlB } );
 
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = insert( valueB, START_OF_SELECTED_AREA, 0, selectionB.offset );
 
 		// Clone the blocks so we don't manipulate the original.
 		const cloneA = cloneBlock( blockA, {
-			[ selectionA.attributeKey ]: toHTMLString( {
-				value: valueA,
-				...mapRichTextSettings( attributeDefinitionA ),
-			} ),
+			[ selectionA.attributeKey ]: toHTMLString( { value: valueA } ),
 		} );
 		const cloneB = cloneBlock( blockB, {
-			[ selectionB.attributeKey ]: toHTMLString( {
-				value: valueB,
-				...mapRichTextSettings( attributeDefinitionB ),
-			} ),
+			[ selectionB.attributeKey ]: toHTMLString( { value: valueB } ),
 		} );
 
 		const followingBlock = isForward ? cloneA : cloneB;
@@ -831,20 +810,10 @@ export const __unstableDeleteSelection =
 		const newAttributeKey = retrieveSelectedAttribute( updatedAttributes );
 
 		const convertedHtml = updatedAttributes[ newAttributeKey ];
-		const convertedValue = create( {
-			html: convertedHtml,
-			...mapRichTextSettings(
-				targetBlockType.attributes[ newAttributeKey ]
-			),
-		} );
+		const convertedValue = create( { html: convertedHtml } );
 		const newOffset = convertedValue.text.indexOf( START_OF_SELECTED_AREA );
 		const newValue = remove( convertedValue, newOffset, newOffset + 1 );
-		const newHtml = toHTMLString( {
-			value: newValue,
-			...mapRichTextSettings(
-				targetBlockType.attributes[ newAttributeKey ]
-			),
-		} );
+		const newHtml = toHTMLString( { value: newValue } );
 
 		updatedAttributes[ newAttributeKey ] = newHtml;
 
@@ -931,27 +900,13 @@ export const __unstableSplitSelection =
 		const selectionB = selectionEnd;
 
 		const blockA = select.getBlock( selectionA.clientId );
-		const blockAType = getBlockType( blockA.name );
-
 		const blockB = select.getBlock( selectionB.clientId );
-		const blockBType = getBlockType( blockB.name );
 
 		const htmlA = blockA.attributes[ selectionA.attributeKey ];
 		const htmlB = blockB.attributes[ selectionB.attributeKey ];
 
-		const attributeDefinitionA =
-			blockAType.attributes[ selectionA.attributeKey ];
-		const attributeDefinitionB =
-			blockBType.attributes[ selectionB.attributeKey ];
-
-		let valueA = create( {
-			html: htmlA,
-			...mapRichTextSettings( attributeDefinitionA ),
-		} );
-		let valueB = create( {
-			html: htmlB,
-			...mapRichTextSettings( attributeDefinitionB ),
-		} );
+		let valueA = create( { html: htmlA } );
+		let valueB = create( { html: htmlB } );
 
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = remove( valueB, 0, selectionB.offset );
@@ -964,7 +919,6 @@ export const __unstableSplitSelection =
 					...blockA.attributes,
 					[ selectionA.attributeKey ]: toHTMLString( {
 						value: valueA,
-						...mapRichTextSettings( attributeDefinitionA ),
 					} ),
 				},
 			},
@@ -975,7 +929,6 @@ export const __unstableSplitSelection =
 					...blockB.attributes,
 					[ selectionB.attributeKey ]: toHTMLString( {
 						value: valueB,
-						...mapRichTextSettings( attributeDefinitionB ),
 					} ),
 				},
 			},
@@ -1143,10 +1096,7 @@ export const mergeBlocks =
 			const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
 			const html = selectedBlock.attributes[ attributeKey ];
 			const value = insert(
-				create( {
-					html,
-					...mapRichTextSettings( attributeDefinition ),
-				} ),
+				create( { html } ),
 				START_OF_SELECTED_AREA,
 				offset,
 				offset
@@ -1154,7 +1104,6 @@ export const mergeBlocks =
 
 			selectedBlock.attributes[ attributeKey ] = toHTMLString( {
 				value,
-				...mapRichTextSettings( attributeDefinition ),
 			} );
 		}
 
@@ -1180,22 +1129,12 @@ export const mergeBlocks =
 			const newAttributeKey =
 				retrieveSelectedAttribute( updatedAttributes );
 			const convertedHtml = updatedAttributes[ newAttributeKey ];
-			const convertedValue = create( {
-				html: convertedHtml,
-				...mapRichTextSettings(
-					blockAType.attributes[ newAttributeKey ]
-				),
-			} );
+			const convertedValue = create( { html: convertedHtml } );
 			const newOffset = convertedValue.text.indexOf(
 				START_OF_SELECTED_AREA
 			);
 			const newValue = remove( convertedValue, newOffset, newOffset + 1 );
-			const newHtml = toHTMLString( {
-				value: newValue,
-				...mapRichTextSettings(
-					blockAType.attributes[ newAttributeKey ]
-				),
-			} );
+			const newHtml = toHTMLString( { value: newValue } );
 
 			updatedAttributes[ newAttributeKey ] = newHtml;
 
@@ -1980,3 +1919,18 @@ export function unsetBlockEditingMode( clientId = '' ) {
 		clientId,
 	};
 }
+
+/**
+ * Action that sets the element that had focus when focus leaves the editor canvas.
+ *
+ * @param {Object} lastFocus The last focused element.
+ *
+ *
+ * @return {Object} Action object.
+ */
+export function setLastFocus( lastFocus = null ) {
+	return {
+		type: 'LAST_FOCUS',
+		lastFocus,
+	};
+}

package/src/store/reducer.js

@@ -1962,6 +1962,24 @@ export function registeredInserterMediaCategories( state = [], action ) {
 		case 'REGISTER_INSERTER_MEDIA_CATEGORY':
 			return [ ...state, action.category ];
 	}
+
+	return state;
+}
+
+/**
+ * Reducer setting last focused element
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function lastFocus( state = false, action ) {
+	switch ( action.type ) {
+		case 'LAST_FOCUS':
+			return action.lastFocus;
+	}
+
 	return state;
 }
 
@@ -1981,6 +1999,7 @@ const combinedReducers = combineReducers( {
 	settings,
 	preferences,
 	lastBlockAttributesChange,
+	lastFocus,
 	editorMode,
 	hasBlockMovingClientId,
 	highlightedBlock,