@wordpress/editor 13.26.0 → 13.27.0

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={

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

@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import { NoticeList } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -11,7 +10,14 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import TemplateValidationNotice from '../template-validation-notice';
 
-export function EditorNotices( { notices, onRemove } ) {
+export function EditorNotices() {
+	const { notices } = useSelect(
+		( select ) => ( {
+			notices: select( noticesStore ).getNotices(),
+		} ),
+		[]
+	);
+	const { removeNotice } = useDispatch( noticesStore );
 	const dismissibleNotices = notices.filter(
 		( { isDismissible, type } ) => isDismissible && type === 'default'
 	);
@@ -28,7 +34,7 @@ export function EditorNotices( { notices, onRemove } ) {
 			<NoticeList
 				notices={ dismissibleNotices }
 				className="components-editor-notices__dismissible"
-				onRemove={ onRemove }
+				onRemove={ removeNotice }
 			>
 				<TemplateValidationNotice />
 			</NoticeList>
@@ -36,11 +42,4 @@ export function EditorNotices( { notices, onRemove } ) {
 	);
 }
 
-export default compose( [
-	withSelect( ( select ) => ( {
-		notices: select( noticesStore ).getNotices(),
-	} ) ),
-	withDispatch( ( dispatch ) => ( {
-		onRemove: dispatch( noticesStore ).removeNotice,
-	} ) ),
-] )( EditorNotices );
+export default EditorNotices;

package/src/components/editor-notices/style.scss

@@ -9,7 +9,6 @@
 
 	.components-notice {
 		box-sizing: border-box;
-		margin: 0;
 		border-bottom: $border-width solid rgba(0, 0, 0, 0.2);
 		padding: 0 $grid-unit-15;
 

package/src/components/entities-saved-states/entity-type-list.js

@@ -5,11 +5,18 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { PanelBody, PanelRow } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import EntityRecordItem from './entity-record-item';
+import { unlock } from '../../lock-unlock';
+
+const { getGlobalStylesChanges, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 
 function getEntityDescription( entity, count ) {
 	switch ( entity ) {
@@ -27,6 +34,44 @@ function getEntityDescription( entity, count ) {
 	}
 }
 
+function GlobalStylesDescription( { record } ) {
+	const { user: currentEditorGlobalStyles } =
+		useContext( GlobalStylesContext );
+	const savedRecord = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord(
+				record.kind,
+				record.name,
+				record.key
+			),
+		[ record.kind, record.name, record.key ]
+	);
+
+	const globalStylesChanges = getGlobalStylesChanges(
+		currentEditorGlobalStyles,
+		savedRecord,
+		{
+			maxResults: 10,
+		}
+	);
+	return globalStylesChanges.length ? (
+		<>
+			<h3 className="entities-saved-states__description-heading">
+				{ __( 'Changes made to:' ) }
+			</h3>
+			<PanelRow>{ globalStylesChanges.join( ', ' ) }</PanelRow>
+		</>
+	) : null;
+}
+
+function EntityDescription( { record, count } ) {
+	if ( 'globalStyles' === record?.name ) {
+		return <GlobalStylesDescription record={ record } />;
+	}
+	const description = getEntityDescription( record?.name, count );
+	return description ? <PanelRow>{ description }</PanelRow> : null;
+}
+
 export default function EntityTypeList( {
 	list,
 	unselectedEntities,
@@ -42,19 +87,16 @@ export default function EntityTypeList( {
 			),
 		[ firstRecord.kind, firstRecord.name ]
 	);
-	const { name } = firstRecord;
 
 	let entityLabel = entityConfig.label;
-	if ( name === 'wp_template_part' ) {
+	if ( firstRecord?.name === 'wp_template_part' ) {
 		entityLabel =
 			1 === count ? __( 'Template Part' ) : __( 'Template Parts' );
 	}
-	// Set description based on type of entity.
-	const description = getEntityDescription( name, count );
 
 	return (
 		<PanelBody title={ entityLabel } initialOpen={ true }>
-			{ description && <PanelRow>{ description }</PanelRow> }
+			<EntityDescription record={ firstRecord } count={ count } />
 			{ list.map( ( record ) => {
 				return (
 					<EntityRecordItem

package/src/components/entities-saved-states/index.js

@@ -213,13 +213,13 @@ export function EntitiesSavedStatesExtensible( {
 					{ __( 'Are you ready to save?' ) }
 				</strong>
 				{ additionalPrompt }
-				{ isDirty && (
-					<p>
-						{ __(
-							'The following changes have been made to your site, templates, and content.'
-						) }
-					</p>
-				) }
+				<p>
+					{ isDirty
+						? __(
+								'The following changes have been made to your site, templates, and content.'
+						  )
+						: __( 'Select the items you want to save.' ) }
+				</p>
 			</div>
 
 			{ sortedPartitionedSavables.map( ( list ) => {

package/src/components/entities-saved-states/style.scss

@@ -15,3 +15,7 @@
 		margin-bottom: $grid-unit-15;
 	}
 }
+
+.entities-saved-states__description-heading {
+	font-size: $default-font-size;
+}

package/src/components/offline-status/index.native.js

@@ -90,10 +90,8 @@ const OfflineStatus = () => {
 			) }
 			style={ containerStyle }
 		>
-			<View style={ containerStyle }>
-				<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
-				<Text style={ textStyle }>{ __( 'Working Offline' ) }</Text>
-			</View>
+			<Icon fill={ iconStyle.fill } icon={ offlineIcon } />
+			<Text style={ textStyle }>{ __( 'Working Offline' ) } </Text>
 		</View>
 	) : null;
 };

package/src/components/post-locked-modal/index.js

@@ -172,7 +172,7 @@ export default function PostLockedModal() {
 			shouldCloseOnClickOutside={ false }
 			shouldCloseOnEsc={ false }
 			isDismissible={ false }
-			className="editor-post-locked-modal"
+			size="medium"
 		>
 			<HStack alignment="top" spacing={ 6 }>
 				{ !! userAvatar && (

package/src/components/post-locked-modal/style.scss

@@ -1,9 +1,3 @@
-.editor-post-locked-modal {
-	@include break-small() {
-		max-width: $break-mobile;
-	}
-}
-
 .editor-post-locked-modal__buttons {
 	margin-top: $grid-unit-30;
 }

package/src/components/post-saved-state/index.js

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import {
 	__unstableGetAnimateClassName as getAnimateClassName,
 	Button,
-	Tooltip,
 } from '@wordpress/components';
 import { usePrevious, useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -129,54 +128,38 @@ export default function PostSavedState( { forceIsDirty } ) {
 		text = shortLabel;
 	}
 
-	const buttonAccessibleLabel = text || label;
-
-	/**
-	 * The tooltip needs to be enabled only if the button is not disabled. When
-	 * relying on the internal Button tooltip functionality, this causes the
-	 * resulting `button` element to be always removed and re-added to the DOM,
-	 * causing focus loss. An alternative approach to circumvent the issue
-	 * is not to use the `label` and `shortcut` props on `Button` (which would
-	 * trigger the tooltip), and instead manually wrap the `Button` in a separate
-	 * `Tooltip` component.
-	 */
-	const tooltipProps = isDisabled
-		? undefined
-		: {
-				text: buttonAccessibleLabel,
-				shortcut: displayShortcut.primary( 's' ),
-		  };
-
 	// Use common Button instance for all saved states so that focus is not
 	// lost.
 	return (
-		<Tooltip { ...tooltipProps }>
-			<Button
-				className={
-					isSaveable || isSaving
-						? classnames( {
-								'editor-post-save-draft': ! isSavedState,
-								'editor-post-saved-state': isSavedState,
-								'is-saving': isSaving,
-								'is-autosaving': isAutosaving,
-								'is-saved': isSaved,
-								[ getAnimateClassName( {
-									type: 'loading',
-								} ) ]: isSaving,
-						  } )
-						: undefined
-				}
-				onClick={ isDisabled ? undefined : () => savePost() }
-				variant="tertiary"
-				size="compact"
-				icon={ isLargeViewport ? undefined : cloudUpload }
-				// Make sure the aria-label has always a value, as the default `text` is undefined on small screens.
-				aria-label={ buttonAccessibleLabel }
-				aria-disabled={ isDisabled }
-			>
-				{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }
-				{ text }
-			</Button>
-		</Tooltip>
+		<Button
+			className={
+				isSaveable || isSaving
+					? classnames( {
+							'editor-post-save-draft': ! isSavedState,
+							'editor-post-saved-state': isSavedState,
+							'is-saving': isSaving,
+							'is-autosaving': isAutosaving,
+							'is-saved': isSaved,
+							[ getAnimateClassName( {
+								type: 'loading',
+							} ) ]: isSaving,
+					  } )
+					: undefined
+			}
+			onClick={ isDisabled ? undefined : () => savePost() }
+			/*
+			 * We want the tooltip to show the keyboard shortcut only when the
+			 * button does something, i.e. when it's not disabled.
+			 */
+			shortcut={ isDisabled ? undefined : displayShortcut.primary( 's' ) }
+			variant="tertiary"
+			size="compact"
+			icon={ isLargeViewport ? undefined : cloudUpload }
+			label={ text || label }
+			aria-disabled={ isDisabled }
+		>
+			{ isSavedState && <Icon icon={ isSaved ? check : cloud } /> }
+			{ text }
+		</Button>
 	);
 }

package/src/components/post-schedule/check.js

@@ -1,29 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 
-export function PostScheduleCheck( { hasPublishAction, children } ) {
+export default function PostScheduleCheck( { children } ) {
+	const hasPublishAction = useSelect( ( select ) => {
+		return (
+			select( editorStore ).getCurrentPost()._links?.[
+				'wp:action-publish'
+			] ?? false
+		);
+	}, [] );
+
 	if ( ! hasPublishAction ) {
 		return null;
 	}
 
 	return children;
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		const { getCurrentPost, getCurrentPostType } = select( editorStore );
-		return {
-			hasPublishAction:
-				getCurrentPost()._links?.[ 'wp:action-publish' ] ?? false,
-			postType: getCurrentPostType(),
-		};
-	} ),
-] )( PostScheduleCheck );

package/src/components/post-schedule/test/check.js

@@ -3,25 +3,40 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { PostScheduleCheck } from '../check';
+import PostScheduleCheck from '../check';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupMockSelect( hasPublishAction ) {
+	useSelect.mockImplementation( ( mapSelect ) => {
+		return mapSelect( () => ( {
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-publish': hasPublishAction,
+				},
+			} ),
+		} ) );
+	} );
+}
 
 describe( 'PostScheduleCheck', () => {
 	it( "should not render anything if the user doesn't have the right capabilities", () => {
-		render(
-			<PostScheduleCheck hasPublishAction={ false }>
-				yes
-			</PostScheduleCheck>
-		);
+		setupMockSelect( false );
+		render( <PostScheduleCheck>yes</PostScheduleCheck> );
 		expect( screen.queryByText( 'yes' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if the user has the correct capability', () => {
-		render(
-			<PostScheduleCheck hasPublishAction={ true }>yes</PostScheduleCheck>
-		);
+		setupMockSelect( true );
+		render( <PostScheduleCheck>yes</PostScheduleCheck> );
 		expect( screen.getByText( 'yes' ) ).toBeVisible();
 	} );
 } );