From 447a6de8eb79f307921a22fb8814cc01affded46 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 20 Nov 2023 14:05:51 +0100 Subject: [PATCH] Extract a PostPanelRow component from the different sidebar panels (#56238) --- .../sidebar/post-pending-status/index.js | 13 +++++-- .../components/sidebar/post-status/index.js | 2 +- .../components/sidebar/post-sticky/index.js | 13 +++++-- .../components/sidebar/post-template/index.js | 16 +++++---- .../sidebar/post-template/style.scss | 15 -------- .../sidebar/post-visibility/index.js | 17 +++++++--- .../sidebar/post-visibility/style.scss | 11 ------ .../page-panels/edit-template.js | 18 ++++------ .../page-panels/page-status.js | 12 +++---- .../sidebar-edit-mode/page-panels/style.scss | 28 +++++---------- .../src/components/post-panel-row/index.js | 34 +++++++++++++++++++ .../src/components/post-panel-row/style.scss | 15 ++++++++ .../src/components/post-schedule/panel.js | 15 +++----- .../src/components/post-schedule/style.scss | 13 +------ .../src/components/post-sync-status/index.js | 9 +++-- .../components/post-sync-status/style.scss | 20 ++--------- .../editor/src/components/post-url/panel.js | 12 +++---- .../editor/src/components/post-url/style.scss | 13 +------ packages/editor/src/private-apis.js | 2 ++ packages/editor/src/style.scss | 1 + 20 files changed, 133 insertions(+), 146 deletions(-) create mode 100644 packages/editor/src/components/post-panel-row/index.js create mode 100644 packages/editor/src/components/post-panel-row/style.scss 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 index 739aff6034b50..de1f02b00d746 100644 --- a/packages/edit-post/src/components/sidebar/post-pending-status/index.js +++ b/packages/edit-post/src/components/sidebar/post-pending-status/index.js @@ -1,18 +1,25 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; 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 ( - + - + ); } diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js index c8c5a20adcfab..ba6afa2ae9f27 100644 --- a/packages/edit-post/src/components/sidebar/post-status/index.js +++ b/packages/edit-post/src/components/sidebar/post-status/index.js @@ -64,12 +64,12 @@ export default function PostStatus() { + - { fills } - + - + ); } diff --git a/packages/edit-post/src/components/sidebar/post-template/index.js b/packages/edit-post/src/components/sidebar/post-template/index.js index 88809294f17db..fa1579fa3a82a 100644 --- a/packages/edit-post/src/components/sidebar/post-template/index.js +++ b/packages/edit-post/src/components/sidebar/post-template/index.js @@ -2,10 +2,13 @@ * WordPress dependencies */ import { useState, useMemo } from '@wordpress/element'; -import { PanelRow, Dropdown, Button } from '@wordpress/components'; +import { Dropdown, Button } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; -import { store as editorStore } from '@wordpress/editor'; +import { + store as editorStore, + privateApis as editorPrivateApis, +} from '@wordpress/editor'; import { store as coreStore } from '@wordpress/core-data'; /** @@ -13,6 +16,9 @@ import { store as coreStore } from '@wordpress/core-data'; */ import PostTemplateForm from './form'; import { store as editPostStore } from '../../../store'; +import { unlock } from '../../../lock-unlock'; + +const { PostPanelRow } = unlock( editorPrivateApis ); export default function PostTemplate() { // Use internal state instead of a ref to make sure that the component @@ -53,11 +59,9 @@ export default function PostTemplate() { } return ( - - { __( 'Template' ) } + ( @@ -70,7 +74,7 @@ export default function PostTemplate() { ) } /> - + ); } diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss index 2746fc2eeec4f..91f82d4d0f9f3 100644 --- a/packages/edit-post/src/components/sidebar/post-template/style.scss +++ b/packages/edit-post/src/components/sidebar/post-template/style.scss @@ -1,18 +1,3 @@ -.edit-post-post-template { - width: 100%; - justify-content: flex-start; - - span { - display: block; - width: 30%; - margin-right: 8px; - } -} - -.edit-post-post-template__dropdown { - max-width: 55%; -} - .components-button.edit-post-post-template__toggle { display: inline-block; width: 100%; diff --git a/packages/edit-post/src/components/sidebar/post-visibility/index.js b/packages/edit-post/src/components/sidebar/post-visibility/index.js index 080737c431f1e..9a70d636388af 100644 --- a/packages/edit-post/src/components/sidebar/post-visibility/index.js +++ b/packages/edit-post/src/components/sidebar/post-visibility/index.js @@ -2,15 +2,23 @@ * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { PanelRow, Dropdown, Button } from '@wordpress/components'; +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. @@ -29,11 +37,10 @@ export function PostVisibility() { return ( ( - - { __( 'Visibility' ) } { ! canEdit && ( @@ -55,7 +62,7 @@ export function 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 index b3876c8403aa0..0dd9824e5bde7 100644 --- a/packages/edit-post/src/components/sidebar/post-visibility/style.scss +++ b/packages/edit-post/src/components/sidebar/post-visibility/style.scss @@ -1,14 +1,3 @@ -.edit-post-post-visibility { - width: 100%; - justify-content: flex-start; - - span { - display: block; - width: 30%; - margin-right: 8px; - } -} - .edit-post-post-visibility__dialog .editor-post-visibility { // sidebar width - popover padding - form margin min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20; diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js index 1ee382420a7d9..4bc81b8c7a292 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/edit-template.js @@ -3,17 +3,12 @@ */ import { useSelect, useDispatch } from '@wordpress/data'; import { decodeEntities } from '@wordpress/html-entities'; -import { - DropdownMenu, - MenuGroup, - MenuItem, - __experimentalHStack as HStack, - __experimentalText as Text, -} from '@wordpress/components'; +import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; import { check } from '@wordpress/icons'; import { store as blockEditorStore } from '@wordpress/block-editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies @@ -24,6 +19,8 @@ import ResetDefaultTemplate from './reset-default-template'; import { unlock } from '../../../lock-unlock'; import { PAGE_CONTENT_BLOCK_TYPES } from '../../../utils/constants'; +const { PostPanelRow } = unlock( editorPrivateApis ); + const POPOVER_PROPS = { className: 'edit-site-page-panels-edit-template__dropdown', placement: 'bottom-start', @@ -71,10 +68,7 @@ export default function EditTemplate() { } return ( - - - { __( 'Template' ) } - + ) } - + ); } diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js index f80ed4d3fe820..1d74b09db773e 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-status.js @@ -6,7 +6,6 @@ import { ToggleControl, Dropdown, __experimentalText as Text, - __experimentalHStack as HStack, __experimentalVStack as VStack, TextControl, RadioControl, @@ -19,11 +18,15 @@ import { store as coreStore } from '@wordpress/core-data'; import { store as noticesStore } from '@wordpress/notices'; import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor'; import { useInstanceId } from '@wordpress/compose'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ import StatusLabel from '../../sidebar-navigation-screen-page/status-label'; +import { unlock } from '../../../lock-unlock'; + +const { PostPanelRow } = unlock( editorPrivateApis ); const STATUS_OPTIONS = [ { @@ -159,10 +162,7 @@ export default function PageStatus( { }; return ( - - - { __( 'Status' ) } - + ) } /> - + ); } diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss index acaf5cbfe35dd..f3da54c244bd1 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/style.scss @@ -59,25 +59,15 @@ } } -.edit-site-summary-field { - .components-dropdown { - width: 70%; - } - - .edit-site-summary-field__trigger { - max-width: 100%; - - // Truncate - display: block; - text-align: left; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .edit-site-summary-field__label { - width: 30%; - } +.edit-site-summary-field__trigger { + max-width: 100%; + + // Truncate + display: block; + text-align: left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .edit-site-page-panels-edit-template__dropdown { diff --git a/packages/editor/src/components/post-panel-row/index.js b/packages/editor/src/components/post-panel-row/index.js new file mode 100644 index 0000000000000..a746486ea25f6 --- /dev/null +++ b/packages/editor/src/components/post-panel-row/index.js @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { __experimentalHStack as HStack } from '@wordpress/components'; +import { forwardRef } from '@wordpress/element'; + +const PostPanelRow = forwardRef( ( { className, label, children }, ref ) => { + return ( + + { label ? ( + <> +
+ { label } +
+
+ { children } +
+ + ) : ( + children + ) } + + ); +} ); + +export default PostPanelRow; diff --git a/packages/editor/src/components/post-panel-row/style.scss b/packages/editor/src/components/post-panel-row/style.scss new file mode 100644 index 0000000000000..b21679e9b9697 --- /dev/null +++ b/packages/editor/src/components/post-panel-row/style.scss @@ -0,0 +1,15 @@ +.editor-post-panel__row { + width: 100%; + justify-content: flex-start; + align-items: flex-start; + min-height: $button-size; +} + +.editor-post-panel__row-label { + width: 30%; + flex-shrink: 0; +} + +.editor-post-panel__row-control { + flex-grow: 1; +} diff --git a/packages/editor/src/components/post-schedule/panel.js b/packages/editor/src/components/post-schedule/panel.js index 834e7237e0e94..2e725a06bc9fd 100644 --- a/packages/editor/src/components/post-schedule/panel.js +++ b/packages/editor/src/components/post-schedule/panel.js @@ -1,11 +1,7 @@ /** * WordPress dependencies */ -import { - Button, - Dropdown, - __experimentalHStack as HStack, -} from '@wordpress/components'; +import { Button, Dropdown } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { useState, useMemo } from '@wordpress/element'; @@ -15,6 +11,7 @@ import { useState, useMemo } from '@wordpress/element'; import PostScheduleCheck from './check'; import PostScheduleForm from './index'; import { usePostScheduleLabel } from './label'; +import PostPanelRow from '../post-panel-row'; export default function PostSchedulePanel() { const [ popoverAnchor, setPopoverAnchor ] = useState( null ); @@ -35,11 +32,7 @@ export default function PostSchedulePanel() { return ( - - { __( 'Publish' ) } + ) } /> - + ); } diff --git a/packages/editor/src/components/post-schedule/style.scss b/packages/editor/src/components/post-schedule/style.scss index d70a9e9576fbb..fb8503962f7cd 100644 --- a/packages/editor/src/components/post-schedule/style.scss +++ b/packages/editor/src/components/post-schedule/style.scss @@ -1,16 +1,5 @@ -.editor-post-schedule__panel { - width: 100%; - justify-content: flex-start; - align-items: flex-start; - - span { - display: block; - width: 30%; - } -} - .editor-post-schedule__panel-dropdown { - width: 70%; + width: 100%; } .editor-post-schedule__dialog { diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js index abc45146c36af..c1a317e8e1812 100644 --- a/packages/editor/src/components/post-sync-status/index.js +++ b/packages/editor/src/components/post-sync-status/index.js @@ -4,7 +4,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __, _x } from '@wordpress/i18n'; import { - PanelRow, Modal, Button, __experimentalHStack as HStack, @@ -17,6 +16,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ +import PostPanelRow from '../post-panel-row'; import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; @@ -44,14 +44,13 @@ export default function PostSyncStatus() { } return ( - - { __( 'Sync status' ) } -
+ +
{ syncStatus === 'unsynced' ? __( 'Not synced' ) : __( 'Fully synced' ) }
- + ); } diff --git a/packages/editor/src/components/post-sync-status/style.scss b/packages/editor/src/components/post-sync-status/style.scss index e18eead94ac83..d5ee21cad8ee4 100644 --- a/packages/editor/src/components/post-sync-status/style.scss +++ b/packages/editor/src/components/post-sync-status/style.scss @@ -1,18 +1,4 @@ -.edit-post-sync-status { - width: 100%; - position: relative; - justify-content: flex-start; - align-items: flex-start; - - > span { - display: block; - width: 30%; - margin-right: 8px; - word-break: break-word; - } - - > div { - // Match padding on tertiary buttons for alignment. - padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15; - } +.editor-post-sync-status__value { + // Match padding on tertiary buttons for alignment. + padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15; } diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js index 1fddc7df9922c..4c4fc38d3e2df 100644 --- a/packages/editor/src/components/post-url/panel.js +++ b/packages/editor/src/components/post-url/panel.js @@ -2,11 +2,7 @@ * WordPress dependencies */ import { useMemo, useState } from '@wordpress/element'; -import { - __experimentalHStack as HStack, - Dropdown, - Button, -} from '@wordpress/components'; +import { Dropdown, Button } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; /** @@ -15,6 +11,7 @@ import { __, sprintf } from '@wordpress/i18n'; import PostURLCheck from './check'; import PostURL from './index'; import { usePostURLLabel } from './label'; +import PostPanelRow from '../post-panel-row'; export default function PostURLPanel() { // Use internal state instead of a ref to make sure that the component @@ -28,8 +25,7 @@ export default function PostURLPanel() { return ( - - { __( 'URL' ) } + ) } /> - + ); } diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss index dbc68d7eda77d..4a3e8e1b39c9f 100644 --- a/packages/editor/src/components/post-url/style.scss +++ b/packages/editor/src/components/post-url/style.scss @@ -1,16 +1,5 @@ -.editor-post-url__panel { - width: 100%; - justify-content: flex-start; - align-items: flex-start; - - span { - display: block; - width: 30%; - } -} - .editor-post-url__panel-dropdown { - width: 70%; + width: 100%; } .components-button.editor-post-url__panel-toggle { diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index b599278f872dd..a44720eb93ac8 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -5,11 +5,13 @@ import { ExperimentalEditorProvider } from './components/provider'; import { lock } from './lock-unlock'; import { EntitiesSavedStatesExtensible } from './components/entities-saved-states'; import useBlockEditorSettings from './components/provider/use-block-editor-settings'; +import PostPanelRow from './components/post-panel-row'; export const privateApis = {}; lock( privateApis, { ExperimentalEditorProvider, EntitiesSavedStatesExtensible, + PostPanelRow, // This is a temporary private API while we're updating the site editor to use EditorProvider. useBlockEditorSettings, diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index 5428bf5cb1f15..5861764ff8737 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -8,6 +8,7 @@ @import "./components/post-format/style.scss"; @import "./components/post-last-revision/style.scss"; @import "./components/post-locked-modal/style.scss"; +@import "./components/post-panel-row/style.scss"; @import "./components/post-publish-button/style.scss"; @import "./components/post-publish-panel/style.scss"; @import "./components/post-saved-state/style.scss";