diff --git a/package-lock.json b/package-lock.json index 80a3f384e808ed..bd4f1c7fde9165 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55419,6 +55419,7 @@ "@wordpress/blob": "file:../blob", "@wordpress/block-editor": "file:../block-editor", "@wordpress/blocks": "file:../blocks", + "@wordpress/commands": "file:../commands", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", "@wordpress/core-data": "file:../core-data", @@ -70652,6 +70653,7 @@ "@wordpress/blob": "file:../blob", "@wordpress/block-editor": "file:../block-editor", "@wordpress/blocks": "file:../blocks", + "@wordpress/commands": "file:../commands", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", "@wordpress/core-data": "file:../core-data", diff --git a/packages/commands/README.md b/packages/commands/README.md index 0a276d80c73e9a..946b101e9ef27d 100644 --- a/packages/commands/README.md +++ b/packages/commands/README.md @@ -62,8 +62,6 @@ _This package assumes that your code will run in an **ES2015+** environment. If Store definition for the commands namespace. -See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14). - _Related_ - diff --git a/packages/commands/src/store/index.js b/packages/commands/src/store/index.js index c3751f9ab44975..f3aa6f85f28b86 100644 --- a/packages/commands/src/store/index.js +++ b/packages/commands/src/store/index.js @@ -17,8 +17,6 @@ const STORE_NAME = 'core/commands'; /** * Store definition for the commands namespace. * - * See how the Commands Store is being used in components like [site-hub](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-site/src/components/site-hub/index.js#L23) and [document-actions](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/header/document-actions/index.js#L14). - * * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore * * @type {Object} diff --git a/packages/edit-post/src/components/header/document-actions/index.js b/packages/edit-post/src/components/header/document-actions/index.js deleted file mode 100644 index 5ce58f179f3ab3..00000000000000 --- a/packages/edit-post/src/components/header/document-actions/index.js +++ /dev/null @@ -1,83 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, isRTL } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { BlockIcon, store as blockEditorStore } from '@wordpress/block-editor'; -import { - Button, - VisuallyHidden, - __experimentalHStack as HStack, - __experimentalText as Text, -} from '@wordpress/components'; -import { layout, chevronLeftSmall, chevronRightSmall } from '@wordpress/icons'; -import { store as commandsStore } from '@wordpress/commands'; -import { displayShortcut } from '@wordpress/keycodes'; -import { store as editorStore } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { store as editPostStore } from '../../../store'; - -function DocumentActions() { - const { template } = useSelect( ( select ) => { - const { getEditedPostTemplate } = select( editPostStore ); - - return { - template: getEditedPostTemplate(), - }; - }, [] ); - const { clearSelectedBlock } = useDispatch( blockEditorStore ); - const { setRenderingMode } = useDispatch( editorStore ); - const { open: openCommandCenter } = useDispatch( commandsStore ); - - if ( ! template ) { - return null; - } - - let templateTitle = __( 'Default' ); - if ( template?.title ) { - templateTitle = template.title; - } else if ( !! template ) { - templateTitle = template.slug; - } - - return ( -
- - -
- ); -} - -export default DocumentActions; diff --git a/packages/edit-post/src/components/header/document-actions/style.scss b/packages/edit-post/src/components/header/document-actions/style.scss deleted file mode 100644 index 7eb77f9c0bd88c..00000000000000 --- a/packages/edit-post/src/components/header/document-actions/style.scss +++ /dev/null @@ -1,64 +0,0 @@ -.edit-post-document-actions { - display: flex; - align-items: center; - gap: $grid-unit; - height: $button-size; - 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: 4px; - width: min(100%, 450px); - - .components-button { - &:hover { - color: var(--wp-block-synced-color); - background: $gray-200; - } - } -} - -.edit-post-document-actions__command { - flex-grow: 1; - color: var(--wp-block-synced-color); - overflow: hidden; -} - -.edit-post-document-actions__title { - flex-grow: 1; - color: var(--wp-block-synced-color); - overflow: hidden; - - &:hover { - color: var(--wp-block-synced-color); - } - - .block-editor-block-icon { - flex-shrink: 0; - } - - h1 { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: var(--wp-block-synced-color); - } -} - -.edit-post-document-actions__shortcut { - color: $gray-800; -} - -.edit-post-document-actions__back.components-button.has-icon.has-text { - min-width: $button-size; - flex-shrink: 0; - color: $gray-700; - gap: 0; - - &:hover { - color: currentColor; - } -} diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 8ac8e47e01dbaa..7d7509ce4d5994 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -14,6 +14,7 @@ import { PostSavedState, PostPreviewButton, store as editorStore, + DocumentBar, } from '@wordpress/editor'; import { useEffect, useRef, useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; @@ -39,7 +40,6 @@ import { default as DevicePreview } from '../device-preview'; import ViewLink from '../view-link'; import MainDashboardButton from './main-dashboard-button'; import { store as editPostStore } from '../../store'; -import DocumentActions from './document-actions'; import { unlock } from '../../lock-unlock'; const { BlockContextualToolbar } = unlock( blockEditorPrivateApis ); @@ -160,7 +160,7 @@ function Header( { isEditingTemplate, } ) } > - { isEditingTemplate && } + { isEditingTemplate && } ( { registry, select } ) => { - registry.dispatch( editorStore ).setRenderingMode( 'all' ); + registry.dispatch( editorStore ).setRenderingMode( 'template-only' ); const isWelcomeGuideActive = select.isFeatureActive( 'welcomeGuideTemplate' ); diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index e015d084afae1b..474467ab2e25a4 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -2,7 +2,6 @@ @import "./components/header/style.scss"; @import "./components/header/fullscreen-mode-close/style.scss"; @import "./components/header/header-toolbar/style.scss"; -@import "./components/header/document-actions/style.scss"; @import "./components/keyboard-shortcut-help-modal/style.scss"; @import "./components/layout/style.scss"; @import "./components/block-manager/style.scss"; diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index 3cca41d67985c5..962cfe09afb720 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -97,10 +97,12 @@ export function useSpecificEditorSettings() { keepCaretInsideBlock, canvasMode, settings, + postWithTemplate, } = useSelect( ( select ) => { const { getEditedPostType, getEditedPostId, + getEditedPostContext, getCanvasMode, getSettings, } = unlock( select( editSiteStore ) ); @@ -113,6 +115,7 @@ export function useSpecificEditorSettings() { usedPostType, usedPostId ); + const _context = getEditedPostContext(); return { templateSlug: _record.slug, focusMode: !! getPreference( 'core/edit-site', 'focusMode' ), @@ -130,10 +133,11 @@ export function useSpecificEditorSettings() { ), canvasMode: getCanvasMode(), settings: getSettings(), + postWithTemplate: _context?.postId, }; }, [] ); const archiveLabels = useArchiveLabel( templateSlug ); - + const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all'; const defaultEditorSettings = useMemo( () => { return { ...settings, @@ -144,6 +148,7 @@ export function useSpecificEditorSettings() { isDistractionFree, hasFixedToolbar, keepCaretInsideBlock, + defaultRenderingMode, // I wonder if they should be set in the post editor too __experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel, @@ -159,6 +164,7 @@ export function useSpecificEditorSettings() { canvasMode, archiveLabels.archiveTypeLabel, archiveLabels.archiveNameLabel, + defaultRenderingMode, ] ); return defaultEditorSettings; diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js deleted file mode 100644 index 801226200f20da..00000000000000 --- a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js +++ /dev/null @@ -1,205 +0,0 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ -import { __, isRTL } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { - Button, - VisuallyHidden, - __experimentalText as Text, - __experimentalHStack as HStack, -} from '@wordpress/components'; -import { BlockIcon } from '@wordpress/block-editor'; -import { store as commandsStore } from '@wordpress/commands'; -import { - chevronLeftSmall, - chevronRightSmall, - page as pageIcon, - navigation as navigationIcon, - symbol, -} from '@wordpress/icons'; -import { displayShortcut } from '@wordpress/keycodes'; -import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; -import { useRef, useState, useEffect } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import useEditedEntityRecord from '../../use-edited-entity-record'; -import { store as editSiteStore } from '../../../store'; -import { - TEMPLATE_POST_TYPE, - NAVIGATION_POST_TYPE, - TEMPLATE_PART_POST_TYPE, - PATTERN_TYPES, - PATTERN_SYNC_TYPES, -} from '../../../utils/constants'; - -const typeLabels = { - [ PATTERN_TYPES.user ]: __( 'Editing pattern:' ), - [ NAVIGATION_POST_TYPE ]: __( 'Editing navigation menu:' ), - [ TEMPLATE_POST_TYPE ]: __( 'Editing template:' ), - [ TEMPLATE_PART_POST_TYPE ]: __( 'Editing template part:' ), -}; - -export default function DocumentActions() { - const isPage = useSelect( - ( select ) => select( editSiteStore ).isPage(), - [] - ); - return isPage ? : ; -} - -function PageDocumentActions() { - const { isEditingPage, hasResolved, isFound, title } = useSelect( - ( select ) => { - const { getEditedPostContext } = select( editSiteStore ); - const { getEditedEntityRecord, hasFinishedResolution } = - select( coreStore ); - const { getRenderingMode } = select( editorStore ); - const context = getEditedPostContext(); - const queryArgs = [ 'postType', context.postType, context.postId ]; - const page = getEditedEntityRecord( ...queryArgs ); - return { - isEditingPage: - !! context.postId && getRenderingMode() !== 'template-only', - hasResolved: hasFinishedResolution( - 'getEditedEntityRecord', - queryArgs - ), - isFound: !! page, - title: page?.title, - }; - }, - [] - ); - - const { setRenderingMode } = useDispatch( editorStore ); - const [ isAnimated, setIsAnimated ] = useState( false ); - const isLoading = useRef( true ); - - useEffect( () => { - if ( ! isLoading.current ) { - setIsAnimated( true ); - } - isLoading.current = false; - }, [ isEditingPage ] ); - - if ( ! hasResolved ) { - return null; - } - - if ( ! isFound ) { - return ( -
- { __( 'Document not found' ) } -
- ); - } - - return isEditingPage ? ( - - { title } - - ) : ( - setRenderingMode( 'template-locked' ) } - /> - ); -} - -function TemplateDocumentActions( { className, onBack } ) { - const { isLoaded, record, getTitle, icon } = useEditedEntityRecord(); - - if ( ! isLoaded ) { - return null; - } - - if ( ! record ) { - return ( -
- { __( 'Document not found' ) } -
- ); - } - - let typeIcon = icon; - if ( record.type === NAVIGATION_POST_TYPE ) { - typeIcon = navigationIcon; - } else if ( record.type === PATTERN_TYPES.user ) { - typeIcon = symbol; - } - - return ( - - - { typeLabels[ record.type ] ?? - typeLabels[ TEMPLATE_POST_TYPE ] } - - { getTitle() } - - ); -} - -function BaseDocumentActions( { className, icon, children, onBack } ) { - const { open: openCommandCenter } = useDispatch( commandsStore ); - return ( -
- { onBack && ( - - ) } - -
- ); -} diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 110e9ca3b4d842..f8a9d9d4e892bd 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -27,13 +27,13 @@ import { VisuallyHidden, } from '@wordpress/components'; import { store as preferencesStore } from '@wordpress/preferences'; +import { DocumentBar } from '@wordpress/editor'; /** * Internal dependencies */ import MoreMenu from './more-menu'; import SaveButton from '../save-button'; -import DocumentActions from './document-actions'; import DocumentTools from './document-tools'; import { store as editSiteStore } from '../../store'; import { @@ -205,7 +205,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) { { ! hasDefaultEditorCanvasView ? ( getEditorCanvasContainerTitle( editorCanvasView ) ) : ( - + ) } ) } diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 5a93375afec8b0..9e9cdbc6684b81 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -8,7 +8,6 @@ @import "./components/global-styles/style.scss"; @import "./components/global-styles/screen-revisions/style.scss"; @import "./components/header-edit-mode/style.scss"; -@import "./components/header-edit-mode/document-actions/style.scss"; @import "./components/list/style.scss"; @import "./components/page/style.scss"; @import "./components/page-pages/style.scss"; diff --git a/packages/editor/package.json b/packages/editor/package.json index 59b4c78b8235ee..81d24961a775ec 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -36,6 +36,7 @@ "@wordpress/blob": "file:../blob", "@wordpress/block-editor": "file:../block-editor", "@wordpress/blocks": "file:../blocks", + "@wordpress/commands": "file:../commands", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", "@wordpress/core-data": "file:../core-data", diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js new file mode 100644 index 00000000000000..ffb2be33074563 --- /dev/null +++ b/packages/editor/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 ( + + setRenderingMode( + getEditorSettings().defaultRenderingMode + ) + : undefined + } + /> + ); +} + +function BaseDocumentActions( { postType, postId, onBack } ) { + const { open: openCommandCenter } = useDispatch( commandsStore ); + const { editedRecord: document, isResolving } = useEntityRecord( + 'postType', + postType, + postId + ); + const { templateIcon, templateTitle } = useSelect( ( select ) => { + const { __experimentalGetTemplateInfo: getTemplateInfo } = + select( editorStore ); + const templateInfo = getTemplateInfo( document ); + return { + templateIcon: templateInfo.icon, + templateTitle: templateInfo.title, + }; + } ); + const isNotFound = ! document && ! 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 : document.title; + + return ( +
+ { onBack && ( + + ) } + { isNotFound && { __( 'Document not found' ) } } + { ! isNotFound && ( + + ) } +
+ ); +} diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/editor/src/components/document-bar/style.scss similarity index 67% rename from packages/edit-site/src/components/header-edit-mode/document-actions/style.scss rename to packages/editor/src/components/document-bar/style.scss index dce73f269a705c..0cd7e0689c7d31 100644 --- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -1,4 +1,4 @@ -.edit-site-document-actions { +.editor-document-bar { display: flex; align-items: center; height: $button-size-compact; @@ -28,26 +28,18 @@ @include break-large() { width: min(100%, 450px); } - - &.is-synced-entity { - .edit-site-document-actions__title { - color: var(--wp-block-synced-color); - h1 { - color: var(--wp-block-synced-color); - } - } - } } -.edit-site-document-actions__command { +.editor-document-bar__command { flex-grow: 1; color: var(--wp-block-synced-color); overflow: hidden; } -.edit-site-document-actions__title { +.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() { @@ -58,6 +50,10 @@ 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; @@ -68,28 +64,21 @@ overflow: hidden; text-overflow: ellipsis; max-width: 50%; + color: currentColor; } - .edit-site-document-actions.is-page & { - color: $gray-800; - - h1 { - color: $gray-800; - } - } - - .edit-site-document-actions.is-animated & { - animation: edit-site-document-actions__slide-in-left 0.3s; + .editor-document-bar.is-animated.has-back-button & { + animation: editor-document-bar__slide-in-left 0.3s; @include reduce-motion("animation"); } - .edit-site-document-actions.is-animated.is-page & { - animation: edit-site-document-actions__slide-in-right 0.3s; + .editor-document-bar.is-animated & { + animation: editor-document-bar__slide-in-right 0.3s; @include reduce-motion("animation"); } } -.edit-site-document-actions__shortcut { +.editor-document-bar__shortcut { color: $gray-800; min-width: $grid-unit-40; display: none; @@ -99,7 +88,7 @@ } } -.edit-site-document-actions__back.components-button.has-icon.has-text { +.editor-document-bar__back.components-button.has-icon.has-text { min-width: $button-size; flex-shrink: 0; color: $gray-700; @@ -108,17 +97,17 @@ position: absolute; &:hover { - color: currentColor; + color: var(--wp-block-synced-color); background-color: transparent; } - .edit-site-document-actions.is-animated & { - animation: edit-site-document-actions__slide-in-left 0.3s; + .editor-document-bar.is-animated & { + animation: editor-document-bar__slide-in-left 0.3s; @include reduce-motion("animation"); } } -@keyframes edit-site-document-actions__slide-in-right { +@keyframes editor-document-bar__slide-in-right { from { transform: translateX(-15%); opacity: 0; @@ -129,7 +118,7 @@ } } -@keyframes edit-site-document-actions__slide-in-left { +@keyframes editor-document-bar__slide-in-left { from { transform: translateX(15%); opacity: 0; diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index 5fefc5506a02fc..64cd17746520a4 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -8,6 +8,7 @@ export * from './autocompleters'; // Post Related Components. export { default as AutosaveMonitor } from './autosave-monitor'; +export { default as DocumentBar } from './document-bar'; export { default as DocumentOutline } from './document-outline'; export { default as DocumentOutlineCheck } from './document-outline/check'; export { EditorKeyboardShortcuts }; diff --git a/packages/editor/src/store/defaults.js b/packages/editor/src/store/defaults.js index 38b79ad9a84cc8..686888f91de3d5 100644 --- a/packages/editor/src/store/defaults.js +++ b/packages/editor/src/store/defaults.js @@ -27,4 +27,5 @@ export const EDITOR_SETTINGS_DEFAULTS = { richEditingEnabled: true, codeEditingEnabled: true, enableCustomFields: undefined, + defaultRenderingMode: 'post-only', }; diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index 986cb645c271f5..ba12f58697a4a3 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -1,4 +1,5 @@ @import "./components/autocompleters/style.scss"; +@import "./components/document-bar/style.scss"; @import "./components/document-outline/style.scss"; @import "./components/editor-notices/style.scss"; @import "./components/entities-saved-states/style.scss"; diff --git a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js index b9bfbf9dd6b05e..f862c32556e061 100644 --- a/test/e2e/specs/editor/various/post-editor-template-mode.spec.js +++ b/test/e2e/specs/editor/various/post-editor-template-mode.spec.js @@ -147,9 +147,11 @@ class PostEditorTemplateMode { 'role=button[name="Dismiss this notice"] >> text=Editing template. Changes made here affect all posts and pages that use the template.' ); - await expect( - this.editorTopBar.getByRole( 'heading[level=1]' ) - ).toHaveText( 'Editing template: Single Entries' ); + const title = this.editorTopBar.getByRole( 'heading', { + name: 'Editing template: Single Entries', + } ); + + await expect( title ).toBeVisible(); } async createPostAndSaveDraft() { diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js index aa2942670c5a85..3224c519f4f9e8 100644 --- a/test/e2e/specs/site-editor/title.spec.js +++ b/test/e2e/specs/site-editor/title.spec.js @@ -22,11 +22,13 @@ test.describe( 'Site editor title', () => { postType: 'wp_template', canvas: 'edit', } ); - const title = page.locator( - 'role=region[name="Editor top bar"i] >> role=heading[level=1]' - ); + const title = page + .getByRole( 'region', { name: 'Editor top bar' } ) + .getByRole( 'heading', { + name: 'Editing template: Index', + } ); - await expect( title ).toHaveText( 'Editing template:Index' ); + await expect( title ).toBeVisible(); } ); test( 'displays the selected template name in the title for the header template', async ( { @@ -39,10 +41,12 @@ test.describe( 'Site editor title', () => { postType: 'wp_template_part', canvas: 'edit', } ); - const title = page.locator( - 'role=region[name="Editor top bar"i] >> role=heading[level=1]' - ); + const title = page + .getByRole( 'region', { name: 'Editor top bar' } ) + .getByRole( 'heading', { + name: 'Editing template part: header', + } ); - await expect( title ).toHaveText( 'Editing template part:header' ); + await expect( title ).toBeVisible(); } ); } );