diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 8d00c0e35cdfdc..344f73dd6fa043 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -45,7 +45,6 @@ import EditPostKeyboardShortcuts from '../keyboard-shortcuts'; import InitPatternModal from '../init-pattern-modal'; import BrowserURL from '../browser-url'; import Header from '../header'; -import SettingsSidebar from '../sidebar/settings-sidebar'; import MetaBoxes from '../meta-boxes'; import WelcomeGuide from '../welcome-guide'; import { store as editPostStore } from '../../store'; @@ -63,6 +62,7 @@ const { SavePublishPanels, InterfaceSkeleton, interfaceStore, + Sidebar, } = unlock( editorPrivateApis ); const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); @@ -161,6 +161,7 @@ function Layout( { initialPost } ) { hasHistory, hasBlockBreadcrumbs, blockEditorMode, + isEditingTemplate, } = useSelect( ( select ) => { const { get } = select( preferencesStore ); const { getEditorSettings, getPostTypeLabel } = select( editorStore ); @@ -198,6 +199,8 @@ function Layout( { initialPost } ) { hasBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ), blockEditorMode: select( blockEditorStore ).__unstableGetEditorMode(), + isEditingTemplate: + select( editorStore ).getCurrentPostType() === 'wp_template', }; }, [] ); @@ -372,7 +375,13 @@ function Layout( { initialPost } ) { - { ! isDistractionFree && } + { ! isDistractionFree && ( + + } + /> + ) } ); } diff --git a/packages/edit-post/src/components/sidebar/post-format/style.scss b/packages/edit-post/src/components/sidebar/post-format/style.scss deleted file mode 100644 index 53d68ea219743d..00000000000000 --- a/packages/edit-post/src/components/sidebar/post-format/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.edit-post-post-format { - display: flex; - flex-direction: column; - align-items: stretch; -} diff --git a/packages/edit-post/src/components/sidebar/post-pending-status/index.js b/packages/edit-post/src/components/sidebar/post-pending-status/index.js deleted file mode 100644 index de1f02b00d746b..00000000000000 --- a/packages/edit-post/src/components/sidebar/post-pending-status/index.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * WordPress dependencies - */ -import { - PostPendingStatus as PostPendingStatusForm, - PostPendingStatusCheck, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { PostPanelRow } = unlock( editorPrivateApis ); - -export function PostPendingStatus() { - return ( - - - - - - ); -} - -export default PostPendingStatus; diff --git a/packages/edit-post/src/components/sidebar/post-sticky/index.js b/packages/edit-post/src/components/sidebar/post-sticky/index.js deleted file mode 100644 index 1b31297a41294f..00000000000000 --- a/packages/edit-post/src/components/sidebar/post-sticky/index.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * WordPress dependencies - */ -import { - PostSticky as PostStickyForm, - PostStickyCheck, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { PostPanelRow } = unlock( editorPrivateApis ); - -export function PostSticky() { - return ( - - - - - - ); -} - -export default PostSticky; diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js deleted file mode 100644 index d77c7a6d82988c..00000000000000 --- a/packages/edit-post/src/components/sidebar/post-trash/index.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * WordPress dependencies - */ -import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor'; - -export default function PostTrash() { - return ( - - - - ); -} diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js deleted file mode 100644 index 8bffb1b563e1ef..00000000000000 --- a/packages/edit-post/src/components/sidebar/post-visibility/index.js +++ /dev/null @@ -1,88 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { Dropdown, Button } from '@wordpress/components'; -import { - PostVisibility as PostVisibilityForm, - PostVisibilityLabel, - PostVisibilityCheck, - usePostVisibilityLabel, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; -import { useMemo, useState } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { PostPanelRow } = unlock( editorPrivateApis ); - -export function PostVisibility() { - // Use internal state instead of a ref to make sure that the component - // re-renders when the popover's anchor updates. - const [ popoverAnchor, setPopoverAnchor ] = useState( null ); - // Memoize popoverProps to avoid returning a new object every time. - const popoverProps = useMemo( - () => ( { - // Anchor the popover to the middle of the entire row so that it doesn't - // move around when the label changes. - anchor: popoverAnchor, - placement: 'bottom-end', - } ), - [ popoverAnchor ] - ); - - return ( - ( - - { ! canEdit && ( - - - - ) } - { canEdit && ( - ( - - ) } - renderContent={ ( { onClose } ) => ( - - ) } - /> - ) } - - ) } - /> - ); -} - -function PostVisibilityToggle( { isOpen, onClick } ) { - const label = usePostVisibilityLabel(); - return ( - - ); -} - -export default PostVisibility; diff --git a/packages/edit-post/src/components/sidebar/post-visibility/style.scss b/packages/edit-post/src/components/sidebar/post-visibility/style.scss deleted file mode 100644 index 0dd9824e5bde76..00000000000000 --- a/packages/edit-post/src/components/sidebar/post-visibility/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.edit-post-post-visibility__dialog .editor-post-visibility { - // sidebar width - popover padding - form margin - min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20; - margin: $grid-unit-10; -} diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index f477bef7bbffd3..be959f2d174e83 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -2,10 +2,6 @@ @import "./components/header/fullscreen-mode-close/style.scss"; @import "./components/layout/style.scss"; @import "./components/meta-boxes/meta-boxes-area/style.scss"; -@import "./components/sidebar/style.scss"; -@import "./components/sidebar/post-format/style.scss"; -@import "./components/sidebar/post-slug/style.scss"; -@import "./components/sidebar/post-visibility/style.scss"; @import "./components/text-editor/style.scss"; @import "./components/visual-editor/style.scss"; @import "./components/welcome-guide/style.scss"; diff --git a/packages/edit-post/src/components/sidebar/post-format/index.js b/packages/editor/src/components/post-format/panel.js similarity index 60% rename from packages/edit-post/src/components/sidebar/post-format/index.js rename to packages/editor/src/components/post-format/panel.js index 5127fa0930f3fc..cbd065183eefab 100644 --- a/packages/edit-post/src/components/sidebar/post-format/index.js +++ b/packages/editor/src/components/post-format/panel.js @@ -2,15 +2,17 @@ * WordPress dependencies */ import { PanelRow } from '@wordpress/components'; -import { - PostFormat as PostFormatForm, - PostFormatCheck, -} from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import PostFormatForm from './'; +import PostFormatCheck from './check'; export function PostFormat() { return ( - + diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss index 09fb0f11b9f949..135ee7f3579029 100644 --- a/packages/editor/src/components/post-format/style.scss +++ b/packages/editor/src/components/post-format/style.scss @@ -1,3 +1,9 @@ [class].editor-post-format__suggestion { margin: $grid-unit-05 0 0 0; } + +.editor-post-format__panel { + display: flex; + flex-direction: column; + align-items: stretch; +} diff --git a/packages/edit-post/src/components/sidebar/post-slug/index.js b/packages/editor/src/components/post-slug/panel.js similarity index 61% rename from packages/edit-post/src/components/sidebar/post-slug/index.js rename to packages/editor/src/components/post-slug/panel.js index 8b52f94bd33f5d..6ab97a28b251c3 100644 --- a/packages/edit-post/src/components/sidebar/post-slug/index.js +++ b/packages/editor/src/components/post-slug/panel.js @@ -2,12 +2,17 @@ * WordPress dependencies */ import { PanelRow } from '@wordpress/components'; -import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import PostSlugForm from './'; +import PostSlugCheck from './check'; export function PostSlug() { return ( - + diff --git a/packages/edit-post/src/components/sidebar/post-slug/style.scss b/packages/editor/src/components/post-slug/style.scss similarity index 74% rename from packages/edit-post/src/components/sidebar/post-slug/style.scss rename to packages/editor/src/components/post-slug/style.scss index 067dfcb08d6f06..551450582128e0 100644 --- a/packages/edit-post/src/components/sidebar/post-slug/style.scss +++ b/packages/editor/src/components/post-slug/style.scss @@ -1,4 +1,4 @@ -.edit-post-post-slug { +.editor-post-slug { display: flex; flex-direction: column; align-items: stretch; diff --git a/packages/editor/src/components/post-sticky/panel.js b/packages/editor/src/components/post-sticky/panel.js new file mode 100644 index 00000000000000..b5ede0c1ab8825 --- /dev/null +++ b/packages/editor/src/components/post-sticky/panel.js @@ -0,0 +1,18 @@ +/** + * Internal dependencies + */ +import PostPanelRow from '../post-panel-row'; +import PostStickyForm from './'; +import PostStickyCheck from './check'; + +export function PostStickyPanel() { + return ( + + + + + + ); +} + +export default PostStickyPanel; diff --git a/packages/editor/src/components/post-trash/panel.js b/packages/editor/src/components/post-trash/panel.js new file mode 100644 index 00000000000000..9111c048eb60b6 --- /dev/null +++ b/packages/editor/src/components/post-trash/panel.js @@ -0,0 +1,13 @@ +/** + * Internal dependencies + */ +import PostTrashCheck from './check'; +import PostTrashLink from './'; + +export default function PostTrashPanel() { + return ( + + + + ); +} diff --git a/packages/editor/src/components/sidebar/constants.js b/packages/editor/src/components/sidebar/constants.js new file mode 100644 index 00000000000000..be660c21692390 --- /dev/null +++ b/packages/editor/src/components/sidebar/constants.js @@ -0,0 +1,4 @@ +export const sidebars = { + document: 'edit-post/document', + block: 'edit-post/block', +}; diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/editor/src/components/sidebar/header.js similarity index 82% rename from packages/edit-post/src/components/sidebar/settings-header/index.js rename to packages/editor/src/components/sidebar/header.js index 244e21b1acd432..fc4d44ba9e2958 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ b/packages/editor/src/components/sidebar/header.js @@ -5,17 +5,17 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; import { forwardRef } from '@wordpress/element'; -import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies */ -import { unlock } from '../../../lock-unlock'; -import { sidebars } from '../settings-sidebar'; +import { store as editorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; +import { sidebars } from './constants'; const { Tabs } = unlock( componentsPrivateApis ); -const SettingsHeader = ( _, ref ) => { +const SidebarHeader = ( _, ref ) => { const { documentLabel } = useSelect( ( select ) => { const { getPostTypeLabel } = select( editorStore ); @@ -46,4 +46,4 @@ const SettingsHeader = ( _, ref ) => { ); }; -export default forwardRef( SettingsHeader ); +export default forwardRef( SidebarHeader ); diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/editor/src/components/sidebar/index.js similarity index 80% rename from packages/edit-post/src/components/sidebar/settings-sidebar/index.js rename to packages/editor/src/components/sidebar/index.js index fd5b136ba461d6..4aa4d03569e116 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/editor/src/components/sidebar/index.js @@ -16,45 +16,43 @@ import { import { isRTL, __, sprintf } from '@wordpress/i18n'; import { drawerLeft, drawerRight } from '@wordpress/icons'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; -import { - store as editorStore, - PageAttributesPanel, - PluginDocumentSettingPanel, - PluginSidebar, - PostDiscussionPanel, - PostLastRevisionPanel, - PostTaxonomiesPanel, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; import { addQueryArgs } from '@wordpress/url'; import { store as noticesStore } from '@wordpress/notices'; +import { privateApis as componentsPrivateApis } from '@wordpress/components'; +import { store as interfaceStore } from '@wordpress/interface'; /** * Internal dependencies */ -import SettingsHeader from '../settings-header'; -import PostStatus from '../post-status'; -import MetaBoxes from '../../meta-boxes'; -import { store as editPostStore } from '../../../store'; -import { privateApis as componentsPrivateApis } from '@wordpress/components'; -import { unlock } from '../../../lock-unlock'; +import PageAttributesPanel from '../page-attributes/panel'; +import PatternOverridesPanel from '../pattern-overrides-panel'; +import PluginDocumentSettingPanel from '../plugin-document-setting-panel'; +import PluginSidebar from '../plugin-sidebar'; +import PostActions from '../post-actions'; +import PostCardPanel from '../post-card-panel'; +import PostDiscussionPanel from '../post-discussion/panel'; +import PostLastRevisionPanel from '../post-last-revision/panel'; +import PostSummary from './post-summary'; +import PostTaxonomiesPanel from '../post-taxonomies/panel'; +import SidebarHeader from './header'; +import useAutoSwitchEditorSidebars from '../provider/use-auto-switch-editor-sidebars'; +import { sidebars } from './constants'; +import { unlock } from '../../lock-unlock'; +import { store as editorStore } from '../../store'; -const { PostCardPanel, PostActions, interfaceStore } = - unlock( editorPrivateApis ); const { Tabs } = unlock( componentsPrivateApis ); -const { PatternOverridesPanel, useAutoSwitchEditorSidebars } = - unlock( editorPrivateApis ); const SIDEBAR_ACTIVE_BY_DEFAULT = Platform.select( { web: true, native: false, } ); -export const sidebars = { - document: 'edit-post/document', - block: 'edit-post/block', -}; -const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => { +const SidebarContent = ( { + tabName, + keyboardShortcut, + isEditingTemplate, + extraPanels, +} ) => { const tabListRef = useRef( null ); // Because `PluginSidebar` renders a `ComplementaryArea`, we // need to forward the `Tabs` context so it can be passed through the @@ -143,15 +141,15 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => { identifier={ tabName } header={ - + } closeLabel={ __( 'Close Settings' ) } // This classname is added so we can apply a corrective negative // margin to the panel. // see https://github.com/WordPress/gutenberg/pull/55360#pullrequestreview-1737671049 - className="edit-post-sidebar__panel" - headerClassName="edit-post-sidebar__panel-tabs" + className="editor-sidebar__panel" + headerClassName="editor-sidebar__panel-tabs" /* translators: button label text should, if possible, be under 16 characters. */ title={ __( 'Settings' ) } toggleShortcut={ keyboardShortcut } @@ -167,14 +165,14 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => { /> } /> - { ! isEditingTemplate && } + { ! isEditingTemplate && } - { ! isEditingTemplate && } + { extraPanels } @@ -184,7 +182,7 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => { ); }; -const SettingsSidebar = () => { +const Sidebar = ( { extraPanels } ) => { useAutoSwitchEditorSidebars(); const { tabName, keyboardShortcut, isEditingTemplate } = useSelect( ( select ) => { @@ -218,15 +216,15 @@ const SettingsSidebar = () => { [] ); - const { openGeneralSidebar } = useDispatch( editPostStore ); + const { enableComplementaryArea } = useDispatch( interfaceStore ); const onTabSelect = useCallback( ( newSelectedTabId ) => { if ( !! newSelectedTabId ) { - openGeneralSidebar( newSelectedTabId ); + enableComplementaryArea( 'core', newSelectedTabId ); } }, - [ openGeneralSidebar ] + [ enableComplementaryArea ] ); return ( @@ -239,9 +237,10 @@ const SettingsSidebar = () => { tabName={ tabName } keyboardShortcut={ keyboardShortcut } isEditingTemplate={ isEditingTemplate } + extraPanels={ extraPanels } /> ); }; -export default SettingsSidebar; +export default Sidebar; diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/editor/src/components/sidebar/post-summary.js similarity index 69% rename from packages/edit-post/src/components/sidebar/post-status/index.js rename to packages/editor/src/components/sidebar/post-summary.js index 99c202463162da..3ab5d5bab5c6ca 100644 --- a/packages/edit-post/src/components/sidebar/post-status/index.js +++ b/packages/editor/src/components/sidebar/post-summary.js @@ -8,40 +8,33 @@ import { PanelBody, } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; -import { - PluginPostStatusInfo, - PostAuthorPanel, - PostSchedulePanel, - PostSyncStatus, - PostURLPanel, - PostTemplatePanel, - PostFeaturedImagePanel, - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; /** * Internal dependencies */ -import PostTrash from '../post-trash'; -import PostSticky from '../post-sticky'; -import PostSlug from '../post-slug'; -import PostFormat from '../post-format'; -import { unlock } from '../../../lock-unlock'; - -const { - PostStatus: PostStatusPanel, - PrivatePostExcerptPanel, - PostContentInformation, - PostLastEditedPanel, -} = unlock( editorPrivateApis ); +import PluginPostStatusInfo from '../plugin-post-status-info'; +import PostAuthorPanel from '../post-author/panel'; +import PostContentInformation from '../post-content-information'; +import { PrivatePostExcerptPanel as PostExcerptPanel } from '../post-excerpt/panel'; +import PostFeaturedImagePanel from '../post-featured-image/panel'; +import PostFormatPanel from '../post-format/panel'; +import PostLastEditedPanel from '../post-last-edited-panel'; +import PostSchedulePanel from '../post-schedule/panel'; +import PostSlugPanel from '../post-slug/panel'; +import PostStatusPanel from '../post-status'; +import PostStickyPanel from '../post-sticky'; +import PostSyncStatus from '../post-sync-status'; +import PostTemplatePanel from '../post-template/panel'; +import PostTrashPanel from '../post-trash/panel'; +import PostURLPanel from '../post-url/panel'; +import { store as editorStore } from '../../store'; /** * Module Constants */ const PANEL_NAME = 'post-status'; -export default function PostStatus() { +export default function PostSummary() { const { isOpened, isRemoved, showPostContentPanels } = useSelect( ( select ) => { // We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do @@ -74,7 +67,6 @@ export default function PostStatus() { return ( toggleEditorPanelOpened( PANEL_NAME ) } @@ -91,7 +83,7 @@ export default function PostStatus() { - + @@ -108,9 +100,9 @@ export default function PostStatus() { - - - + + + { fills } - + ) } diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/editor/src/components/sidebar/style.scss similarity index 77% rename from packages/edit-post/src/components/sidebar/style.scss rename to packages/editor/src/components/sidebar/style.scss index 7a20cc5f0f54ff..000f4c6123766c 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/editor/src/components/sidebar/style.scss @@ -1,4 +1,4 @@ -.components-panel__header.edit-post-sidebar__panel-tabs { +.components-panel__header.editor-sidebar__panel-tabs { padding-left: 0; padding-right: $grid-unit-20; diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index cee1a734ca34c5..951cc4128badb8 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -29,6 +29,7 @@ import { PrivatePostExcerptPanel } from './components/post-excerpt/panel'; import SavePublishPanels from './components/save-publish-panels'; import PostContentInformation from './components/post-content-information'; import PostLastEditedPanel from './components/post-last-edited-panel'; +import Sidebar from './components/sidebar'; const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; @@ -54,6 +55,7 @@ lock( privateApis, { SavePublishPanels, PostContentInformation, PostLastEditedPanel, + Sidebar, // This is a temporary private API while we're updating the site editor to use EditorProvider. useAutoSwitchEditorSidebars, diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index e869bf2d68b363..b382fd82c583ae 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -27,6 +27,7 @@ @import "./components/post-publish-panel/style.scss"; @import "./components/post-saved-state/style.scss"; @import "./components/post-schedule/style.scss"; +@import "./components/post-slug/style.scss"; @import "./components/post-status/style.scss"; @import "./components/post-sync-status/style.scss"; @import "./components/post-taxonomies/style.scss"; @@ -39,5 +40,6 @@ @import "./components/preview-dropdown/style.scss"; @import "./components/save-publish-panels/style.scss"; @import "./components/start-page-options/style.scss"; +@import "./components/sidebar/style.scss"; @import "./components/table-of-contents/style.scss"; @import "./components/template-areas/style.scss"; diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index 7cbad41fa9118d..c15be5678a4460 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -24,7 +24,7 @@ top: 0; z-index: z-index(".interface-complementary-area .components-panel__header"); - &.edit-post-sidebar__panel-tabs { + &.editor-sidebar__panel-tabs { top: $panel-header-height; @include break-medium() { diff --git a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css index ce39beede024fa..484cdfebfbd9bc 100644 --- a/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css +++ b/packages/react-native-bridge/common/gutenberg-web-single-block/editor-style-overrides.css @@ -64,17 +64,17 @@ } /* Remove tabs from sidebar panel, leaving the \'x\' button */ -.edit-post-sidebar__panel-tabs { +.editor-sidebar__panel-tabs { display: none; } /* Remove \'(no-title)\' string from sidebar header */ -.edit-post-sidebar-header__title { +.editor-sidebar-header__title { display: none; } /* Move \'x\' close button to the end on sidebar header */ -.edit-post-sidebar-header__small { +.editor-sidebar-header__small { justify-content: flex-end; }