@wordpress/editor 13.26.1-next.79a6196f.0 → 13.27.0

package/build-style/style.css

@@ -98,7 +98,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -142,6 +142,81 @@
   color: var(--wp-admin-theme-color);
 }
 
+.editor-block-manager__no-results {
+  font-style: italic;
+  padding: 24px 0;
+  text-align: center;
+}
+
+.editor-block-manager__search {
+  margin: 16px 0;
+}
+
+.editor-block-manager__disabled-blocks-count {
+  border: 1px solid #ddd;
+  border-width: 1px 0;
+  box-shadow: -32px 0 0 0 #fff, 32px 0 0 0 #fff;
+  padding: 8px;
+  background-color: #fff;
+  text-align: center;
+  position: sticky;
+  top: -5px;
+  z-index: 2;
+}
+.editor-block-manager__disabled-blocks-count ~ .editor-block-manager__results .editor-block-manager__category-title {
+  top: 31px;
+}
+.editor-block-manager__disabled-blocks-count .is-link {
+  margin-left: 12px;
+}
+
+.editor-block-manager__category {
+  margin: 0 0 24px 0;
+}
+
+.editor-block-manager__category-title {
+  position: sticky;
+  top: -4px;
+  padding: 16px 0;
+  background-color: #fff;
+  z-index: 1;
+}
+.editor-block-manager__category-title .components-checkbox-control__label {
+  font-weight: 600;
+}
+
+.editor-block-manager__checklist {
+  margin-top: 0;
+}
+
+.editor-block-manager__category-title,
+.editor-block-manager__checklist-item {
+  border-bottom: 1px solid #ddd;
+}
+
+.editor-block-manager__checklist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0;
+  padding: 8px 0 8px 16px;
+}
+.components-modal__content .editor-block-manager__checklist-item.components-checkbox-control__input-container {
+  margin: 0 8px;
+}
+.editor-block-manager__checklist-item .block-editor-block-icon {
+  margin-right: 10px;
+  fill: #1e1e1e;
+}
+
+.editor-block-manager__results {
+  border-top: 1px solid #ddd;
+}
+
+.editor-block-manager__disabled-blocks-count + .editor-block-manager__results {
+  border-top-width: 0;
+}
+
 .editor-document-bar {
   display: flex;
   align-items: center;
@@ -456,7 +531,6 @@
 .components-editor-notices__dismissible .components-notice,
 .components-editor-notices__pinned .components-notice {
   box-sizing: border-box;
-  margin: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   padding: 0 12px;
   min-height: 60px;
@@ -484,6 +558,10 @@
   margin-bottom: 12px;
 }
 
+.entities-saved-states__description-heading {
+  font-size: 13px;
+}
+
 .editor-error-boundary {
   margin: auto;
   max-width: 780px;
@@ -753,12 +831,6 @@
   padding: 16px;
 }
 
-@media (min-width: 600px) {
-  .editor-post-locked-modal {
-    max-width: 480px;
-  }
-}
-
 .editor-post-locked-modal__buttons {
   margin-top: 24px;
 }
@@ -1419,8 +1491,4 @@
 }
 .editor-template-validation-notice .components-button {
   margin-left: 5px;
-}
-
-.editor-canvas__iframe.has-history {
-  padding: 48px 48px 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.26.1-next.79a6196f.0",
+	"version": "13.27.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,40 +27,40 @@
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/{index.js,store/index.js,hooks/**}"
+		"{src,build,build-module}/{index.js,store/index.js,hooks/**,bindings/**}"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.48.1-next.79a6196f.0",
-		"@wordpress/api-fetch": "^6.45.1-next.79a6196f.0",
-		"@wordpress/blob": "^3.48.1-next.79a6196f.0",
-		"@wordpress/block-editor": "^12.16.1-next.79a6196f.0",
-		"@wordpress/blocks": "^12.25.1-next.79a6196f.0",
-		"@wordpress/commands": "^0.19.1-next.79a6196f.0",
-		"@wordpress/components": "^25.15.1-next.79a6196f.0",
-		"@wordpress/compose": "^6.25.1-next.79a6196f.0",
-		"@wordpress/core-data": "^6.25.1-next.79a6196f.0",
-		"@wordpress/data": "^9.18.1-next.79a6196f.0",
-		"@wordpress/date": "^4.48.1-next.79a6196f.0",
-		"@wordpress/deprecated": "^3.48.1-next.79a6196f.0",
-		"@wordpress/dom": "^3.48.1-next.79a6196f.0",
-		"@wordpress/element": "^5.25.1-next.79a6196f.0",
-		"@wordpress/hooks": "^3.48.1-next.79a6196f.0",
-		"@wordpress/html-entities": "^3.48.1-next.79a6196f.0",
-		"@wordpress/i18n": "^4.48.1-next.79a6196f.0",
-		"@wordpress/icons": "^9.39.1-next.79a6196f.0",
-		"@wordpress/keyboard-shortcuts": "^4.25.1-next.79a6196f.0",
-		"@wordpress/keycodes": "^3.48.1-next.79a6196f.0",
-		"@wordpress/media-utils": "^4.39.1-next.79a6196f.0",
-		"@wordpress/notices": "^4.16.1-next.79a6196f.0",
-		"@wordpress/patterns": "^1.9.1-next.79a6196f.0",
-		"@wordpress/preferences": "^3.25.1-next.79a6196f.0",
-		"@wordpress/private-apis": "^0.30.1-next.79a6196f.0",
-		"@wordpress/reusable-blocks": "^4.25.1-next.79a6196f.0",
-		"@wordpress/rich-text": "^6.25.1-next.79a6196f.0",
-		"@wordpress/server-side-render": "^4.25.1-next.79a6196f.0",
-		"@wordpress/url": "^3.49.1-next.79a6196f.0",
-		"@wordpress/wordcount": "^3.48.1-next.79a6196f.0",
+		"@wordpress/a11y": "^3.50.0",
+		"@wordpress/api-fetch": "^6.47.0",
+		"@wordpress/blob": "^3.50.0",
+		"@wordpress/block-editor": "^12.18.0",
+		"@wordpress/blocks": "^12.27.0",
+		"@wordpress/commands": "^0.21.0",
+		"@wordpress/components": "^25.16.0",
+		"@wordpress/compose": "^6.27.0",
+		"@wordpress/core-data": "^6.27.0",
+		"@wordpress/data": "^9.20.0",
+		"@wordpress/date": "^4.50.0",
+		"@wordpress/deprecated": "^3.50.0",
+		"@wordpress/dom": "^3.50.0",
+		"@wordpress/element": "^5.27.0",
+		"@wordpress/hooks": "^3.50.0",
+		"@wordpress/html-entities": "^3.50.0",
+		"@wordpress/i18n": "^4.50.0",
+		"@wordpress/icons": "^9.41.0",
+		"@wordpress/keyboard-shortcuts": "^4.27.0",
+		"@wordpress/keycodes": "^3.50.0",
+		"@wordpress/media-utils": "^4.41.0",
+		"@wordpress/notices": "^4.18.0",
+		"@wordpress/patterns": "^1.11.0",
+		"@wordpress/preferences": "^3.27.0",
+		"@wordpress/private-apis": "^0.32.0",
+		"@wordpress/reusable-blocks": "^4.27.0",
+		"@wordpress/rich-text": "^6.27.0",
+		"@wordpress/server-side-render": "^4.27.0",
+		"@wordpress/url": "^3.51.0",
+		"@wordpress/wordcount": "^3.50.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"memize": "^2.1.0",
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1e74b942ac0119a22ceaaf5c9594263f3ec516ab"
+	"gitHead": "45de2cb4212fed7f2763e95f10300d1ff9d0ec08"
 }

package/src/bindings/index.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { dispatch } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+import postMeta from './post-meta';
+
+const { registerBlockBindingsSource } = unlock( dispatch( blockEditorStore ) );
+registerBlockBindingsSource( postMeta );

package/src/bindings/post-meta.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+
+export default {
+	name: 'post_meta',
+	label: __( 'Post Meta' ),
+	useSource( props, sourceAttributes ) {
+		const { getCurrentPostType } = useSelect( editorStore );
+		const { context } = props;
+		const { value: metaKey } = sourceAttributes;
+		const postType = context.postType
+			? context.postType
+			: getCurrentPostType();
+		const [ meta, setMeta ] = useEntityProp(
+			'postType',
+			context.postType,
+			'meta',
+			context.postId
+		);
+
+		if ( postType === 'wp_template' ) {
+			return { placeholder: metaKey };
+		}
+		const metaValue = meta[ metaKey ];
+		const updateMetaValue = ( newValue ) => {
+			setMeta( { ...meta, [ metaKey ]: newValue } );
+		};
+		return {
+			placeholder: metaKey,
+			useValue: [ metaValue, updateMetaValue ],
+		};
+	},
+	lockAttributesEditing: true,
+};

package/src/components/block-manager/category.js

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
+import { CheckboxControl } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import BlockTypesChecklist from './checklist';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+function BlockManagerCategory( { title, blockTypes } ) {
+	const instanceId = useInstanceId( BlockManagerCategory );
+	const { allowedBlockTypes, hiddenBlockTypes } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { get } = select( preferencesStore );
+		return {
+			allowedBlockTypes: getEditorSettings().allowedBlockTypes,
+			hiddenBlockTypes: get( 'core', 'hiddenBlockTypes' ),
+		};
+	}, [] );
+	const filteredBlockTypes = useMemo( () => {
+		if ( allowedBlockTypes === true ) {
+			return blockTypes;
+		}
+		return blockTypes.filter( ( { name } ) => {
+			return allowedBlockTypes?.includes( name );
+		} );
+	}, [ allowedBlockTypes, blockTypes ] );
+	const { showBlockTypes, hideBlockTypes } = unlock(
+		useDispatch( editorStore )
+	);
+	const toggleVisible = useCallback(
+		( blockName, nextIsChecked ) => {
+			if ( nextIsChecked ) {
+				showBlockTypes( blockName );
+			} else {
+				hideBlockTypes( blockName );
+			}
+		},
+		[ showBlockTypes, hideBlockTypes ]
+	);
+	const toggleAllVisible = useCallback(
+		( nextIsChecked ) => {
+			const blockNames = blockTypes.map( ( { name } ) => name );
+			if ( nextIsChecked ) {
+				showBlockTypes( blockNames );
+			} else {
+				hideBlockTypes( blockNames );
+			}
+		},
+		[ blockTypes, showBlockTypes, hideBlockTypes ]
+	);
+
+	if ( ! filteredBlockTypes.length ) {
+		return null;
+	}
+
+	const checkedBlockNames = filteredBlockTypes
+		.map( ( { name } ) => name )
+		.filter( ( type ) => ! ( hiddenBlockTypes ?? [] ).includes( type ) );
+
+	const titleId = 'editor-block-manager__category-title-' + instanceId;
+
+	const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length;
+	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
+
+	return (
+		<div
+			role="group"
+			aria-labelledby={ titleId }
+			className="editor-block-manager__category"
+		>
+			<CheckboxControl
+				__nextHasNoMarginBottom
+				checked={ isAllChecked }
+				onChange={ toggleAllVisible }
+				className="editor-block-manager__category-title"
+				indeterminate={ isIndeterminate }
+				label={ <span id={ titleId }>{ title }</span> }
+			/>
+			<BlockTypesChecklist
+				blockTypes={ filteredBlockTypes }
+				value={ checkedBlockNames }
+				onItemChange={ toggleVisible }
+			/>
+		</div>
+	);
+}
+
+export default BlockManagerCategory;

package/src/components/block-manager/checklist.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockIcon } from '@wordpress/block-editor';
+import { CheckboxControl } from '@wordpress/components';
+
+function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
+	return (
+		<ul className="editor-block-manager__checklist">
+			{ blockTypes.map( ( blockType ) => (
+				<li
+					key={ blockType.name }
+					className="editor-block-manager__checklist-item"
+				>
+					<CheckboxControl
+						__nextHasNoMarginBottom
+						label={ blockType.title }
+						checked={ value.includes( blockType.name ) }
+						onChange={ ( ...args ) =>
+							onItemChange( blockType.name, ...args )
+						}
+					/>
+					<BlockIcon icon={ blockType.icon } />
+				</li>
+			) ) }
+		</ul>
+	);
+}
+
+export default BlockTypesChecklist;

package/src/components/block-manager/index.js

@@ -0,0 +1,160 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { SearchControl, Button } from '@wordpress/components';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import { useDebounce, compose } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editorStore } from '../../store';
+import BlockManagerCategory from './category';
+
+function BlockManager( {
+	blockTypes,
+	categories,
+	hasBlockSupport,
+	isMatchingSearchTerm,
+	numberOfHiddenBlocks,
+	enableAllBlockTypes,
+} ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const [ search, setSearch ] = useState( '' );
+
+	// Filtering occurs here (as opposed to `withSelect`) to avoid
+	// wasted renders by consequence of `Array#filter` producing
+	// a new value reference on each call.
+	blockTypes = blockTypes.filter(
+		( blockType ) =>
+			hasBlockSupport( blockType, 'inserter', true ) &&
+			( ! search || isMatchingSearchTerm( blockType, search ) ) &&
+			( ! blockType.parent ||
+				blockType.parent.includes( 'core/post-content' ) )
+	);
+
+	// Announce search results on change
+	useEffect( () => {
+		if ( ! search ) {
+			return;
+		}
+		const count = blockTypes.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ blockTypes.length, search, debouncedSpeak ] );
+
+	return (
+		<div className="editor-block-manager__content">
+			{ !! numberOfHiddenBlocks && (
+				<div className="editor-block-manager__disabled-blocks-count">
+					{ sprintf(
+						/* translators: %d: number of blocks. */
+						_n(
+							'%d block is hidden.',
+							'%d blocks are hidden.',
+							numberOfHiddenBlocks
+						),
+						numberOfHiddenBlocks
+					) }
+					<Button
+						variant="link"
+						onClick={ () => enableAllBlockTypes( blockTypes ) }
+					>
+						{ __( 'Reset' ) }
+					</Button>
+				</div>
+			) }
+			<SearchControl
+				__nextHasNoMarginBottom
+				label={ __( 'Search for a block' ) }
+				placeholder={ __( 'Search for a block' ) }
+				value={ search }
+				onChange={ ( nextSearch ) => setSearch( nextSearch ) }
+				className="editor-block-manager__search"
+			/>
+			<div
+				tabIndex="0"
+				role="region"
+				aria-label={ __( 'Available block types' ) }
+				className="editor-block-manager__results"
+			>
+				{ blockTypes.length === 0 && (
+					<p className="editor-block-manager__no-results">
+						{ __( 'No blocks found.' ) }
+					</p>
+				) }
+				{ categories.map( ( category ) => (
+					<BlockManagerCategory
+						key={ category.slug }
+						title={ category.title }
+						blockTypes={ blockTypes.filter(
+							( blockType ) =>
+								blockType.category === category.slug
+						) }
+					/>
+				) ) }
+				<BlockManagerCategory
+					title={ __( 'Uncategorized' ) }
+					blockTypes={ blockTypes.filter(
+						( { category } ) => ! category
+					) }
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const {
+			getBlockTypes,
+			getCategories,
+			hasBlockSupport,
+			isMatchingSearchTerm,
+		} = select( blocksStore );
+		const { get } = select( preferencesStore );
+
+		// Some hidden blocks become unregistered
+		// by removing for instance the plugin that registered them, yet
+		// they're still remain as hidden by the user's action.
+		// We consider "hidden", blocks which were hidden and
+		// are still registered.
+		const blockTypes = getBlockTypes();
+		const hiddenBlockTypes = (
+			get( 'core', 'hiddenBlockTypes' ) ?? []
+		).filter( ( hiddenBlock ) => {
+			return blockTypes.some(
+				( registeredBlock ) => registeredBlock.name === hiddenBlock
+			);
+		} );
+		const numberOfHiddenBlocks =
+			Array.isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;
+
+		return {
+			blockTypes,
+			categories: getCategories(),
+			hasBlockSupport,
+			isMatchingSearchTerm,
+			numberOfHiddenBlocks,
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { showBlockTypes } = unlock( dispatch( editorStore ) );
+		return {
+			enableAllBlockTypes: ( blockTypes ) => {
+				const blockNames = blockTypes.map( ( { name } ) => name );
+				showBlockTypes( blockNames );
+			},
+		};
+	} ),
+] )( BlockManager );

package/src/components/block-manager/style.scss

@@ -0,0 +1,82 @@
+.editor-block-manager__no-results {
+	font-style: italic;
+	padding: $grid-unit-30 0;
+	text-align: center;
+}
+
+.editor-block-manager__search {
+	margin: $grid-unit-20 0;
+}
+
+.editor-block-manager__disabled-blocks-count {
+	border: 1px solid $gray-300;
+	border-width: 1px 0;
+	// Cover up horizontal areas off the sides of the box rectangle
+	box-shadow: -$grid-unit-40 0 0 0 $white, $grid-unit-40 0 0 0 $white;
+	padding: $grid-unit-10;
+	background-color: $white;
+	text-align: center;
+	position: sticky;
+	// When sticking, tuck the top border beneath the modal header border
+	top: ($grid-unit-05 + 1) * -1;
+	z-index: z-index(".editor-block-manager__disabled-blocks-count");
+
+	// Stick the category titles to the bottom
+	~ .editor-block-manager__results .editor-block-manager__category-title {
+		top: $grid-unit-40 - 1;
+	}
+	.is-link {
+		margin-left: 12px;
+	}
+}
+
+.editor-block-manager__category {
+	margin: 0 0 $grid-unit-30 0;
+}
+
+.editor-block-manager__category-title {
+	position: sticky;
+	top: - $grid-unit-05; // Offsets the top padding on the modal content container
+	padding: $grid-unit-20 0;
+	background-color: $white;
+	z-index: z-index(".editor-block-manager__category-title");
+
+	.components-checkbox-control__label {
+		font-weight: 600;
+	}
+}
+
+.editor-block-manager__checklist {
+	margin-top: 0;
+}
+
+.editor-block-manager__category-title,
+.editor-block-manager__checklist-item {
+	border-bottom: 1px solid $gray-300;
+}
+
+.editor-block-manager__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
+
+	.components-modal__content &.components-checkbox-control__input-container {
+		margin: 0 $grid-unit-10;
+	}
+
+	.block-editor-block-icon {
+		margin-right: 10px;
+		fill: $gray-900;
+	}
+}
+
+.editor-block-manager__results {
+	border-top: $border-width solid $gray-300;
+}
+
+// Remove the top border from results when adjacent to the disabled block count
+.editor-block-manager__disabled-blocks-count + .editor-block-manager__results {
+	border-top-width: 0;
+}

package/src/components/document-tools/index.js

@@ -104,8 +104,16 @@ function DocumentTools( {
 	const shortLabel = ! isInserterOpened ? __( 'Add' ) : __( 'Close' );
 
 	return (
+		// Some plugins expect and use the `edit-post-header-toolbar` CSS class to
+		// find the toolbar and inject UI elements into it. This is not officially
+		// supported, but we're keeping it in the list of class names for backwards
+		// compatibility.
 		<NavigableToolbar
-			className={ classnames( 'editor-document-tools', className ) }
+			className={ classnames(
+				'editor-document-tools',
+				'edit-post-header-toolbar',
+				className
+			) }
 			aria-label={ toolbarAriaLabel }
 			shouldUseKeyboardFocusShortcut={ ! blockToolbarCanBeFocused }
 			variant="unstyled"

package/src/components/editor-canvas/index.js

@@ -12,7 +12,7 @@ import {
 	__unstableUseTypewriter as useTypewriter,
 	__unstableUseTypingObserver as useTypingObserver,
 	useSettings,
-	__experimentalRecursionProvider as RecursionProvider,
+	RecursionProvider,
 	privateApis as blockEditorPrivateApis,
 	__experimentalUseResizeCanvas as useResizeCanvas,
 } from '@wordpress/block-editor';
@@ -364,7 +364,8 @@ function EditorCanvas( {
 						'is-' + deviceType.toLowerCase() + '-preview',
 						renderingMode !== 'post-only'
 							? 'wp-site-blocks'
-							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+							: `${ blockListLayoutClass } wp-block-post-content`, // Ensure root level blocks receive default/flow blockGap styling rules.
+						renderingMode !== 'all' && 'is-' + renderingMode
 					) }
 					layout={ blockListLayout }
 					dropZoneElement={