@wordpress/editor 14.19.1 → 14.20.0

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

@@ -34,28 +34,45 @@ const TagsPanel = () => {
 };
 
 const MaybeTagsPanel = () => {
-	const { hasTags, isPostTypeSupported } = useSelect( ( select ) => {
-		const postType = select( editorStore ).getCurrentPostType();
-		const tagsTaxonomy = select( coreStore ).getEntityRecord(
-			'root',
-			'taxonomy',
-			'post_tag'
-		);
-		const _isPostTypeSupported = tagsTaxonomy?.types?.includes( postType );
-		const areTagsFetched = tagsTaxonomy !== undefined;
-		const tags =
-			tagsTaxonomy &&
-			select( editorStore ).getEditedPostAttribute(
-				tagsTaxonomy.rest_base
+	const { postHasTags, siteHasTags, isPostTypeSupported } = useSelect(
+		( select ) => {
+			const postType = select( editorStore ).getCurrentPostType();
+			const tagsTaxonomy = select( coreStore ).getEntityRecord(
+				'root',
+				'taxonomy',
+				'post_tag'
 			);
-		return {
-			hasTags: !! tags?.length,
-			isPostTypeSupported: areTagsFetched && _isPostTypeSupported,
-		};
-	}, [] );
-	const [ hadTagsWhenOpeningThePanel ] = useState( hasTags );
+			const _isPostTypeSupported =
+				tagsTaxonomy?.types?.includes( postType );
+			const areTagsFetched = tagsTaxonomy !== undefined;
+			const tags =
+				tagsTaxonomy &&
+				select( editorStore ).getEditedPostAttribute(
+					tagsTaxonomy.rest_base
+				);
+			const siteTags = _isPostTypeSupported
+				? !! select( coreStore ).getEntityRecords(
+						'taxonomy',
+						'post_tag',
+						{ per_page: 1 }
+				  )?.length
+				: false;
 
-	if ( ! isPostTypeSupported ) {
+			return {
+				postHasTags: !! tags?.length,
+				siteHasTags: siteTags,
+				isPostTypeSupported: areTagsFetched && _isPostTypeSupported,
+			};
+		},
+		[]
+	);
+	const [ hadTagsWhenOpeningThePanel ] = useState( postHasTags );
+
+	/**
+	 * We only want to show the tag panel if the post type supports
+	 * tags and the site has tags.
+	 */
+	if ( ! isPostTypeSupported || ! siteHasTags ) {
 		return null;
 	}
 
@@ -63,9 +80,9 @@ const MaybeTagsPanel = () => {
 	 * We only want to show the tag panel if the post didn't have
 	 * any tags when the user hit the Publish button.
 	 *
-	 * We can't use the prop.hasTags because it'll change to true
+	 * We can't use the prop.postHasTags because it'll change to true
 	 * if the user adds a new tag within the pre-publish panel.
-	 * This would force a re-render and a new prop.hasTags check,
+	 * This would force a re-render and a new prop.postHasTags check,
 	 * hiding this panel and keeping the user from adding
 	 * more than one tag.
 	 */

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

@@ -230,7 +230,7 @@ export default function PostStatus() {
 													'Password protected'
 												) }
 												help={ __(
-													'Only visible to those who know the password'
+													'Only visible to those who know the password.'
 												) }
 												checked={ showPassword }
 												onChange={

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

@@ -29,7 +29,7 @@ export default function PostSticky() {
 			<CheckboxControl
 				className="editor-post-sticky__checkbox-control"
 				label={ __( 'Sticky' ) }
-				help={ __( 'Pin this post to the top of the blog' ) }
+				help={ __( 'Pin this post to the top of the blog.' ) }
 				checked={ postSticky }
 				onChange={ () => editPost( { sticky: ! postSticky } ) }
 				__nextHasNoMarginBottom

package/src/components/post-template/hooks.js

@@ -31,17 +31,21 @@ export function useAllowSwitchingTemplates() {
 			} )
 				? getEntityRecord( 'root', 'site' )
 				: undefined;
-			const templates = getEntityRecords( 'postType', 'wp_template', {
-				per_page: -1,
-			} );
+
 			const isPostsPage = +postId === siteSettings?.page_for_posts;
+			const isFrontPage =
+				postType === 'page' && +postId === siteSettings?.page_on_front;
 			// If current page is set front page or posts page, we also need
 			// to check if the current theme has a template for it. If not
-			const isFrontPage =
-				postType === 'page' &&
-				+postId === siteSettings?.page_on_front &&
-				templates?.some( ( { slug } ) => slug === 'front-page' );
-			return ! isPostsPage && ! isFrontPage;
+			const templates = isFrontPage
+				? getEntityRecords( 'postType', 'wp_template', {
+						per_page: -1,
+				  } )
+				: [];
+			const hasFrontPage =
+				isFrontPage &&
+				!! templates?.some( ( { slug } ) => slug === 'front-page' );
+			return ! isPostsPage && ! hasFrontPage;
 		},
 		[ postId, postType ]
 	);

package/src/components/post-template/swap-template-button.js

@@ -20,9 +20,7 @@ export default function SwapTemplateButton( { onClick } ) {
 	const { postType, postId } = useEditedPostContext();
 	const availableTemplates = useAvailableTemplates( postType );
 	const { editEntityRecord } = useDispatch( coreStore );
-	if ( ! availableTemplates?.length ) {
-		return null;
-	}
+
 	const onTemplateSelect = async ( template ) => {
 		editEntityRecord(
 			'postType',
@@ -36,7 +34,11 @@ export default function SwapTemplateButton( { onClick } ) {
 	};
 	return (
 		<>
-			<MenuItem onClick={ () => setShowModal( true ) }>
+			<MenuItem
+				disabled={ ! availableTemplates?.length }
+				accessibleWhenDisabled
+				onClick={ () => setShowModal( true ) }
+			>
 				{ __( 'Change template' ) }
 			</MenuItem>
 			{ showModal && (

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

@@ -4,8 +4,9 @@
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import {
-	VisuallyHidden,
-	__experimentalConfirmDialog as ConfirmDialog,
+	TextControl,
+	RadioControl,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -14,7 +15,7 @@ import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '
 /**
  * Internal dependencies
  */
-import { visibilityOptions } from './utils';
+import { VISIBILITY_OPTIONS } from './utils';
 import { store as editorStore } from '../../store';
 
 /**
@@ -33,45 +34,29 @@ export default function PostVisibility( { onClose } ) {
 		password: select( editorStore ).getEditedPostAttribute( 'password' ),
 	} ) );
 
-	const { editPost, savePost } = useDispatch( editorStore );
+	const { editPost } = useDispatch( editorStore );
 
 	const [ hasPassword, setHasPassword ] = useState( !! password );
-	const [ showPrivateConfirmDialog, setShowPrivateConfirmDialog ] =
-		useState( false );
 
-	const setPublic = () => {
-		editPost( {
-			status: visibility === 'private' ? 'draft' : status,
-			password: '',
-		} );
-		setHasPassword( false );
-	};
-
-	const setPrivate = () => {
-		setShowPrivateConfirmDialog( true );
-	};
-
-	const confirmPrivate = () => {
-		editPost( { status: 'private', password: '' } );
-		setHasPassword( false );
-		setShowPrivateConfirmDialog( false );
-		savePost();
-	};
-
-	const handleDialogCancel = () => {
-		setShowPrivateConfirmDialog( false );
-	};
+	function updateVisibility( value ) {
+		const nextValues = {
+			public: {
+				status: visibility === 'private' ? 'draft' : status,
+				password: '',
+			},
+			private: { status: 'private', password: '' },
+			password: {
+				status: visibility === 'private' ? 'draft' : status,
+				password: password || '',
+			},
+		};
 
-	const setPasswordProtected = () => {
-		editPost( {
-			status: visibility === 'private' ? 'draft' : status,
-			password: password || '',
-		} );
-		setHasPassword( true );
-	};
+		editPost( nextValues[ value ] );
+		setHasPassword( value === 'password' );
+	}
 
-	const updatePassword = ( event ) => {
-		editPost( { password: event.target.value } );
+	const updatePassword = ( value ) => {
+		editPost( { password: value } );
 	};
 
 	return (
@@ -81,90 +66,28 @@ export default function PostVisibility( { onClose } ) {
 				help={ __( 'Control how this post is viewed.' ) }
 				onClose={ onClose }
 			/>
-			<fieldset className="editor-post-visibility__fieldset">
-				<VisuallyHidden as="legend">
-					{ __( 'Visibility' ) }
-				</VisuallyHidden>
-				<PostVisibilityChoice
-					instanceId={ instanceId }
-					value="public"
-					label={ visibilityOptions.public.label }
-					info={ visibilityOptions.public.info }
-					checked={ visibility === 'public' && ! hasPassword }
-					onChange={ setPublic }
-				/>
-				<PostVisibilityChoice
-					instanceId={ instanceId }
-					value="private"
-					label={ visibilityOptions.private.label }
-					info={ visibilityOptions.private.info }
-					checked={ visibility === 'private' }
-					onChange={ setPrivate }
-				/>
-				<PostVisibilityChoice
-					instanceId={ instanceId }
-					value="password"
-					label={ visibilityOptions.password.label }
-					info={ visibilityOptions.password.info }
-					checked={ hasPassword }
-					onChange={ setPasswordProtected }
+			<VStack spacing={ 4 }>
+				<RadioControl
+					label={ __( 'Visibility' ) }
+					hideLabelFromVision
+					options={ VISIBILITY_OPTIONS }
+					selected={ hasPassword ? 'password' : visibility }
+					onChange={ updateVisibility }
 				/>
 				{ hasPassword && (
-					<div className="editor-post-visibility__password">
-						<VisuallyHidden
-							as="label"
-							htmlFor={ `editor-post-visibility__password-input-${ instanceId }` }
-						>
-							{ __( 'Create password' ) }
-						</VisuallyHidden>
-						<input
-							className="editor-post-visibility__password-input"
-							id={ `editor-post-visibility__password-input-${ instanceId }` }
-							type="text"
-							onChange={ updatePassword }
-							value={ password }
-							placeholder={ __( 'Use a secure password' ) }
-						/>
-					</div>
+					<TextControl
+						label={ __( 'Password' ) }
+						onChange={ updatePassword }
+						value={ password }
+						placeholder={ __( 'Use a secure password' ) }
+						type="text"
+						id={ `editor-post-visibility__password-input-${ instanceId }` }
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						maxLength={ 255 }
+					/>
 				) }
-			</fieldset>
-			<ConfirmDialog
-				isOpen={ showPrivateConfirmDialog }
-				onConfirm={ confirmPrivate }
-				onCancel={ handleDialogCancel }
-				confirmButtonText={ __( 'Publish' ) }
-				size="medium"
-			>
-				{ __( 'Would you like to privately publish this post now?' ) }
-			</ConfirmDialog>
-		</div>
-	);
-}
-
-function PostVisibilityChoice( { instanceId, value, label, info, ...props } ) {
-	return (
-		<div className="editor-post-visibility__choice">
-			<input
-				type="radio"
-				name={ `editor-post-visibility__setting-${ instanceId }` }
-				value={ value }
-				id={ `editor-post-${ value }-${ instanceId }` }
-				aria-describedby={ `editor-post-${ value }-${ instanceId }-description` }
-				className="editor-post-visibility__radio"
-				{ ...props }
-			/>
-			<label
-				htmlFor={ `editor-post-${ value }-${ instanceId }` }
-				className="editor-post-visibility__label"
-			>
-				{ label }
-			</label>
-			<p
-				id={ `editor-post-${ value }-${ instanceId }-description` }
-				className="editor-post-visibility__info"
-			>
-				{ info }
-			</p>
+			</VStack>
 		</div>
 	);
 }

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

@@ -6,7 +6,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { visibilityOptions } from './utils';
+import { VISIBILITY_OPTIONS } from './utils';
 import { store as editorStore } from '../../store';
 
 /**
@@ -24,8 +24,11 @@ export default function PostVisibilityLabel() {
  * @return {string} Post visibility label.
  */
 export function usePostVisibilityLabel() {
-	const visibility = useSelect( ( select ) =>
-		select( editorStore ).getEditedPostVisibility()
+	const visibility = useSelect(
+		( select ) => select( editorStore ).getEditedPostVisibility(),
+		[]
 	);
-	return visibilityOptions[ visibility ]?.label;
+
+	return VISIBILITY_OPTIONS.find( ( option ) => option.value === visibility )
+		?.label;
 }

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

@@ -3,17 +3,20 @@
  */
 import { __ } from '@wordpress/i18n';
 
-export const visibilityOptions = {
-	public: {
+export const VISIBILITY_OPTIONS = [
+	{
 		label: __( 'Public' ),
-		info: __( 'Visible to everyone.' ),
+		value: 'public',
+		description: __( 'Visible to everyone.' ),
 	},
-	private: {
+	{
 		label: __( 'Private' ),
-		info: __( 'Only visible to site admins and editors.' ),
+		value: 'private',
+		description: __( 'Only visible to site admins and editors.' ),
 	},
-	password: {
+	{
 		label: __( 'Password protected' ),
-		info: __( 'Only those with the password can view this post.' ),
+		value: 'password',
+		description: __( 'Only visible to those who know the password.' ),
 	},
-};
+];

package/src/components/provider/index.js

@@ -182,6 +182,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 				} = unlock( select( editorStore ) );
 				const { getEntitiesConfig } = select( coreStore );
 
+				const _mode = getRenderingMode();
 				const _defaultMode = getDefaultRenderingMode( post.type );
 				/**
 				 * To avoid content "flash", wait until rendering mode has been resolved.
@@ -190,16 +191,20 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 				 * - Wait for template to be resolved if the default mode is 'template-locked'.
 				 * - Wait for default mode to be resolved otherwise.
 				 */
-				const hasResolvedMode =
+				const hasResolvedDefaultMode =
 					_defaultMode === 'template-locked'
 						? hasTemplate
 						: _defaultMode !== undefined;
+				// Wait until the default mode is retrieved and start rendering canvas.
+				const isRenderingModeReady = _defaultMode !== undefined;
 
 				return {
 					editorSettings: getEditorSettings(),
-					isReady: __unstableIsEditorReady() && hasResolvedMode,
-					mode: getRenderingMode(),
-					defaultMode: _defaultMode,
+					isReady: __unstableIsEditorReady(),
+					mode: isRenderingModeReady ? _mode : undefined,
+					defaultMode: hasResolvedDefaultMode
+						? _defaultMode
+						: undefined,
 					selection: getEditorSelection(),
 					postTypeEntities:
 						post.type === 'wp_template'

package/src/style.scss

@@ -41,7 +41,6 @@
 @import "./components/post-text-editor/style.scss";
 @import "./components/post-title/style.scss";
 @import "./components/post-url/style.scss";
-@import "./components/post-visibility/style.scss";
 @import "./components/posts-per-page/style.scss";
 @import "./components/post-trash/style.scss";
 @import "./components/preview-dropdown/style.scss";