@wordpress/block-editor 12.5.0 → 12.7.0

package/src/components/iframe/index.js

@@ -11,7 +11,6 @@ import {
 	createPortal,
 	forwardRef,
 	useMemo,
-	useReducer,
 	useEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -78,29 +77,6 @@ function bubbleEvents( doc ) {
 	}
 }
 
-function useParsedAssets( html ) {
-	return useMemo( () => {
-		const doc = document.implementation.createHTMLDocument( '' );
-		doc.body.innerHTML = html;
-		return Array.from( doc.body.children );
-	}, [ html ] );
-}
-
-async function loadScript( head, { id, src } ) {
-	return new Promise( ( resolve, reject ) => {
-		const script = head.ownerDocument.createElement( 'script' );
-		script.id = id;
-		if ( src ) {
-			script.src = src;
-			script.onload = () => resolve();
-			script.onerror = () => reject();
-		} else {
-			resolve();
-		}
-		head.appendChild( script );
-	} );
-}
-
 function Iframe( {
 	contentRef,
 	children,
@@ -112,21 +88,25 @@ function Iframe( {
 	forwardedRef: ref,
 	...props
 } ) {
-	const assets = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings().__unstableResolvedAssets,
-		[]
-	);
-	const [ , forceRender ] = useReducer( () => ( {} ) );
+	const { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		return {
+			resolvedAssets: settings.__unstableResolvedAssets,
+			isPreviewMode: settings.__unstableIsPreviewMode,
+		};
+	}, [] );
+	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const compatStyles = useCompatibilityStyles();
-	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
 	const setRef = useRefEffect( ( node ) => {
+		node._load = () => {
+			setIframeDocument( node.contentDocument );
+		};
 		let iFrameDocument;
 		// Prevent the default browser action for files dropped outside of dropzones.
 		function preventFileDropDefault( event ) {
@@ -138,7 +118,6 @@ function Iframe( {
 			iFrameDocument = contentDocument;
 
 			bubbleEvents( contentDocument );
-			setIframeDocument( contentDocument );
 			clearerRef( documentElement );
 
 			// Ideally ALL classes that are added through get_body_class should
@@ -154,7 +133,6 @@ function Iframe( {
 			);
 
 			contentDocument.dir = ownerDocument.dir;
-			documentElement.removeChild( contentDocument.body );
 
 			for ( const compatStyle of compatStyles ) {
 				if ( contentDocument.getElementById( compatStyle.id ) ) {
@@ -165,11 +143,13 @@ function Iframe( {
 					compatStyle.cloneNode( true )
 				);
 
-				// eslint-disable-next-line no-console
-				console.warn(
-					`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,
-					compatStyle
-				);
+				if ( ! isPreviewMode ) {
+					// eslint-disable-next-line no-console
+					console.warn(
+						`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,
+						compatStyle
+					);
+				}
 			}
 
 			iFrameDocument.addEventListener(
@@ -199,35 +179,29 @@ function Iframe( {
 		};
 	}, [] );
 
-	const headRef = useRefEffect( ( element ) => {
-		scripts
-			.reduce(
-				( promise, script ) =>
-					promise.then( () => loadScript( element, script ) ),
-				Promise.resolve()
-			)
-			.finally( () => {
-				// When script are loaded, re-render blocks to allow them
-				// to initialise.
-				forceRender();
-			} );
-	}, [] );
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		contentRef,
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
-		headRef,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
 	// mode. Also preload the styles to avoid a flash of unstyled
 	// content.
-	const html =
-		'<!doctype html>' +
-		'<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>' +
-		( assets?.styles ?? '' );
+	const html = `<!doctype html>
+<html>
+	<head>
+		<script>window.frameElement._load()</script>
+		<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>
+		${ styles }
+		${ scripts }
+	</head>
+	<body>
+		<script>document.currentScript.parentElement.remove()</script>
+	</body>
+</html>`;
 
 	const [ src, cleanup ] = useMemo( () => {
 		const _src = URL.createObjectURL(

package/src/components/iframe/use-compatibility-styles.js

@@ -45,6 +45,11 @@ export function useCompatibilityStyles() {
 					return accumulator;
 				}
 
+				// Don't try to add styles without ID. Styles enqueued via the WP dependency system will always have IDs.
+				if ( ! ownerNode.id ) {
+					return accumulator;
+				}
+
 				function matchFromRules( _cssRules ) {
 					return Array.from( _cssRules ).find(
 						( {

package/src/components/index.js

@@ -165,8 +165,3 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSetting } from './use-setting';
-
-/*
- * The following rename hint component can be removed in 6.4.
- */
-export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';

package/src/components/inner-blocks/README.md

@@ -185,3 +185,13 @@ For example, a button block, deeply nested in several levels of block `X` that u
 
 -   **Type:** `Array`
 -   **Default:** - `undefined`. Determines which block types should be shown in the block inserter. For example, when inserting a block within the Navigation block we specify `core/navigation-link` and `core/navigation-link/page` as these are the most commonly used inner blocks. `prioritizedInserterBlocks` takes an array of the form {blockName}/{variationName}, where {variationName} is optional.
+
+### `defaultBlock`
+
+- **Type:** `Array`
+- **Default:** - `undefined`. Determines which block type should be inserted by default and any attributes that should be set by default when the block is inserted. Takes an array in the form of `[ blockname, {blockAttributes} ]`.
+
+### `directInsert`
+
+- **Type:** `Boolean`
+- **Default:** - `undefined`. Determines whether the default block should be inserted directly into the InnerBlocks area by the block appender.

package/src/components/inner-blocks/index.js

@@ -46,6 +46,8 @@ function UncontrolledInnerBlocks( props ) {
 		clientId,
 		allowedBlocks,
 		prioritizedInserterBlocks,
+		defaultBlock,
+		directInsert,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		template,
@@ -64,6 +66,8 @@ function UncontrolledInnerBlocks( props ) {
 		clientId,
 		allowedBlocks,
 		prioritizedInserterBlocks,
+		defaultBlock,
+		directInsert,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		templateLock,

package/src/components/inner-blocks/index.native.js

@@ -73,6 +73,8 @@ function UncontrolledInnerBlocks( props ) {
 		clientId,
 		allowedBlocks,
 		prioritizedInserterBlocks,
+		defaultBlock,
+		directInsert,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		template,
@@ -103,6 +105,8 @@ function UncontrolledInnerBlocks( props ) {
 		clientId,
 		allowedBlocks,
 		prioritizedInserterBlocks,
+		defaultBlock,
+		directInsert,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		templateLock,

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -3,6 +3,7 @@
  */
 import { useLayoutEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -25,9 +26,13 @@ const pendingSettingsUpdates = new WeakMap();
  * @param {string[]}             allowedBlocks              An array of block names which are permitted
  *                                                          in inner blocks.
  * @param {string[]}             prioritizedInserterBlocks  Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}.
- * @param {?WPDirectInsertBlock} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ].
- * @param {?Function|boolean}    __experimentalDirectInsert If a default block should be inserted directly by the
- *                                                          appender.
+ * @param {?WPDirectInsertBlock} defaultBlock               The default block to insert: [ blockName, { blockAttributes } ].
+ * @param {?Function|boolean}    directInsert               If a default block should be inserted directly by the appender.
+ *
+ * @param {?WPDirectInsertBlock} __experimentalDefaultBlock A deprecated prop for the default block to insert: [ blockName, { blockAttributes } ]. Use `defaultBlock` instead.
+ *
+ * @param {?Function|boolean}    __experimentalDirectInsert A deprecated prop for whether a default block should be inserted directly by the appender. Use `directInsert` instead.
+ *
  * @param {string}               [templateLock]             The template lock specified for the inner
  *                                                          blocks component. (e.g. "all")
  * @param {boolean}              captureToolbars            Whether or children toolbars should be shown
@@ -41,6 +46,8 @@ export default function useNestedSettingsUpdate(
 	clientId,
 	allowedBlocks,
 	prioritizedInserterBlocks,
+	defaultBlock,
+	directInsert,
 	__experimentalDefaultBlock,
 	__experimentalDirectInsert,
 	templateLock,
@@ -108,11 +115,29 @@ export default function useNestedSettingsUpdate(
 		}
 
 		if ( __experimentalDefaultBlock !== undefined ) {
-			newSettings.__experimentalDefaultBlock = __experimentalDefaultBlock;
+			deprecated( '__experimentalDefaultBlock', {
+				alternative: 'defaultBlock',
+				since: '6.3',
+				version: '6.4',
+			} );
+			newSettings.defaultBlock = __experimentalDefaultBlock;
+		}
+
+		if ( defaultBlock !== undefined ) {
+			newSettings.defaultBlock = defaultBlock;
 		}
 
 		if ( __experimentalDirectInsert !== undefined ) {
-			newSettings.__experimentalDirectInsert = __experimentalDirectInsert;
+			deprecated( '__experimentalDirectInsert', {
+				alternative: 'directInsert',
+				since: '6.3',
+				version: '6.4',
+			} );
+			newSettings.directInsert = __experimentalDirectInsert;
+		}
+
+		if ( directInsert !== undefined ) {
+			newSettings.directInsert = directInsert;
 		}
 
 		// Batch updates to block list settings to avoid triggering cascading renders
@@ -144,6 +169,8 @@ export default function useNestedSettingsUpdate(
 		_allowedBlocks,
 		_prioritizedInserterBlocks,
 		_templateLock,
+		defaultBlock,
+		directInsert,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		captureToolbars,

package/src/components/inserter/hooks/use-block-types-state.js

@@ -5,6 +5,7 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
+	parse,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
@@ -37,12 +38,20 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 	);
 
 	const onSelectItem = useCallback(
-		( { name, initialAttributes, innerBlocks }, shouldFocusBlock ) => {
-			const insertedBlock = createBlock(
-				name,
-				initialAttributes,
-				createBlocksFromInnerBlocksTemplate( innerBlocks )
-			);
+		(
+			{ name, initialAttributes, innerBlocks, syncStatus, content },
+			shouldFocusBlock
+		) => {
+			const insertedBlock =
+				syncStatus === 'unsynced'
+					? parse( content, {
+							__unstableSkipMigrationLogs: true,
+					  } )
+					: createBlock(
+							name,
+							initialAttributes,
+							createBlocksFromInnerBlocksTemplate( innerBlocks )
+					  );
 
 			onInsert( insertedBlock, undefined, shouldFocusBlock );
 		},

package/src/components/inserter/hooks/use-debounced-input.js

@@ -6,12 +6,13 @@ import { useDebounce } from '@wordpress/compose';
 
 export default function useDebouncedInput( defaultValue = '' ) {
 	const [ input, setInput ] = useState( defaultValue );
-	const [ debounced, setter ] = useState( defaultValue );
-	const setDebounced = useDebounce( setter, 250 );
+	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );
+
+	const setDebouncedInput = useDebounce( setDebouncedState, 250 );
+
 	useEffect( () => {
-		if ( debounced !== input ) {
-			setDebounced( input );
-		}
-	}, [ debounced, input ] );
-	return [ input, setInput, debounced ];
+		setDebouncedInput( input );
+	}, [ input ] );
+
+	return [ input, setInput, debouncedInput ];
 }

package/src/components/inserter/hooks/use-patterns-state.js

@@ -15,7 +15,7 @@ import { store as blockEditorStore } from '../../../store';
 const CUSTOM_CATEGORY = {
 	name: 'custom',
 	label: __( 'My patterns' ),
-	description: __( 'Custom patterns add by site users' ),
+	description: __( 'Custom patterns added by site users' ),
 };
 
 /**
@@ -61,6 +61,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 				),
 				{
 					type: 'snackbar',
+					id: 'block-pattern-inserted-notice',
 				}
 			);
 		},

package/src/components/inserter/index.js

@@ -231,7 +231,7 @@ export const ComposedPrivateInserter = compose( [
 				getBlockRootClientId,
 				hasInserterItems,
 				getAllowedBlocks,
-				__experimentalGetDirectInsertBlock,
+				getDirectInsertBlock,
 				getSettings,
 			} = select( blockEditorStore );
 
@@ -243,8 +243,7 @@ export const ComposedPrivateInserter = compose( [
 			const allowedBlocks = getAllowedBlocks( rootClientId );
 
 			const directInsertBlock =
-				shouldDirectInsert &&
-				__experimentalGetDirectInsertBlock( rootClientId );
+				shouldDirectInsert && getDirectInsertBlock( rootClientId );
 
 			const settings = getSettings();
 

package/src/components/inserter/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Platform, Text } from 'react-native';
+import { AccessibilityInfo, Platform } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -35,33 +35,17 @@ const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 const defaultRenderToggle = ( {
 	onToggle,
 	disabled,
-	style,
-	containerStyle,
+	iconStyle,
+	buttonStyle,
 	onLongPress,
-	useExpandedMode,
 } ) => {
-	// The "expanded mode" refers to the editor's appearance when no blocks
-	// are currently selected. The "add block" button has a separate style
-	// for the "expanded mode", which are added via the below "expandedModeViewProps"
-	// and "expandedModeViewText" variables.
-	const expandedModeViewProps = useExpandedMode && {
-		icon: <Icon icon={ plus } style={ style } />,
-		customContainerStyles: containerStyle,
-		fixedRatio: false,
-	};
-	const expandedModeViewText = (
-		<Text style={ styles[ 'inserter-menu__add-block-button-text' ] }>
-			{ __( 'Add blocks' ) }
-		</Text>
-	);
-
 	return (
 		<ToolbarButton
 			title={ _x(
 				'Add block',
 				'Generic label for block inserter button'
 			) }
-			icon={ <Icon icon={ plusCircleFilled } style={ style } /> }
+			icon={ <Icon icon={ plus } style={ iconStyle } /> }
 			onClick={ onToggle }
 			extraProps={ {
 				hint: __( 'Double tap to add a block' ),
@@ -69,12 +53,12 @@ const defaultRenderToggle = ( {
 				// usually required for components. See: https://github.com/WordPress/gutenberg/pull/18832#issuecomment-561411389.
 				testID: 'add-block-button',
 				onLongPress,
+				hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
 			} }
 			isDisabled={ disabled }
-			{ ...expandedModeViewProps }
-		>
-			{ useExpandedMode && expandedModeViewText }
-		</ToolbarButton>
+			customContainerStyles={ buttonStyle }
+			fixedRatio={ false }
+		/>
 	);
 };
 
@@ -249,23 +233,21 @@ export class Inserter extends Component {
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
 			showSeparator,
-			useExpandedMode,
 		} = this.props;
 		if ( showSeparator && isOpen ) {
 			return <BlockInsertionPoint />;
 		}
-		const style = useExpandedMode
-			? styles[ 'inserter-menu__add-block-button-icon--expanded' ]
-			: getStylesFromColorScheme(
-					styles[ 'inserter-menu__add-block-button-icon' ],
-					styles[ 'inserter-menu__add-block-button-icon--dark' ]
-			  );
-
-		const containerStyle = getStylesFromColorScheme(
+
+		const buttonStyle = getStylesFromColorScheme(
 			styles[ 'inserter-menu__add-block-button' ],
 			styles[ 'inserter-menu__add-block-button--dark' ]
 		);
 
+		const iconStyle = getStylesFromColorScheme(
+			styles[ 'inserter-menu__add-block-button-icon' ],
+			styles[ 'inserter-menu__add-block-button-icon--dark' ]
+		);
+
 		const onPress = () => {
 			this.setState(
 				{
@@ -301,10 +283,9 @@ export class Inserter extends Component {
 					onToggle: onPress,
 					isOpen,
 					disabled,
-					style,
-					containerStyle,
+					iconStyle,
+					buttonStyle,
 					onLongPress,
-					useExpandedMode,
 				} ) }
 				<Picker
 					ref={ ( instance ) => ( this.picker = instance ) }

package/src/components/inserter/reusable-block-rename-hint.js

@@ -10,7 +10,24 @@ import { close } from '@wordpress/icons';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 const PREFERENCE_NAME = 'isResuableBlocksrRenameHintVisible';
+/*
+ * This hook was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
+ * It is only exported for use in the reusable-blocks package as well as block-editor.
+ * It will be removed in 6.4. and should not be used in any new code.
+ */
+export function useReusableBlocksRenameHint() {
+	return useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+}
 
+/*
+ * This component was added in 6.3 to help users with the transition from Reusable blocks to Patterns.
+ * It is only exported for use in the reusable-blocks package as well as block-editor.
+ * It will be removed in 6.4. and should not be used in any new code.
+ */
 export default function ReusableBlocksRenameHint() {
 	const isReusableBlocksRenameHint = useSelect(
 		( select ) =>
@@ -29,7 +46,7 @@ export default function ReusableBlocksRenameHint() {
 		<div ref={ ref } className="reusable-blocks-menu-items__rename-hint">
 			<div className="reusable-blocks-menu-items__rename-hint-content">
 				{ __(
-					'Reusable blocks are now called patterns. A synced pattern will behave in exactly the same way as a reusable block.'
+					'Reusable blocks are now synced patterns. A synced pattern will behave in exactly the same way as a reusable block.'
 				) }
 			</div>
 			<Button

package/src/components/inserter/reusable-blocks-tab.js

@@ -22,7 +22,10 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 	);
 
 	const filteredItems = useMemo( () => {
-		return items.filter( ( { category } ) => category === 'reusable' );
+		return items.filter(
+			( { category, syncStatus } ) =>
+				category === 'reusable' && syncStatus !== 'unsynced'
+		);
 	}, [ items ] );
 
 	if ( filteredItems.length === 0 ) {

package/src/components/inserter/style.native.scss

@@ -1,26 +1,21 @@
 /** @format */
-
-.inserter-menu__add-block-button-icon {
-	color: $blue-50;
+.inserter-menu__add-block-button {
+	border-radius: 2px;
+	background-color: $black;
+	margin: 9px $grid-unit-20 10px $grid-unit-20;
+	padding: 0;
 }
 
-.inserter-menu__add-block-button-icon--dark {
-	color: $blue-30;
+.inserter-menu__add-block-button--dark {
+	background-color: $white;
 }
 
-.inserter-menu__add-block-button-icon--expanded {
+.inserter-menu__add-block-button-icon {
 	color: $white;
 }
 
-.inserter-menu__add-block-button {
-	border-radius: 22px;
-	background-color: $blue-50;
-	margin: 8px;
-	padding: 6px 16px 6px 12px;
-}
-
-.inserter-menu__add-block-button--dark {
-	background-color: $blue-30;
+.inserter-menu__add-block-button-icon--dark {
+	color: $black;
 }
 
 .inserter-menu__add-block-button-text {

package/src/components/inserter-list-item/index.js

@@ -49,7 +49,9 @@ function InserterListItem( {
 		];
 	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
-	const isSynced = isReusableBlock( item ) || isTemplatePart( item );
+	const isSynced =
+		( isReusableBlock( item ) && item.syncStatus !== 'unsynced' ) ||
+		isTemplatePart( item );
 
 	return (
 		<InserterDraggableBlocks

package/src/components/link-control/README.md

@@ -15,6 +15,16 @@ The distinction between the two components is perhaps best summarized by the fol
 -   `<URLInput>` - an input for presenting and managing selection behaviors associated with choosing a URL, optionally from a pool of available candidates.
 -   `<LinkControl>` - includes the features of `<URLInput>`, plus additional UI and behaviors to control how this URL applies to the concept of a "link". This includes link "settings" (eg: "opens in new tab", etc) and dynamic, "on the fly" link creation capabilities.
 
+## Persistent "Advanced" (settings) toggle state
+
+By default the link "settings" are hidden and can be toggled open/closed by way of a button labelled `Advanced` in the UI.
+
+In some circumstances if may be desirable to persist the toggle state of this portion of the UI so that it remains in the last state triggered by user interaction.
+
+For example, once the user has toggled the UI to "open", then it may remain open across all links on the site until such time as the user toggles the UI back again.
+
+Consumers who which to take advantage of this functionality should ensure that their block editor environment utilizes the [`@wordpress/preferences`](packages/preferences/README.md) package. By default the `<LinkControl>` component will attempt to persist the state of UI to a setting named `linkControlSettingsDrawer` with a scope of `core/block-editor`. If the preferences package is not available then local state is used and the setting will not be persisted.
+
 ## Search Suggestions
 
 When creating links the `LinkControl` component will handle two kinds of input from users:
@@ -69,9 +79,7 @@ An array of settings objects associated with a link (for example: a setting to d
 To disable settings, pass in an empty array. for example:
 
 ```jsx
-<LinkControl
-	settings={ [] }
-/>
+<LinkControl settings={ [] } />
 ```
 
 ### onChange
@@ -192,6 +200,7 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
+
 ### renderControlBottom
 
 -   Type: `Function`