From 4e8946d5e11a5e0c7686618ae96e9f720c55ff7d Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Mon, 9 Sep 2024 15:33:15 -0500 Subject: [PATCH 01/11] Adds post type label to DocumentBar --- .../src/components/document-bar/index.js | 41 ++++++++----------- .../src/components/document-bar/style.scss | 6 ++- 2 files changed, 22 insertions(+), 25 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index f71cbce23fdafb..5110596b0d357c 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -6,7 +6,7 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { __, isRTL, sprintf } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { Button, @@ -30,17 +30,6 @@ import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants'; import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; -const TYPE_LABELS = { - // 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 MotionButton = motion( Button ); /** @@ -63,6 +52,7 @@ const MotionButton = motion( Button ); export default function DocumentBar( props ) { const { postType, + postTypeLabel, documentTitle, isNotFound, isUnsyncedPattern, @@ -76,8 +66,11 @@ export default function DocumentBar( props ) { getEditorSettings, __experimentalGetTemplateInfo: getTemplateInfo, } = select( editorStore ); - const { getEditedEntityRecord, isResolving: isResolvingSelector } = - select( coreStore ); + const { + getEditedEntityRecord, + getPostType, + isResolving: isResolvingSelector, + } = select( coreStore ); const _postType = getCurrentPostType(); const _postId = getCurrentPostId(); const _document = getEditedEntityRecord( @@ -86,8 +79,11 @@ export default function DocumentBar( props ) { _postId ); const _templateInfo = getTemplateInfo( _document ); + const _postTypeLabel = getPostType( _postType )?.labels?.singular_name; + return { postType: _postType, + postTypeLabel: _postTypeLabel, documentTitle: _document.title, isNotFound: ! _document && @@ -188,19 +184,16 @@ export default function DocumentBar( props ) { } > - + { title ? decodeEntities( title ) : __( 'No title' ) } + + { postTypeLabel && ( + + { ' · ' + decodeEntities( postTypeLabel ) } + + ) } diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index bc39d68df338ac..b48f5a9caa044c 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -66,7 +66,7 @@ } .editor-document-bar__shortcut { - color: $gray-800; + color: $gray-700; min-width: $grid-unit-30; display: none; @@ -88,3 +88,7 @@ background-color: transparent; } } + +.editor-document-bar__post-type-label { + color: $gray-700; +} From adf84da03b761992237224a901c42c32a9b8753d Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Mon, 9 Sep 2024 16:29:07 -0500 Subject: [PATCH 02/11] Removes the post type icon from the DocumentBar --- .../editor-canvas-container/index.js | 25 ++++++------------- .../edit-site/src/components/editor/index.js | 6 ++--- packages/editor/README.md | 2 +- .../src/components/document-bar/index.js | 25 +++++++------------ .../src/components/editor-interface/index.js | 2 -- .../editor/src/components/header/index.js | 3 +-- 6 files changed, 20 insertions(+), 43 deletions(-) diff --git a/packages/edit-site/src/components/editor-canvas-container/index.js b/packages/edit-site/src/components/editor-canvas-container/index.js index 75a04b5887d75f..36a3a5b43e5cd2 100644 --- a/packages/edit-site/src/components/editor-canvas-container/index.js +++ b/packages/edit-site/src/components/editor-canvas-container/index.js @@ -9,7 +9,7 @@ import { import { ESCAPE } from '@wordpress/keycodes'; import { __ } from '@wordpress/i18n'; import { useDispatch, useSelect } from '@wordpress/data'; -import { backup, closeSmall, seen } from '@wordpress/icons'; +import { closeSmall } from '@wordpress/icons'; import { useFocusOnMount, useFocusReturn } from '@wordpress/compose'; import { store as preferencesStore } from '@wordpress/preferences'; import { @@ -32,24 +32,15 @@ const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis ); * * @return {Object} Translated string for the view title and associated icon, both defaulting to ''. */ -function getEditorCanvasContainerTitleAndIcon( view ) { +function getEditorCanvasContainerTitle( view ) { switch ( view ) { case 'style-book': - return { - title: __( 'Style Book' ), - icon: seen, - }; + return __( 'Style Book' ); case 'global-styles-revisions': case 'global-styles-revisions:style-book': - return { - title: __( 'Style Revisions' ), - icon: backup, - }; + return __( 'Style Revisions' ); default: - return { - title: '', - icon: '', - }; + return ''; } } @@ -118,9 +109,7 @@ function EditorCanvasContainer( { return null; } - const { title } = getEditorCanvasContainerTitleAndIcon( - editorCanvasContainerView - ); + const title = getEditorCanvasContainerTitle( editorCanvasContainerView ); const shouldShowCloseButton = onClose || closeButtonLabel; return ( @@ -158,4 +147,4 @@ function useHasEditorCanvasContainer() { } export default EditorCanvasContainer; -export { useHasEditorCanvasContainer, getEditorCanvasContainerTitleAndIcon }; +export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle }; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 4be3c960bb4a34..b99a7cd78ed371 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -37,7 +37,7 @@ import PluginTemplateSettingPanel from '../plugin-template-setting-panel'; import GlobalStylesSidebar from '../global-styles-sidebar'; import { isPreviewingTheme } from '../../utils/is-previewing-theme'; import { - getEditorCanvasContainerTitleAndIcon, + getEditorCanvasContainerTitle, useHasEditorCanvasContainer, } from '../editor-canvas-container'; import SaveButton from '../save-button'; @@ -204,8 +204,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { ); // Replace the title and icon displayed in the DocumentBar when there's an overlay visible. - const { title, icon } = - getEditorCanvasContainerTitleAndIcon( editorCanvasView ); + const title = getEditorCanvasContainerTitle( editorCanvasView ); const isReady = ! isLoading; const transition = { @@ -238,7 +237,6 @@ export default function EditSiteEditor( { isPostsList = false } ) { customSavePanel={ _isPreviewingTheme && } forceDisableBlockTools={ ! hasDefaultEditorCanvasView } title={ title } - icon={ icon } iframeProps={ iframeProps } onActionPerformed={ onActionPerformed } extraSidebarPanels={ diff --git a/packages/editor/README.md b/packages/editor/README.md index d18513b151beae..2acb98ef13642c 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -266,7 +266,7 @@ _Parameters_ - _props_ `Object`: The component props. - _props.title_ `string`: A title for the document, defaulting to the document or template title currently being edited. -- _props.icon_ `import("@wordpress/components").IconType`: An icon for the document, defaulting to an icon for document or template currently being edited. +- _props.icon_ `IconType`: An icon for the document, no default. (A default icon indicating the document post type is no longer used.) _Returns_ diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 5110596b0d357c..be291d6be59250 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -9,6 +9,7 @@ import clsx from 'clsx'; import { __, isRTL } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { + IconType, Button, __experimentalText as Text, __unstableMotion as motion, @@ -28,7 +29,6 @@ import { decodeEntities } from '@wordpress/html-entities'; */ import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants'; import { store as editorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; const MotionButton = motion( Button ); @@ -41,11 +41,11 @@ const MotionButton = motion( Button ); * ```jsx * * ``` - * @param {Object} props The component props. - * @param {string} props.title A title for the document, defaulting to the document or - * template title currently being edited. - * @param {import("@wordpress/components").IconType} props.icon An icon for the document, defaulting to an icon for document - * or template currently being edited. + * @param {Object} props The component props. + * @param {string} props.title A title for the document, defaulting to the document or + * template title currently being edited. + * @param {IconType} props.icon An icon for the document, no default. + * (A default icon indicating the document post type is no longer used.) * * @return {JSX.Element} The rendered DocumentBar component. */ @@ -56,7 +56,6 @@ export default function DocumentBar( props ) { documentTitle, isNotFound, isUnsyncedPattern, - templateIcon, templateTitle, onNavigateToPreviousEntityRecord, } = useSelect( ( select ) => { @@ -94,12 +93,6 @@ export default function DocumentBar( props ) { _postId ), isUnsyncedPattern: _document?.wp_pattern_sync_status === 'unsynced', - templateIcon: unlock( select( editorStore ) ).getPostIcon( - _postType, - { - area: _document?.area, - } - ), templateTitle: _templateInfo.title, onNavigateToPreviousEntityRecord: getEditorSettings().onNavigateToPreviousEntityRecord, @@ -114,7 +107,7 @@ export default function DocumentBar( props ) { const hasBackButton = !! onNavigateToPreviousEntityRecord; const entityTitle = isTemplate ? templateTitle : documentTitle; const title = props.title || entityTitle; - const icon = props.icon || templateIcon; + const icon = props.icon; const mountedRef = useRef( false ); useEffect( () => { @@ -183,13 +176,13 @@ export default function DocumentBar( props ) { isReducedMotion ? { duration: 0 } : undefined } > - + { icon && } { title ? decodeEntities( title ) : __( 'No title' ) } - { postTypeLabel && ( + { postTypeLabel && ! props.title && ( { ' · ' + decodeEntities( postTypeLabel ) } diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js index 848767f856ce7b..284c9772d7bd6f 100644 --- a/packages/editor/src/components/editor-interface/index.js +++ b/packages/editor/src/components/editor-interface/index.js @@ -58,7 +58,6 @@ export default function EditorInterface( { customSavePanel, forceDisableBlockTools, title, - icon, iframeProps, } ) { const { @@ -140,7 +139,6 @@ export default function EditorInterface( { customSaveButton={ customSaveButton } forceDisableBlockTools={ forceDisableBlockTools } title={ title } - icon={ icon } /> ) } diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index a838b95258ca6a..b1b8f2fc1ee32b 100644 --- a/packages/editor/src/components/header/index.js +++ b/packages/editor/src/components/header/index.js @@ -47,7 +47,6 @@ function Header( { forceDisableBlockTools, setEntitiesSavedStatesCallback, title, - icon, } ) { const zoomOutExperimentEnabled = window.__experimentalEnableZoomOutExperiment; @@ -121,7 +120,7 @@ function Header( { variants={ toolbarVariations } transition={ { type: 'tween' } } > - + ) } Date: Tue, 10 Sep 2024 11:45:39 +1000 Subject: [PATCH 03/11] Try fixing one of the e2e tests --- test/e2e/specs/site-editor/command-center.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/site-editor/command-center.spec.js b/test/e2e/specs/site-editor/command-center.spec.js index fce951ca767bed..5b049cda252a8b 100644 --- a/test/e2e/specs/site-editor/command-center.spec.js +++ b/test/e2e/specs/site-editor/command-center.spec.js @@ -47,7 +47,7 @@ test.describe( 'Site editor command palette', () => { page .getByRole( 'region', { name: 'Editor top bar' } ) .getByRole( 'heading', { level: 1 } ) - ).toHaveText( 'Index' ); + ).toContainText( 'Index' ); } ); test( 'Open the command palette and navigate to Customize CSS', async ( { From 58522d7af73936f349bd91d009fe5e494bd4a81e Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 10 Sep 2024 16:26:27 -0500 Subject: [PATCH 04/11] Remove IconType import and add typedef --- packages/editor/src/components/document-bar/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index be291d6be59250..f3fed618b8e9bd 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -9,7 +9,6 @@ import clsx from 'clsx'; import { __, isRTL } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { - IconType, Button, __experimentalText as Text, __unstableMotion as motion, @@ -30,6 +29,8 @@ import { decodeEntities } from '@wordpress/html-entities'; import { TEMPLATE_POST_TYPES, GLOBAL_POST_TYPES } from '../../store/constants'; import { store as editorStore } from '../../store'; +/** @typedef {import("@wordpress/components").IconType} IconType */ + const MotionButton = motion( Button ); /** From a9704165b9499d697e541ce60005a1ebbfb2f50a Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 10 Sep 2024 16:31:04 -0500 Subject: [PATCH 05/11] Adds font-weight to heading and uses darker grey for constrast --- packages/editor/src/components/document-bar/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index b48f5a9caa044c..52d3be4a503cd2 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -62,11 +62,12 @@ text-overflow: ellipsis; max-width: 70%; color: currentColor; + font-weight: 400; } } .editor-document-bar__shortcut { - color: $gray-700; + color: $gray-800; min-width: $grid-unit-30; display: none; @@ -90,5 +91,5 @@ } .editor-document-bar__post-type-label { - color: $gray-700; + color: $gray-800; } From 95ed714f611ed798a701808a16069773f17aad26 Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 10 Sep 2024 17:59:10 -0500 Subject: [PATCH 06/11] Adjusts title overflow so it dosen't apply to post type label --- .../src/components/document-bar/index.js | 11 ++--- .../src/components/document-bar/style.scss | 43 +++++++++---------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index f3fed618b8e9bd..904a877734cef9 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -179,13 +179,14 @@ export default function DocumentBar( props ) { > { icon && } - { title - ? decodeEntities( title ) - : __( 'No title' ) } - + + { title + ? decodeEntities( title ) + : __( 'No title' ) } + { postTypeLabel && ! props.title && ( - { ' · ' + decodeEntities( postTypeLabel ) } + { '· ' + decodeEntities( postTypeLabel ) } ) } diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 52d3be4a503cd2..bed0073f6f7905 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -34,38 +34,41 @@ } .editor-document-bar__title { - flex: 1; overflow: hidden; color: $gray-900; - gap: $grid-unit-05; - display: flex; - justify-content: center; - align-items: center; + margin: 0 auto; // Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned. @include break-medium() { padding-left: $grid-unit-30; } - .editor-document-bar.is-global & { - color: var(--wp-block-synced-color); - } - - .block-editor-block-icon { - min-width: $grid-unit-30; - flex-shrink: 0; - } - h1 { + display: flex; + align-items: center; + justify-content: center; white-space: nowrap; overflow: hidden; - text-overflow: ellipsis; - max-width: 70%; - color: currentColor; - font-weight: 400; } } +.editor-document-bar__post-title { + color: currentColor; + font-weight: 400; + max-width: 64%; + overflow: hidden; + text-overflow: ellipsis; + + .editor-document-bar.is-global & { + color: var(--wp-block-synced-color); + } +} + +.editor-document-bar__post-type-label { + color: $gray-800; + padding-left: $grid-unit-05; +} + .editor-document-bar__shortcut { color: $gray-800; min-width: $grid-unit-30; @@ -89,7 +92,3 @@ background-color: transparent; } } - -.editor-document-bar__post-type-label { - color: $gray-800; -} From 539f947dcb9bc646d75ffa1f69ae8ce0269a7fff Mon Sep 17 00:00:00 2001 From: Grant Kinney Date: Tue, 10 Sep 2024 18:19:39 -0500 Subject: [PATCH 07/11] Moves font weight to h1 --- packages/editor/src/components/document-bar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index bed0073f6f7905..bd85ab0db05152 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -47,6 +47,7 @@ display: flex; align-items: center; justify-content: center; + font-weight: 400; white-space: nowrap; overflow: hidden; } @@ -54,7 +55,6 @@ .editor-document-bar__post-title { color: currentColor; - font-weight: 400; max-width: 64%; overflow: hidden; text-overflow: ellipsis; From 3e1532447054a8678a6d5dae27358152dac9b56f Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 12 Sep 2024 14:13:49 +1000 Subject: [PATCH 08/11] Try fixing more e2e tests --- test/e2e/specs/site-editor/template-registration.spec.js | 4 ++-- test/e2e/specs/site-editor/title.spec.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index ba9667358b3142..90e56645813c30 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -108,7 +108,7 @@ test.describe( 'Block template registration', () => { } ); // Swap template. - await page.getByRole( 'button', { name: 'Post' } ).click(); + await page.getByRole( 'button', { name: 'Post', exact: true } ).click(); await page.getByRole( 'button', { name: 'Template options' } ).click(); await page.getByRole( 'menuitem', { name: 'Swap template' } ).click(); await page.getByText( 'Plugin Template' ).click(); @@ -135,7 +135,7 @@ test.describe( 'Block template registration', () => { } ); // Swap template. - await page.getByRole( 'button', { name: 'Post' } ).click(); + await page.getByRole( 'button', { name: 'Post', exact: true } ).click(); await page.getByRole( 'button', { name: 'Template options' } ).click(); await page.getByRole( 'menuitem', { name: 'Swap template' } ).click(); await page.getByText( 'Custom', { exact: true } ).click(); diff --git a/test/e2e/specs/site-editor/title.spec.js b/test/e2e/specs/site-editor/title.spec.js index 3224c519f4f9e8..8f6c5252c9f41b 100644 --- a/test/e2e/specs/site-editor/title.spec.js +++ b/test/e2e/specs/site-editor/title.spec.js @@ -25,7 +25,7 @@ test.describe( 'Site editor title', () => { const title = page .getByRole( 'region', { name: 'Editor top bar' } ) .getByRole( 'heading', { - name: 'Editing template: Index', + name: 'Index', } ); await expect( title ).toBeVisible(); @@ -44,7 +44,7 @@ test.describe( 'Site editor title', () => { const title = page .getByRole( 'region', { name: 'Editor top bar' } ) .getByRole( 'heading', { - name: 'Editing template part: header', + name: 'header', } ); await expect( title ).toBeVisible(); From 257f1fd715d0902fc9d41915ffc3eba9fa3ace26 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 12 Sep 2024 14:18:56 +1000 Subject: [PATCH 09/11] Fix another e2e --- test/e2e/specs/editor/various/post-editor-template-mode.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 d46062eded07be..981f8ccbbd5d38 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 @@ -196,7 +196,7 @@ class PostEditorTemplateMode { ); const title = this.editorTopBar.getByRole( 'heading', { - name: 'Editing template: Single Entries', + name: 'Single Entries', } ); await expect( title ).toBeVisible(); From b01b4833e518819b08c743a600c522fb5f06cd90 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 13 Sep 2024 15:48:46 +1000 Subject: [PATCH 10/11] Add fix for mid screensizes when Back button is present --- .../editor/src/components/document-bar/style.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index bd85ab0db05152..5bc1193b654430 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -25,6 +25,14 @@ background: $gray-200; } } + + &.has-back-button { + @media screen and (min-width: #{ ($break-medium) }) and (max-width: $break-large) { + .editor-document-bar__post-type-label { + display: none; + } + } + } } .editor-document-bar__command { @@ -37,6 +45,7 @@ overflow: hidden; color: $gray-900; margin: 0 auto; + max-width: 70%; // Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned. @include break-medium() { @@ -55,7 +64,7 @@ .editor-document-bar__post-title { color: currentColor; - max-width: 64%; + flex: 1; overflow: hidden; text-overflow: ellipsis; @@ -65,6 +74,7 @@ } .editor-document-bar__post-type-label { + flex: 0; color: $gray-800; padding-left: $grid-unit-05; } From 6f9ae9a1edd00ac6821e7befb9291c802c1cd0ba Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Mon, 16 Sep 2024 15:01:58 +1000 Subject: [PATCH 11/11] Hide post type label on small screen sizes --- packages/editor/src/components/document-bar/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 5bc1193b654430..3e5fbf5f4b1ae1 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -27,7 +27,7 @@ } &.has-back-button { - @media screen and (min-width: #{ ($break-medium) }) and (max-width: $break-large) { + @media screen and (min-width: #{ ($break-medium) }) and (max-width: #{ ($break-large) }) { .editor-document-bar__post-type-label { display: none; } @@ -77,6 +77,10 @@ flex: 0; color: $gray-800; padding-left: $grid-unit-05; + + @media screen and (max-width: #{ ($break-small) }) { + display: none; + } } .editor-document-bar__shortcut {