@wordpress/edit-post 6.6.0 → 6.9.0

package/src/components/keyboard-shortcuts/index.js

@@ -18,15 +18,11 @@ import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
 	const { getBlockSelectionStart } = useSelect( blockEditorStore );
-	const {
-		getEditorMode,
-		isEditorSidebarOpened,
-		isListViewOpened,
-	} = useSelect( editPostStore );
+	const { getEditorMode, isEditorSidebarOpened, isListViewOpened } =
+		useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
-		const { richEditingEnabled, codeEditingEnabled } = select(
-			editorStore
-		).getEditorSettings();
+		const { richEditingEnabled, codeEditingEnabled } =
+			select( editorStore ).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
 

package/src/components/layout/actions-panel.js

@@ -26,9 +26,8 @@ export default function ActionsPanel( {
 	closeEntitiesSavedStates,
 	isEntitiesSavedStatesOpen,
 } ) {
-	const { closePublishSidebar, togglePublishSidebar } = useDispatch(
-		editPostStore
-	);
+	const { closePublishSidebar, togglePublishSidebar } =
+		useDispatch( editPostStore );
 	const {
 		publishSidebarOpened,
 		hasActiveMetaboxes,
@@ -36,14 +35,12 @@ export default function ActionsPanel( {
 		hasNonPostEntityChanges,
 	} = useSelect( ( select ) => {
 		return {
-			publishSidebarOpened: select(
-				editPostStore
-			).isPublishSidebarOpened(),
+			publishSidebarOpened:
+				select( editPostStore ).isPublishSidebarOpened(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			isSavingMetaBoxes: select( editPostStore ).isSavingMetaBoxes(),
-			hasNonPostEntityChanges: select(
-				editorStore
-			).hasNonPostEntityChanges(),
+			hasNonPostEntityChanges:
+				select( editorStore ).hasNonPostEntityChanges(),
 		};
 	}, [] );
 

package/src/components/layout/index.js

@@ -66,11 +66,8 @@ const interfaceLabels = {
 function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
-	const {
-		openGeneralSidebar,
-		closeGeneralSidebar,
-		setIsInserterOpened,
-	} = useDispatch( editPostStore );
+	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
+		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		mode,
@@ -96,17 +93,15 @@ function Layout( { styles } ) {
 
 		return {
 			isTemplateMode: select( editPostStore ).isEditingTemplate(),
-			hasFixedToolbar: select( editPostStore ).isFeatureActive(
-				'fixedToolbar'
-			),
+			hasFixedToolbar:
+				select( editPostStore ).isFeatureActive( 'fixedToolbar' ),
 			sidebarIsOpened: !! (
 				select( interfaceStore ).getActiveComplementaryArea(
 					editPostStore.name
 				) || select( editPostStore ).isPublishSidebarOpened()
 			),
-			isFullscreenActive: select( editPostStore ).isFeatureActive(
-				'fullscreenMode'
-			),
+			isFullscreenActive:
+				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
 			isInserterOpened: select( editPostStore ).isInserterOpened(),
 			isListViewOpened: select( editPostStore ).isListViewOpened(),
 			mode: select( editPostStore ).getEditorMode(),
@@ -118,12 +113,10 @@ function Layout( { styles } ) {
 			nextShortcut: select(
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
-			showIconLabels: select( editPostStore ).isFeatureActive(
-				'showIconLabels'
-			),
-			hasReducedUI: select( editPostStore ).isFeatureActive(
-				'reducedUI'
-			),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			hasReducedUI:
+				select( editPostStore ).isFeatureActive( 'reducedUI' ),
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
 				'showBlockBreadcrumbs'
 			),
@@ -156,10 +149,8 @@ function Layout( { styles } ) {
 
 	// Local state for save panel.
 	// Note 'truthy' callback implies an open panel.
-	const [
-		entitiesSavedStatesCallback,
-		setEntitiesSavedStatesCallback,
-	] = useState( false );
+	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
+		useState( false );
 	const closeEntitiesSavedStates = useCallback(
 		( arg ) => {
 			if ( typeof entitiesSavedStatesCallback === 'function' ) {

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

@@ -187,13 +187,12 @@ class Layout extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { __unstableIsEditorReady: isEditorReady } = select(
-			editorStore
-		);
+		const { __unstableIsEditorReady: isEditorReady } =
+			select( editorStore );
 		const { getEditorMode } = select( editPostStore );
 		const { getSettings } = select( blockEditorStore );
-		const globalStyles = getSettings()?.__experimentalGlobalStylesBaseStyles
-			?.color;
+		const globalStyles =
+			getSettings()?.__experimentalGlobalStylesBaseStyles?.color;
 
 		return {
 			isReady: isEditorReady(),

package/src/components/preferences-modal/options/enable-custom-fields.js

@@ -55,6 +55,6 @@ export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
 }
 
 export default withSelect( ( select ) => ( {
-	areCustomFieldsEnabled: !! select( editorStore ).getEditorSettings()
-		.enableCustomFields,
+	areCustomFieldsEnabled:
+		!! select( editorStore ).getEditorSettings().enableCustomFields,
 } ) )( EnableCustomFieldsOption );

package/src/components/preferences-modal/options/enable-panel.js

@@ -12,9 +12,8 @@ import { store as editPostStore } from '../../../store';
 
 export default compose(
 	withSelect( ( select, { panelName } ) => {
-		const { isEditorPanelEnabled, isEditorPanelRemoved } = select(
-			editPostStore
-		);
+		const { isEditorPanelEnabled, isEditorPanelRemoved } =
+			select( editPostStore );
 		return {
 			isRemoved: isEditorPanelRemoved( panelName ),
 			isChecked: isEditorPanelEnabled( panelName ),

package/src/components/preferences-modal/options/enable-publish-sidebar.js

@@ -12,9 +12,8 @@ export default compose(
 		isChecked: select( editorStore ).isPublishSidebarEnabled(),
 	} ) ),
 	withDispatch( ( dispatch ) => {
-		const { enablePublishSidebar, disablePublishSidebar } = dispatch(
-			editorStore
-		);
+		const { enablePublishSidebar, disablePublishSidebar } =
+			dispatch( editorStore );
 		return {
 			onChange: ( isEnabled ) =>
 				isEnabled ? enablePublishSidebar() : disablePublishSidebar(),

package/src/components/secondary-sidebar/inserter-sidebar.js

@@ -19,9 +19,8 @@ import { store as editPostStore } from '../../store';
 
 export default function InserterSidebar() {
 	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
-		const { isFeatureActive, __experimentalGetInsertionPoint } = select(
-			editPostStore
-		);
+		const { isFeatureActive, __experimentalGetInsertionPoint } =
+			select( editPostStore );
 		return {
 			insertionPoint: __experimentalGetInsertionPoint(),
 			showMostUsedBlocks: isFeatureActive( 'mostUsedBlocks' ),

package/src/components/sidebar/discussion-panel/index.js

@@ -52,9 +52,8 @@ function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			isEnabled: select( editPostStore ).isEditorPanelEnabled(
-				PANEL_NAME
-			),
+			isEnabled:
+				select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
 			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
 		};
 	} ),

package/src/components/sidebar/featured-image/index.js

@@ -52,9 +52,8 @@ function FeaturedImage( { isEnabled, isOpened, postType, onTogglePanel } ) {
 const applyWithSelect = withSelect( ( select ) => {
 	const { getEditedPostAttribute } = select( editorStore );
 	const { getPostType } = select( coreStore );
-	const { isEditorPanelEnabled, isEditorPanelOpened } = select(
-		editPostStore
-	);
+	const { isEditorPanelEnabled, isEditorPanelOpened } =
+		select( editPostStore );
 
 	return {
 		postType: getPostType( getEditedPostAttribute( 'type' ) ),

package/src/components/sidebar/page-attributes/index.js

@@ -30,9 +30,8 @@ const PANEL_NAME = 'page-attributes';
 export function PageAttributes() {
 	const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
-		const { isEditorPanelEnabled, isEditorPanelOpened } = select(
-			editPostStore
-		);
+		const { isEditorPanelEnabled, isEditorPanelOpened } =
+			select( editPostStore );
 		const { getPostType } = select( coreStore );
 		return {
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),

package/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -114,9 +114,8 @@ const PluginDocumentSettingPanel = compose(
 	withSelect( ( select, { panelName } ) => {
 		return {
 			opened: select( editPostStore ).isEditorPanelOpened( panelName ),
-			isEnabled: select( editPostStore ).isEditorPanelEnabled(
-				panelName
-			),
+			isEnabled:
+				select( editPostStore ).isEditorPanelEnabled( panelName ),
 		};
 	} ),
 	withDispatch( ( dispatch, { panelName } ) => ( {

package/src/components/sidebar/plugin-post-status-info/index.js

@@ -1,5 +1,5 @@
 /**
- * Defines as extensibility slot for the Status & visibility panel.
+ * Defines as extensibility slot for the Summary panel.
  */
 
 /**
@@ -10,7 +10,7 @@ import { createSlotFill, PanelRow } from '@wordpress/components';
 export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
 
 /**
- * Renders a row in the Status & visibility panel of the Document sidebar.
+ * Renders a row in the Summary panel of the Document sidebar.
  * It should be noted that this is named and implemented around the function it serves
  * and not its location, which may change in future iterations.
  *

package/src/components/sidebar/plugin-sidebar/index.js

@@ -84,9 +84,8 @@ export default function PluginSidebarEditPost( { className, ...props } ) {
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
-			showIconLabels: select( editPostStore ).isFeatureActive(
-				'showIconLabels'
-			),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 		};
 	}, [] );
 	return (

package/src/components/sidebar/post-excerpt/index.js

@@ -41,9 +41,8 @@ function PostExcerpt( { isEnabled, isOpened, onTogglePanel } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			isEnabled: select( editPostStore ).isEditorPanelEnabled(
-				PANEL_NAME
-			),
+			isEnabled:
+				select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
 			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
 		};
 	} ),

package/src/components/sidebar/post-link/index.js

@@ -139,9 +139,8 @@ export default compose( [
 			getEditedPostAttribute,
 			getEditedPostSlug,
 		} = select( editorStore );
-		const { isEditorPanelEnabled, isEditorPanelOpened } = select(
-			editPostStore
-		);
+		const { isEditorPanelEnabled, isEditorPanelOpened } =
+			select( editPostStore );
 		const { getPostType } = select( coreStore );
 
 		const { link } = getCurrentPost();

package/src/components/sidebar/post-schedule/index.js

@@ -8,11 +8,14 @@ import {
 	PostSchedule as PostScheduleForm,
 	PostScheduleLabel,
 	PostScheduleCheck,
+	usePostScheduleLabel,
 } from '@wordpress/editor';
 
-export function PostSchedule() {
+export default function PostSchedule() {
 	const anchorRef = useRef();
 
+	const fullLabel = usePostScheduleLabel( { full: true } );
+
 	return (
 		<PostScheduleCheck>
 			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
@@ -28,16 +31,17 @@ export function PostSchedule() {
 								onClick={ onToggle }
 								aria-expanded={ isOpen }
 								variant="tertiary"
+								label={ fullLabel }
 							>
 								<PostScheduleLabel />
 							</Button>
 						</>
 					) }
-					renderContent={ () => <PostScheduleForm /> }
+					renderContent={ ( { onClose } ) => (
+						<PostScheduleForm onClose={ onClose } />
+					) }
 				/>
 			</PanelRow>
 		</PostScheduleCheck>
 	);
 }
-
-export default PostSchedule;

package/src/components/sidebar/post-schedule/style.scss

@@ -1,20 +1,33 @@
 .edit-post-post-schedule {
 	width: 100%;
 	position: relative;
-	justify-content: left;
+	justify-content: flex-start;
+	align-items: flex-start;
 
 	span {
 		display: block;
 		width: 45%;
+		flex-shrink: 0;
+		padding: 6px 0;
 	}
 }
 
 .components-button.edit-post-post-schedule__toggle {
-	text-align: right;
+	text-align: left;
+	white-space: normal;
+	height: auto;
+
+	// This span is added by the Popover in Tooltip when no anchorRef is
+	// provided. We set its width to 0 so that it does not cause the button text
+	// to wrap to a new line when displaying the tooltip. A better fix would be
+	// to pass anchorRef and avoid the need for a span alltogether, which is
+	// what this PR allows us to do:
+	// https://github.com/WordPress/gutenberg/pull/41268.
+	span {
+		width: 0;
+	}
 }
 
-// Zero out a blanket padding that is set on the dropdown component.
-// The datetime component has its own padding.
-.edit-post-post-schedule__dialog .components-popover__content {
-	padding: 0;
+.edit-post-post-schedule__dialog .block-editor-publish-date-time-picker {
+	margin: $grid-unit-10;
 }

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

@@ -19,6 +19,7 @@ import PostFormat from '../post-format';
 import PostPendingStatus from '../post-pending-status';
 import PluginPostStatusInfo from '../plugin-post-status-info';
 import { store as editPostStore } from '../../../store';
+import PostTemplate from '../post-template';
 
 /**
  * Module Constants
@@ -29,7 +30,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 	return (
 		<PanelBody
 			className="edit-post-post-status"
-			title={ __( 'Status & visibility' ) }
+			title={ __( 'Summary' ) }
 			opened={ isOpened }
 			onToggle={ onTogglePanel }
 		>
@@ -38,6 +39,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 					<>
 						<PostVisibility />
 						<PostSchedule />
+						<PostTemplate />
 						<PostFormat />
 						<PostSticky />
 						<PostPendingStatus />
@@ -56,9 +58,8 @@ export default compose( [
 	withSelect( ( select ) => {
 		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
 		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, isEditorPanelOpened } = select(
-			editPostStore
-		);
+		const { isEditorPanelRemoved, isEditorPanelOpened } =
+			select( editPostStore );
 		return {
 			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
 			isOpened: isEditorPanelOpened( PANEL_NAME ),

package/src/components/sidebar/post-template/create-modal.js

@@ -0,0 +1,146 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useState } from '@wordpress/element';
+import { serialize, createBlock } from '@wordpress/blocks';
+import {
+	Modal,
+	Flex,
+	FlexItem,
+	TextControl,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cleanForSlug } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+const DEFAULT_TITLE = __( 'Custom Template' );
+
+export default function PostTemplateCreateModal( { onClose } ) {
+	const defaultBlockTemplate = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().defaultBlockTemplate,
+		[]
+	);
+
+	const { __unstableCreateTemplate, __unstableSwitchToTemplateMode } =
+		useDispatch( editPostStore );
+
+	const [ title, setTitle ] = useState( '' );
+
+	const [ isBusy, setIsBusy ] = useState( false );
+
+	const cancel = () => {
+		setTitle( '' );
+		onClose();
+	};
+
+	const submit = async ( event ) => {
+		event.preventDefault();
+
+		if ( isBusy ) {
+			return;
+		}
+
+		setIsBusy( true );
+
+		const newTemplateContent =
+			defaultBlockTemplate ??
+			serialize( [
+				createBlock(
+					'core/group',
+					{
+						tagName: 'header',
+						layout: { inherit: true },
+					},
+					[
+						createBlock( 'core/site-title' ),
+						createBlock( 'core/site-tagline' ),
+					]
+				),
+				createBlock( 'core/separator' ),
+				createBlock(
+					'core/group',
+					{
+						tagName: 'main',
+					},
+					[
+						createBlock(
+							'core/group',
+							{
+								layout: { inherit: true },
+							},
+							[ createBlock( 'core/post-title' ) ]
+						),
+						createBlock( 'core/post-content', {
+							layout: { inherit: true },
+						} ),
+					]
+				),
+			] );
+
+		await __unstableCreateTemplate( {
+			slug: cleanForSlug( title || DEFAULT_TITLE ),
+			content: newTemplateContent,
+			title: title || DEFAULT_TITLE,
+		} );
+
+		setIsBusy( false );
+		cancel();
+
+		__unstableSwitchToTemplateMode( true );
+	};
+
+	return (
+		<Modal
+			title={ __( 'Create custom template' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ cancel }
+			className="edit-post-post-template__create-modal"
+		>
+			<form
+				className="edit-post-post-template__create-form"
+				onSubmit={ submit }
+			>
+				<Flex align="flex-start" gap={ 8 }>
+					<FlexItem>
+						<TextControl
+							label={ __( 'Name' ) }
+							value={ title }
+							onChange={ setTitle }
+							placeholder={ DEFAULT_TITLE }
+							disabled={ isBusy }
+							help={ __(
+								'Describe the purpose of the template, e.g. "Full Width". Custom templates can be applied to any post or page.'
+							) }
+						/>
+					</FlexItem>
+				</Flex>
+
+				<Flex justify="flex-end" expanded={ false }>
+					<FlexItem>
+						<Button variant="tertiary" onClick={ cancel }>
+							{ __( 'Cancel' ) }
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isBusy }
+							aria-disabled={ isBusy }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}