@wordpress/editor 12.9.0 → 12.10.0

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

@@ -39,9 +39,8 @@ const PUBLISH_ON_SAVE_ENTITIES = [
 export default function EntitiesSavedStates( { close } ) {
 	const saveButtonRef = useRef();
 	const { dirtyEntityRecords } = useSelect( ( select ) => {
-		const dirtyRecords = select(
-			coreStore
-		).__experimentalGetDirtyEntityRecords();
+		const dirtyRecords =
+			select( coreStore ).__experimentalGetDirtyEntityRecords();
 
 		// Remove site object and decouple into its edited pieces.
 		const dirtyRecordsWithoutSite = dirtyRecords.filter(
@@ -77,13 +76,11 @@ export default function EntitiesSavedStates( { close } ) {
 		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
 	} = useDispatch( coreStore );
 
-	const { __unstableMarkLastChangeAsPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkLastChangeAsPersistent } =
+		useDispatch( blockEditorStore );
 
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	// To group entities by type.
 	const partitionedSavables = groupBy( dirtyEntityRecords, 'name' );

package/src/components/global-keyboard-shortcuts/save-shortcut.js

@@ -12,9 +12,8 @@ import { store as editorStore } from '../../store';
 
 function SaveShortcut( { resetBlocksOnSave } ) {
 	const { resetEditorBlocks, savePost } = useDispatch( editorStore );
-	const { isEditedPostDirty, getPostEdits, isPostSavingLocked } = useSelect(
-		editorStore
-	);
+	const { isEditedPostDirty, getPostEdits, isPostSavingLocked } =
+		useSelect( editorStore );
 
 	useShortcut( 'core/editor/save', ( event ) => {
 		event.preventDefault();

package/src/components/local-autosave-monitor/index.js

@@ -54,8 +54,8 @@ function useAutosaveNotice() {
 		( select ) => ( {
 			postId: select( editorStore ).getCurrentPostId(),
 			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			hasRemoteAutosave: !! select( editorStore ).getEditorSettings()
-				.autosave,
+			hasRemoteAutosave:
+				!! select( editorStore ).getEditorSettings().autosave,
 		} ),
 		[]
 	);
@@ -124,22 +124,17 @@ function useAutosaveNotice() {
  * Custom hook which ejects a local autosave after a successful save occurs.
  */
 function useAutosavePurge() {
-	const {
-		postId,
-		isEditedPostNew,
-		isDirty,
-		isAutosaving,
-		didError,
-	} = useSelect(
-		( select ) => ( {
-			postId: select( editorStore ).getCurrentPostId(),
-			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			isDirty: select( editorStore ).isEditedPostDirty(),
-			isAutosaving: select( editorStore ).isAutosavingPost(),
-			didError: select( editorStore ).didPostSaveRequestFail(),
-		} ),
-		[]
-	);
+	const { postId, isEditedPostNew, isDirty, isAutosaving, didError } =
+		useSelect(
+			( select ) => ( {
+				postId: select( editorStore ).getCurrentPostId(),
+				isEditedPostNew: select( editorStore ).isEditedPostNew(),
+				isDirty: select( editorStore ).isEditedPostDirty(),
+				isAutosaving: select( editorStore ).isAutosavingPost(),
+				didError: select( editorStore ).didPostSaveRequestFail(),
+			} ),
+			[]
+		);
 
 	const lastIsDirty = useRef( isDirty );
 	const lastIsAutosaving = useRef( isAutosaving );
@@ -177,8 +172,8 @@ function LocalAutosaveMonitor() {
 
 	const { localAutosaveInterval } = useSelect(
 		( select ) => ( {
-			localAutosaveInterval: select( editorStore ).getEditorSettings()
-				.localAutosaveInterval,
+			localAutosaveInterval:
+				select( editorStore ).getEditorSettings().localAutosaveInterval,
 		} ),
 		[]
 	);

package/src/components/page-attributes/parent.js

@@ -52,12 +52,10 @@ export function PageAttributesParent() {
 	const [ fieldValue, setFieldValue ] = useState( false );
 	const { parentPost, parentPostId, items, postType } = useSelect(
 		( select ) => {
-			const { getPostType, getEntityRecords, getEntityRecord } = select(
-				coreStore
-			);
-			const { getCurrentPostId, getEditedPostAttribute } = select(
-				editorStore
-			);
+			const { getPostType, getEntityRecords, getEntityRecord } =
+				select( coreStore );
+			const { getCurrentPostId, getEditedPostAttribute } =
+				select( editorStore );
 			const postTypeSlug = getEditedPostAttribute( 'type' );
 			const pageId = getEditedPostAttribute( 'parent' );
 			const pType = getPostType( postTypeSlug );

package/src/components/post-author/select.js

@@ -18,9 +18,8 @@ function PostAuthorSelect() {
 	const { editPost } = useDispatch( editorStore );
 	const { postAuthor, authors } = useSelect( ( select ) => {
 		return {
-			postAuthor: select( editorStore ).getEditedPostAttribute(
-				'author'
-			),
+			postAuthor:
+				select( editorStore ).getEditedPostAttribute( 'author' ),
 			authors: select( coreStore ).getUsers( AUTHORS_QUERY ),
 		};
 	}, [] );

package/src/components/post-comments/index.js

@@ -29,9 +29,10 @@ function PostComments( { commentStatus = 'open', ...props } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			commentStatus: select( editorStore ).getEditedPostAttribute(
-				'comment_status'
-			),
+			commentStatus:
+				select( editorStore ).getEditedPostAttribute(
+					'comment_status'
+				),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {

package/src/components/post-format/index.js

@@ -49,9 +49,8 @@ export default function PostFormat() {
 
 	const { postFormat, suggestedFormat, supportedFormats } = useSelect(
 		( select ) => {
-			const { getEditedPostAttribute, getSuggestedPostFormat } = select(
-				editorStore
-			);
+			const { getEditedPostAttribute, getSuggestedPostFormat } =
+				select( editorStore );
 			const _postFormat = getEditedPostAttribute( 'format' );
 			const themeSupports = select( coreStore ).getThemeSupports();
 			return {

package/src/components/post-last-revision/check.js

@@ -26,10 +26,8 @@ export function PostLastRevisionCheck( {
 }
 
 export default withSelect( ( select ) => {
-	const {
-		getCurrentPostLastRevisionId,
-		getCurrentPostRevisionsCount,
-	} = select( editorStore );
+	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+		select( editorStore );
 	return {
 		lastRevisionId: getCurrentPostLastRevisionId(),
 		revisionsCount: getCurrentPostRevisionsCount(),

package/src/components/post-last-revision/index.js

@@ -35,10 +35,8 @@ function LastRevision( { lastRevisionId, revisionsCount } ) {
 }
 
 export default withSelect( ( select ) => {
-	const {
-		getCurrentPostLastRevisionId,
-		getCurrentPostRevisionsCount,
-	} = select( editorStore );
+	const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
+		select( editorStore );
 	return {
 		lastRevisionId: getCurrentPostLastRevisionId(),
 		revisionsCount: getCurrentPostRevisionsCount(),

package/src/components/post-pending-status/check.js

@@ -28,11 +28,8 @@ export function PostPendingStatusCheck( {
 
 export default compose(
 	withSelect( ( select ) => {
-		const {
-			isCurrentPostPublished,
-			getCurrentPostType,
-			getCurrentPost,
-		} = select( editorStore );
+		const { isCurrentPostPublished, getCurrentPostType, getCurrentPost } =
+			select( editorStore );
 		return {
 			hasPublishAction: get(
 				getCurrentPost(),

package/src/components/post-pingbacks/index.js

@@ -29,9 +29,8 @@ function PostPingbacks( { pingStatus = 'open', ...props } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			pingStatus: select( editorStore ).getEditedPostAttribute(
-				'ping_status'
-			),
+			pingStatus:
+				select( editorStore ).getEditedPostAttribute( 'ping_status' ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => ( {

package/src/components/post-publish-button/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, get, some } from 'lodash';
+import { get, some } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -19,15 +19,16 @@ import { __ } from '@wordpress/i18n';
 import PublishButtonLabel from './label';
 import { store as editorStore } from '../../store';
 
+const noop = () => {};
+
 export class PostPublishButton extends Component {
 	constructor( props ) {
 		super( props );
 		this.buttonNode = createRef();
 
 		this.createOnClick = this.createOnClick.bind( this );
-		this.closeEntitiesSavedStates = this.closeEntitiesSavedStates.bind(
-			this
-		);
+		this.closeEntitiesSavedStates =
+			this.closeEntitiesSavedStates.bind( this );
 
 		this.state = {
 			entitiesSavedStatesCallback: false,
@@ -41,10 +42,8 @@ export class PostPublishButton extends Component {
 
 	createOnClick( callback ) {
 		return ( ...args ) => {
-			const {
-				hasNonPostEntityChanges,
-				setEntitiesSavedStatesCallback,
-			} = this.props;
+			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
+				this.props;
 			// If a post with non-post entities is published, but the user
 			// elects to not save changes to the non-post entities, those
 			// entities will still be dirty when the Publish button is clicked.

package/src/components/post-publish-panel/index.js

@@ -167,9 +167,8 @@ export default compose( [
 		};
 	} ),
 	withDispatch( ( dispatch, { isPublishSidebarEnabled } ) => {
-		const { disablePublishSidebar, enablePublishSidebar } = dispatch(
-			editorStore
-		);
+		const { disablePublishSidebar, enablePublishSidebar } =
+			dispatch( editorStore );
 		return {
 			onTogglePublishSidebar: () => {
 				if ( isPublishSidebarEnabled ) {

package/src/components/post-publish-panel/maybe-category-panel.js

@@ -21,9 +21,8 @@ import { store as editorStore } from '../../store';
 function MaybeCategoryPanel() {
 	const hasNoCategory = useSelect( ( select ) => {
 		const postType = select( editorStore ).getCurrentPostType();
-		const categoriesTaxonomy = select( coreStore ).getTaxonomy(
-			'category'
-		);
+		const categoriesTaxonomy =
+			select( coreStore ).getTaxonomy( 'category' );
 		const defaultCategorySlug = 'uncategorized';
 		const defaultCategory = select( coreStore ).getEntityRecords(
 			'taxonomy',

package/src/components/post-publish-panel/maybe-post-format-panel.js

@@ -39,9 +39,8 @@ const PostFormatSuggestion = ( {
 
 export default function PostFormatPanel() {
 	const { currentPostFormat, suggestion } = useSelect( ( select ) => {
-		const { getEditedPostAttribute, getSuggestedPostFormat } = select(
-			editorStore
-		);
+		const { getEditedPostAttribute, getSuggestedPostFormat } =
+			select( editorStore );
 		const supportedFormats = get(
 			select( coreStore ).getThemeSupports(),
 			[ 'formats' ],

package/src/components/post-publish-panel/postpublish.js

@@ -163,11 +163,8 @@ class PostPublishPanelPostpublish extends Component {
 }
 
 export default withSelect( ( select ) => {
-	const {
-		getEditedPostAttribute,
-		getCurrentPost,
-		isCurrentPostScheduled,
-	} = select( editorStore );
+	const { getEditedPostAttribute, getCurrentPost, isCurrentPostScheduled } =
+		select( editorStore );
 	const { getPostType } = select( coreStore );
 
 	return {

package/src/components/post-publish-panel/prepublish.js

@@ -35,9 +35,8 @@ function PostPublishPanelPrepublish( { children } ) {
 		siteTitle,
 		siteHome,
 	} = useSelect( ( select ) => {
-		const { getCurrentPost, isEditedPostBeingScheduled } = select(
-			editorStore
-		);
+		const { getCurrentPost, isEditedPostBeingScheduled } =
+			select( editorStore );
 		const { getEntityRecord, isResolving } = select( coreStore );
 		const siteData =
 			getEntityRecord( 'root', '__unstableBase', undefined ) || {};

package/src/components/post-slug/index.js

@@ -68,9 +68,8 @@ export class PostSlug extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getCurrentPost, getEditedPostAttribute } = select(
-			editorStore
-		);
+		const { getCurrentPost, getEditedPostAttribute } =
+			select( editorStore );
 
 		const { id } = getCurrentPost();
 		return {

package/src/components/post-sticky/index.js

@@ -27,9 +27,8 @@ export function PostSticky( { onUpdateSticky, postSticky = false } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			postSticky: select( editorStore ).getEditedPostAttribute(
-				'sticky'
-			),
+			postSticky:
+				select( editorStore ).getEditedPostAttribute( 'sticky' ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

package/src/components/post-switch-to-draft-button/index.js

@@ -65,11 +65,8 @@ function PostSwitchToDraftButton( {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const {
-			isSavingPost,
-			isCurrentPostPublished,
-			isCurrentPostScheduled,
-		} = select( editorStore );
+		const { isSavingPost, isCurrentPostPublished, isCurrentPostScheduled } =
+			select( editorStore );
 		return {
 			isSaving: isSavingPost(),
 			isPublished: isCurrentPostPublished(),

package/src/components/post-taxonomies/flat-term-selector.js

@@ -100,14 +100,10 @@ function FlatTermSelector( { slug } ) {
 		hasResolvedTerms,
 	} = useSelect(
 		( select ) => {
-			const { getCurrentPost, getEditedPostAttribute } = select(
-				editorStore
-			);
-			const {
-				getEntityRecords,
-				getTaxonomy,
-				hasFinishedResolution,
-			} = select( coreStore );
+			const { getCurrentPost, getEditedPostAttribute } =
+				select( editorStore );
+			const { getEntityRecords, getTaxonomy, hasFinishedResolution } =
+				select( coreStore );
 			const post = getCurrentPost();
 			const _taxonomy = getTaxonomy( slug );
 			const _termIds = _taxonomy

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -173,12 +173,10 @@ function HierarchicalTermSelector( { slug } ) {
 		taxonomy,
 	} = useSelect(
 		( select ) => {
-			const { getCurrentPost, getEditedPostAttribute } = select(
-				editorStore
-			);
-			const { getTaxonomy, getEntityRecords, isResolving } = select(
-				coreStore
-			);
+			const { getCurrentPost, getEditedPostAttribute } =
+				select( editorStore );
+			const { getTaxonomy, getEntityRecords, isResolving } =
+				select( coreStore );
 			const _taxonomy = getTaxonomy( slug );
 
 			return {

package/src/components/post-title/index.js

@@ -37,37 +37,27 @@ function PostTitle( _, forwardedRef ) {
 	const ref = useRef();
 	const [ isSelected, setIsSelected ] = useState( false );
 	const { editPost } = useDispatch( editorStore );
-	const {
-		insertDefaultBlock,
-		clearSelectedBlock,
-		insertBlocks,
-	} = useDispatch( blockEditorStore );
-	const {
-		isCleanNewPost,
-		title,
-		placeholder,
-		isFocusMode,
-		hasFixedToolbar,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			isCleanNewPost: _isCleanNewPost,
-		} = select( editorStore );
-		const { getSettings } = select( blockEditorStore );
-		const {
-			titlePlaceholder,
-			focusMode,
-			hasFixedToolbar: _hasFixedToolbar,
-		} = getSettings();
-
-		return {
-			isCleanNewPost: _isCleanNewPost(),
-			title: getEditedPostAttribute( 'title' ),
-			placeholder: titlePlaceholder,
-			isFocusMode: focusMode,
-			hasFixedToolbar: _hasFixedToolbar,
-		};
-	}, [] );
+	const { insertDefaultBlock, clearSelectedBlock, insertBlocks } =
+		useDispatch( blockEditorStore );
+	const { isCleanNewPost, title, placeholder, isFocusMode, hasFixedToolbar } =
+		useSelect( ( select ) => {
+			const { getEditedPostAttribute, isCleanNewPost: _isCleanNewPost } =
+				select( editorStore );
+			const { getSettings } = select( blockEditorStore );
+			const {
+				titlePlaceholder,
+				focusMode,
+				hasFixedToolbar: _hasFixedToolbar,
+			} = getSettings();
+
+			return {
+				isCleanNewPost: _isCleanNewPost(),
+				title: getEditedPostAttribute( 'title' ),
+				placeholder: titlePlaceholder,
+				isFocusMode: focusMode,
+				hasFixedToolbar: _hasFixedToolbar,
+			};
+		}, [] );
 
 	useImperativeHandle( forwardedRef, () => ( {
 		focus: () => {

package/src/components/post-title/index.native.js

@@ -169,19 +169,15 @@ class PostTitle extends Component {
 
 export default compose(
 	withSelect( ( select ) => {
-		const { isPostTitleSelected, getEditedPostAttribute } = select(
-			editorStore
-		);
-		const {
-			getSelectedBlockClientId,
-			getBlockRootClientId,
-			getSettings,
-		} = select( blockEditorStore );
+		const { isPostTitleSelected, getEditedPostAttribute } =
+			select( editorStore );
+		const { getSelectedBlockClientId, getBlockRootClientId, getSettings } =
+			select( blockEditorStore );
 
 		const selectedId = getSelectedBlockClientId();
 		const selectionIsNested = !! getBlockRootClientId( selectedId );
-		const globalStyles = getSettings()?.__experimentalGlobalStylesBaseStyles
-			?.color;
+		const globalStyles =
+			getSettings()?.__experimentalGlobalStylesBaseStyles?.color;
 
 		return {
 			postType: getEditedPostAttribute( 'type' ),
@@ -192,13 +188,11 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
-		const { undo, redo, togglePostTitleSelection } = dispatch(
-			editorStore
-		);
+		const { undo, redo, togglePostTitleSelection } =
+			dispatch( editorStore );
 
-		const { clearSelectedBlock, insertDefaultBlock } = dispatch(
-			blockEditorStore
-		);
+		const { clearSelectedBlock, insertDefaultBlock } =
+			dispatch( blockEditorStore );
 
 		return {
 			onEnterPress() {

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

@@ -18,9 +18,8 @@ function PostTrashCheck( { isNew, postId, canUserDelete, children } ) {
 }
 
 export default withSelect( ( select ) => {
-	const { isEditedPostNew, getCurrentPostId, getCurrentPostType } = select(
-		editorStore
-	);
+	const { isEditedPostNew, getCurrentPostId, getCurrentPostType } =
+		select( editorStore );
 	const { getPostType, canUser } = select( coreStore );
 	const postId = getCurrentPostId();
 	const postType = getPostType( getCurrentPostType() );

package/src/components/post-visibility/index.js

@@ -6,11 +6,10 @@ import { useState } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__experimentalConfirmDialog as ConfirmDialog,
-	Button,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { close as closeIcon } from '@wordpress/icons';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -30,9 +29,8 @@ export default function PostVisibility( { onClose } ) {
 	const { editPost, savePost } = useDispatch( editorStore );
 
 	const [ hasPassword, setHasPassword ] = useState( !! password );
-	const [ showPrivateConfirmDialog, setShowPrivateConfirmDialog ] = useState(
-		false
-	);
+	const [ showPrivateConfirmDialog, setShowPrivateConfirmDialog ] =
+		useState( false );
 
 	const setPublic = () => {
 		editPost( {
@@ -71,19 +69,15 @@ export default function PostVisibility( { onClose } ) {
 
 	return (
 		<>
-			<Button
-				className="editor-post-visibility__close"
-				isSmall
-				icon={ closeIcon }
-				onClick={ onClose }
+			<InspectorPopoverHeader
+				title={ __( 'Visibility' ) }
+				help={ __( 'Control how this post is viewed.' ) }
+				onClose={ onClose }
 			/>
 			<fieldset className="editor-post-visibility__fieldset">
-				<legend className="editor-post-visibility__legend">
+				<VisuallyHidden as="legend">
 					{ __( 'Visibility' ) }
-				</legend>
-				<p className="editor-post-visibility__description">
-					{ __( 'Control how this post is viewed.' ) }
-				</p>
+				</VisuallyHidden>
 				<PostVisibilityChoice
 					instanceId={ instanceId }
 					value="public"

package/src/components/post-visibility/style.scss

@@ -1,21 +1,4 @@
-.editor-post-visibility__close {
-	position: absolute;
-	right: $grid-unit-20;
-	top: $grid-unit-20;
-}
-
 .editor-post-visibility__fieldset {
-	padding: $grid-unit-10;
-
-	.editor-post-visibility__legend {
-		font-weight: 600;
-		padding: 1em 0 0 0;
-	}
-
-	.editor-post-visibility__description {
-		margin-top: 0.5em;
-	}
-
 	.editor-post-visibility__radio[type="radio"] {
 		@include radio-control;
 		margin-top: 2px;

package/src/components/provider/index.js

@@ -34,9 +34,8 @@ function EditorProvider( {
 		return { postId: post.id, postType: post.type };
 	}, [ post.id, post.type ] );
 	const { selection, isReady } = useSelect( ( select ) => {
-		const { getEditorSelection, __unstableIsEditorReady } = select(
-			editorStore
-		);
+		const { getEditorSelection, __unstableIsEditorReady } =
+			select( editorStore );
 		return {
 			isReady: __unstableIsEditorReady(),
 			selection: getEditorSelection(),

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

@@ -130,9 +130,8 @@ class NativeEditorProvider extends Component {
 				const blockName = 'core/' + payload.mediaType;
 				const newBlock = createBlock( blockName, {
 					id: payload.mediaId,
-					[ payload.mediaType === 'image'
-						? 'url'
-						: 'src' ]: payload.mediaUrl,
+					[ payload.mediaType === 'image' ? 'url' : 'src' ]:
+						payload.mediaUrl,
 				} );
 
 				const indexAfterSelected = this.props.selectedBlockIndex + 1;
@@ -143,14 +142,16 @@ class NativeEditorProvider extends Component {
 			}
 		);
 
-		this.subscriptionParentUpdateEditorSettings = subscribeUpdateEditorSettings(
-			( { galleryWithImageBlocks, ...editorSettings } ) => {
-				if ( typeof galleryWithImageBlocks === 'boolean' ) {
-					window.wp.galleryBlockV2Enabled = galleryWithImageBlocks;
+		this.subscriptionParentUpdateEditorSettings =
+			subscribeUpdateEditorSettings(
+				( { galleryWithImageBlocks, ...editorSettings } ) => {
+					if ( typeof galleryWithImageBlocks === 'boolean' ) {
+						window.wp.galleryBlockV2Enabled =
+							galleryWithImageBlocks;
+					}
+					updateSettings( this.getThemeColors( editorSettings ) );
 				}
-				updateSettings( this.getThemeColors( editorSettings ) );
-			}
-		);
+			);
 
 		this.subscriptionParentUpdateCapabilities = subscribeUpdateCapabilities(
 			( payload ) => {