@wordpress/editor 13.24.0 → 13.25.0

package/build-style/style.css

@@ -142,6 +142,137 @@
   color: var(--wp-admin-theme-color);
 }
 
+.editor-document-bar {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  justify-content: space-between;
+  min-width: 0;
+  background: #f0f0f0;
+  border-radius: 4px;
+  width: min(100%, 450px);
+}
+.editor-document-bar:hover {
+  background-color: #e0e0e0;
+}
+.editor-document-bar .components-button {
+  border-radius: 4px;
+}
+.editor-document-bar .components-button:hover {
+  color: var(--wp-block-synced-color);
+  background: #e0e0e0;
+}
+@media (min-width: 960px) {
+  .editor-document-bar {
+    width: min(100%, 450px);
+  }
+}
+
+.editor-document-bar__command {
+  flex-grow: 1;
+  color: var(--wp-block-synced-color);
+  overflow: hidden;
+}
+
+.editor-document-bar__title {
+  flex-grow: 1;
+  overflow: hidden;
+  color: #2f2f2f;
+}
+@media (min-width: 600px) {
+  .editor-document-bar__title {
+    padding-left: 32px;
+  }
+}
+.editor-document-bar__title:hover {
+  color: var(--wp-block-synced-color);
+}
+.editor-document-bar.is-global .editor-document-bar__title {
+  color: var(--wp-block-synced-color);
+}
+.editor-document-bar__title .block-editor-block-icon {
+  min-width: 24px;
+  flex-shrink: 0;
+}
+.editor-document-bar__title h1 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50%;
+  color: currentColor;
+}
+.editor-document-bar.is-animated.has-back-button .editor-document-bar__title {
+  animation: editor-document-bar__slide-in-left 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .editor-document-bar.is-animated.has-back-button .editor-document-bar__title {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+.editor-document-bar.is-animated .editor-document-bar__title {
+  animation: editor-document-bar__slide-in-right 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .editor-document-bar.is-animated .editor-document-bar__title {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+
+.editor-document-bar__shortcut {
+  color: #2f2f2f;
+  min-width: 32px;
+  display: none;
+}
+@media (min-width: 782px) {
+  .editor-document-bar__shortcut {
+    display: initial;
+  }
+}
+
+.editor-document-bar__back.components-button.has-icon.has-text {
+  min-width: 36px;
+  flex-shrink: 0;
+  color: #757575;
+  gap: 0;
+  z-index: 1;
+  position: absolute;
+}
+.editor-document-bar__back.components-button.has-icon.has-text:hover {
+  color: var(--wp-block-synced-color);
+  background-color: transparent;
+}
+.editor-document-bar.is-animated .editor-document-bar__back.components-button.has-icon.has-text {
+  animation: editor-document-bar__slide-in-left 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .editor-document-bar.is-animated .editor-document-bar__back.components-button.has-icon.has-text {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+
+@keyframes editor-document-bar__slide-in-right {
+  from {
+    transform: translateX(-15%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes editor-document-bar__slide-in-left {
+  from {
+    transform: translateX(15%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
 .document-outline {
   margin: 20px 0;
 }
@@ -689,6 +820,51 @@
   font-size: 12px;
 }
 
+.editor-post-template__swap-template-modal {
+  z-index: 1000001;
+}
+
+.editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
+  padding-top: 2px;
+}
+@media (min-width: 782px) {
+  .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
+    column-count: 3;
+  }
+}
+@media (min-width: 1280px) {
+  .editor-post-template__swap-template-modal-content .block-editor-block-patterns-list {
+    column-count: 4;
+  }
+}
+.editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
+}
+.editor-post-template__swap-template-modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__item:not(:focus):not(:hover) .block-editor-block-preview__container {
+  box-shadow: 0 0 0 1px #ddd;
+}
+
+.editor-post-template__dropdown .components-popover__content {
+  min-width: 240px;
+}
+.editor-post-template__dropdown .components-button.is-pressed,
+.editor-post-template__dropdown .components-button.is-pressed:hover {
+  background: inherit;
+  color: inherit;
+}
+
+@media (min-width: 782px) {
+  .editor-post-template__create-form {
+    width: 320px;
+  }
+}
+
+.editor-post-template__classic-theme-dropdown {
+  padding: 8px;
+}
+
 .edit-post-text-editor__body textarea.editor-post-text-editor {
   border: 1px solid #949494;
   border-radius: 0;
@@ -914,6 +1090,12 @@
   justify-content: center;
 }
 
+.editor-preview-dropdown__button-external {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
 .table-of-contents__popover.components-popover .components-popover__content {
   min-width: 380px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.24.0",
+	"version": "13.25.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,35 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.47.0",
-		"@wordpress/api-fetch": "^6.44.0",
-		"@wordpress/blob": "^3.47.0",
-		"@wordpress/block-editor": "^12.15.0",
-		"@wordpress/blocks": "^12.24.0",
-		"@wordpress/components": "^25.13.0",
-		"@wordpress/compose": "^6.24.0",
-		"@wordpress/core-data": "^6.24.0",
-		"@wordpress/data": "^9.17.0",
-		"@wordpress/date": "^4.47.0",
-		"@wordpress/deprecated": "^3.47.0",
-		"@wordpress/dom": "^3.47.0",
-		"@wordpress/element": "^5.24.0",
-		"@wordpress/hooks": "^3.47.0",
-		"@wordpress/html-entities": "^3.47.0",
-		"@wordpress/i18n": "^4.47.0",
-		"@wordpress/icons": "^9.38.0",
-		"@wordpress/keyboard-shortcuts": "^4.24.0",
-		"@wordpress/keycodes": "^3.47.0",
-		"@wordpress/media-utils": "^4.38.0",
-		"@wordpress/notices": "^4.15.0",
-		"@wordpress/patterns": "^1.8.0",
-		"@wordpress/preferences": "^3.24.0",
-		"@wordpress/private-apis": "^0.29.0",
-		"@wordpress/reusable-blocks": "^4.24.0",
-		"@wordpress/rich-text": "^6.24.0",
-		"@wordpress/server-side-render": "^4.24.0",
-		"@wordpress/url": "^3.48.0",
-		"@wordpress/wordcount": "^3.47.0",
+		"@wordpress/a11y": "^3.48.0",
+		"@wordpress/api-fetch": "^6.45.0",
+		"@wordpress/blob": "^3.48.0",
+		"@wordpress/block-editor": "^12.16.0",
+		"@wordpress/blocks": "^12.25.0",
+		"@wordpress/commands": "^0.19.0",
+		"@wordpress/components": "^25.14.0",
+		"@wordpress/compose": "^6.25.0",
+		"@wordpress/core-data": "^6.25.0",
+		"@wordpress/data": "^9.18.0",
+		"@wordpress/date": "^4.48.0",
+		"@wordpress/deprecated": "^3.48.0",
+		"@wordpress/dom": "^3.48.0",
+		"@wordpress/element": "^5.25.0",
+		"@wordpress/hooks": "^3.48.0",
+		"@wordpress/html-entities": "^3.48.0",
+		"@wordpress/i18n": "^4.48.0",
+		"@wordpress/icons": "^9.39.0",
+		"@wordpress/keyboard-shortcuts": "^4.25.0",
+		"@wordpress/keycodes": "^3.48.0",
+		"@wordpress/media-utils": "^4.39.0",
+		"@wordpress/notices": "^4.16.0",
+		"@wordpress/patterns": "^1.9.0",
+		"@wordpress/preferences": "^3.25.0",
+		"@wordpress/private-apis": "^0.30.0",
+		"@wordpress/reusable-blocks": "^4.25.0",
+		"@wordpress/rich-text": "^6.25.0",
+		"@wordpress/server-side-render": "^4.25.0",
+		"@wordpress/url": "^3.49.0",
+		"@wordpress/wordcount": "^3.48.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",
 		"memize": "^2.1.0",
@@ -74,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
+	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
 }

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

@@ -0,0 +1,182 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
+import {
+	chevronLeftSmall,
+	chevronRightSmall,
+	page as pageIcon,
+	navigation as navigationIcon,
+	symbol,
+} from '@wordpress/icons';
+import { displayShortcut } from '@wordpress/keycodes';
+import { useEntityRecord } from '@wordpress/core-data';
+import { store as commandsStore } from '@wordpress/commands';
+import { useState, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+const typeLabels = {
+	// translators: 1: Pattern title.
+	wp_pattern: __( 'Editing pattern: %s' ),
+	// translators: 1: Navigation menu title.
+	wp_navigation: __( 'Editing navigation menu: %s' ),
+	// translators: 1: Template title.
+	wp_template: __( 'Editing template: %s' ),
+	// translators: 1: Template part title.
+	wp_template_part: __( 'Editing template part: %s' ),
+};
+
+const icons = {
+	wp_block: symbol,
+	wp_navigation: navigationIcon,
+};
+
+export default function DocumentBar() {
+	const { isEditingTemplate, templateId, postType, postId } = useSelect(
+		( select ) => {
+			const {
+				getRenderingMode,
+				getCurrentTemplateId,
+				getCurrentPostId,
+				getCurrentPostType,
+			} = select( editorStore );
+			const _templateId = getCurrentTemplateId();
+			return {
+				isEditingTemplate:
+					!! _templateId && getRenderingMode() === 'template-only',
+				templateId: _templateId,
+				postType: getCurrentPostType(),
+				postId: getCurrentPostId(),
+			};
+		},
+		[]
+	);
+	const { getEditorSettings } = useSelect( editorStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+
+	return (
+		<BaseDocumentActions
+			postType={ isEditingTemplate ? 'wp_template' : postType }
+			postId={ isEditingTemplate ? templateId : postId }
+			onBack={
+				isEditingTemplate
+					? () =>
+							setRenderingMode(
+								getEditorSettings().defaultRenderingMode
+							)
+					: undefined
+			}
+		/>
+	);
+}
+
+function BaseDocumentActions( { postType, postId, onBack } ) {
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+	const { editedRecord: doc, isResolving } = useEntityRecord(
+		'postType',
+		postType,
+		postId
+	);
+	const { templateIcon, templateTitle } = useSelect( ( select ) => {
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
+		const templateInfo = getTemplateInfo( doc );
+		return {
+			templateIcon: templateInfo.icon,
+			templateTitle: templateInfo.title,
+		};
+	} );
+	const isNotFound = ! doc && ! isResolving;
+	const icon = icons[ postType ] ?? pageIcon;
+	const [ isAnimated, setIsAnimated ] = useState( false );
+	const isMounting = useRef( true );
+	const isTemplate = [ 'wp_template', 'wp_template_part' ].includes(
+		postType
+	);
+	const isGlobalEntity = [
+		'wp_template',
+		'wp_navigation',
+		'wp_template_part',
+		'wp_block',
+	].includes( postType );
+
+	useEffect( () => {
+		if ( ! isMounting.current ) {
+			setIsAnimated( true );
+		}
+		isMounting.current = false;
+	}, [ postType, postId ] );
+
+	const title = isTemplate ? templateTitle : doc.title;
+
+	return (
+		<div
+			className={ classnames( 'editor-document-bar', {
+				'has-back-button': !! onBack,
+				'is-animated': isAnimated,
+				'is-global': isGlobalEntity,
+			} ) }
+		>
+			{ onBack && (
+				<Button
+					className="editor-document-bar__back"
+					icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+					onClick={ ( event ) => {
+						event.stopPropagation();
+						onBack();
+					} }
+					size="compact"
+				>
+					{ __( 'Back' ) }
+				</Button>
+			) }
+			{ isNotFound && <Text>{ __( 'Document not found' ) }</Text> }
+			{ ! isNotFound && (
+				<Button
+					className="editor-document-bar__command"
+					onClick={ () => openCommandCenter() }
+					size="compact"
+				>
+					<HStack
+						className="editor-document-bar__title"
+						spacing={ 1 }
+						justify="center"
+					>
+						<BlockIcon icon={ isTemplate ? templateIcon : icon } />
+						<Text
+							size="body"
+							as="h1"
+							aria-label={
+								typeLabels[ postType ]
+									? // eslint-disable-next-line @wordpress/valid-sprintf
+									  sprintf( typeLabels[ postType ], title )
+									: undefined
+							}
+						>
+							{ title }
+						</Text>
+					</HStack>
+					<span className="editor-document-bar__shortcut">
+						{ displayShortcut.primary( 'k' ) }
+					</span>
+				</Button>
+			) }
+		</div>
+	);
+}

package/src/components/document-bar/style.scss

@@ -0,0 +1,130 @@
+.editor-document-bar {
+	display: flex;
+	align-items: center;
+	height: $button-size-compact;
+	justify-content: space-between;
+	// Flex items will, by default, refuse to shrink below a minimum
+	// intrinsic width. In order to shrink this flexbox item, and
+	// subsequently truncate child text, we set an explicit min-width.
+	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
+	min-width: 0;
+	background: $gray-100;
+	border-radius: $grid-unit-05;
+	width: min(100%, 450px);
+
+	&:hover {
+		background-color: $gray-200;
+	}
+
+	.components-button {
+		border-radius: $grid-unit-05;
+
+		&:hover {
+			color: var(--wp-block-synced-color);
+			background: $gray-200;
+		}
+	}
+
+	@include break-large() {
+		width: min(100%, 450px);
+	}
+}
+
+.editor-document-bar__command {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+}
+
+.editor-document-bar__title {
+	flex-grow: 1;
+	overflow: hidden;
+	color: $gray-800;
+
+	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
+	@include break-small() {
+		padding-left: $grid-unit-40;
+	}
+
+	&:hover {
+		color: var(--wp-block-synced-color);
+	}
+
+	.editor-document-bar.is-global & {
+		color: var(--wp-block-synced-color);
+	}
+
+	.block-editor-block-icon {
+		min-width: $grid-unit-30;
+		flex-shrink: 0;
+	}
+
+	h1 {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 50%;
+		color: currentColor;
+	}
+
+	.editor-document-bar.is-animated.has-back-button & {
+		animation: editor-document-bar__slide-in-left 0.3s;
+		@include reduce-motion("animation");
+	}
+
+	.editor-document-bar.is-animated & {
+		animation: editor-document-bar__slide-in-right 0.3s;
+		@include reduce-motion("animation");
+	}
+}
+
+.editor-document-bar__shortcut {
+	color: $gray-800;
+	min-width: $grid-unit-40;
+	display: none;
+
+	@include break-medium() {
+		display: initial;
+	}
+}
+
+.editor-document-bar__back.components-button.has-icon.has-text {
+	min-width: $button-size;
+	flex-shrink: 0;
+	color: $gray-700;
+	gap: 0;
+	z-index: 1;
+	position: absolute;
+
+	&:hover {
+		color: var(--wp-block-synced-color);
+		background-color: transparent;
+	}
+
+	.editor-document-bar.is-animated & {
+		animation: editor-document-bar__slide-in-left 0.3s;
+		@include reduce-motion("animation");
+	}
+}
+
+@keyframes editor-document-bar__slide-in-right {
+	from {
+		transform: translateX(-15%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes editor-document-bar__slide-in-left {
+	from {
+		transform: translateX(15%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}

package/src/components/editor-canvas/edit-template-blocks-notification.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useState, useRef } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Component that:
+ *
+ * - Displays a 'Edit your template to edit this block' notification when the
+ *   user is focusing on editing page content and clicks on a disabled template
+ *   block.
+ * - Displays a 'Edit your template to edit this block' dialog when the user
+ *   is focusing on editing page conetnt and double clicks on a disabled
+ *   template block.
+ *
+ * @param {Object}                                 props
+ * @param {import('react').RefObject<HTMLElement>} props.contentRef Ref to the block
+ *                                                                  editor iframe canvas.
+ */
+export default function EditTemplateBlocksNotification( { contentRef } ) {
+	const renderingMode = useSelect(
+		( select ) => select( editorStore ).getRenderingMode(),
+		[]
+	);
+	const { getNotices } = useSelect( noticesStore );
+
+	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+
+	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
+
+	const lastNoticeId = useRef( 0 );
+
+	useEffect( () => {
+		const handleClick = async ( event ) => {
+			if ( renderingMode !== 'template-locked' ) {
+				return;
+			}
+			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
+				return;
+			}
+			const isNoticeAlreadyShowing = getNotices().some(
+				( notice ) => notice.id === lastNoticeId.current
+			);
+			if ( isNoticeAlreadyShowing ) {
+				return;
+			}
+			const { notice } = await createInfoNotice(
+				__( 'Edit your template to edit this block.' ),
+				{
+					isDismissible: true,
+					type: 'snackbar',
+					actions: [
+						{
+							label: __( 'Edit template' ),
+							onClick: () => setRenderingMode( 'template-only' ),
+						},
+					],
+				}
+			);
+			lastNoticeId.current = notice.id;
+		};
+
+		const handleDblClick = ( event ) => {
+			if ( renderingMode !== 'template-locked' ) {
+				return;
+			}
+			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
+				return;
+			}
+			if ( lastNoticeId.current ) {
+				removeNotice( lastNoticeId.current );
+			}
+			setIsDialogOpen( true );
+		};
+
+		const canvas = contentRef.current;
+		canvas?.addEventListener( 'click', handleClick );
+		canvas?.addEventListener( 'dblclick', handleDblClick );
+		return () => {
+			canvas?.removeEventListener( 'click', handleClick );
+			canvas?.removeEventListener( 'dblclick', handleDblClick );
+		};
+	}, [ lastNoticeId, renderingMode, contentRef.current ] );
+
+	return (
+		<ConfirmDialog
+			isOpen={ isDialogOpen }
+			confirmButtonText={ __( 'Edit template' ) }
+			onConfirm={ () => {
+				setIsDialogOpen( false );
+				setRenderingMode( 'template-only' );
+			} }
+			onCancel={ () => setIsDialogOpen( false ) }
+		>
+			{ __( 'Edit your template to edit this block.' ) }
+		</ConfirmDialog>
+	);
+}