diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 048db51d88cee7..ec564399012291 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -306,6 +306,7 @@ _Parameters_ - _props_ `Object`: Component properties. - _props.className_ `[string]`: An optional class name added to the row. +- _props.label_ `[string]`: Optional label text. If specified, the row can be toggled by the user. - _props.children_ `WPElement`: Children to be rendered. _Returns_ diff --git a/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js b/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js index 0e79742f3048d6..02d4b1c9429598 100644 --- a/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js @@ -5,7 +5,15 @@ /** * WordPress dependencies */ -import { createSlotFill, PanelRow } from '@wordpress/components'; +import { + createSlotFill, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import PostStatusRow from '../post-status-row'; export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' ); @@ -16,6 +24,8 @@ export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' ); * * @param {Object} props Component properties. * @param {string} [props.className] An optional class name added to the row. + * @param {string} [props.label] Optional label text. If specified, the row + * can be toggled by the user. * @param {WPElement} props.children Children to be rendered. * * @example @@ -52,9 +62,15 @@ export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' ); * * @return {WPComponent} The component to be rendered. */ -const PluginPostStatusInfo = ( { children, className } ) => ( +const PluginPostStatusInfo = ( { children, className, label } ) => ( - { children } + { label ? ( + + { children } + + ) : ( + { children } + ) } ); diff --git a/packages/edit-post/src/components/sidebar/post-author/index.js b/packages/edit-post/src/components/sidebar/post-author/index.js index 8f5eca9aea46b4..632003c97c0a67 100644 --- a/packages/edit-post/src/components/sidebar/post-author/index.js +++ b/packages/edit-post/src/components/sidebar/post-author/index.js @@ -1,18 +1,23 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; import { PostAuthor as PostAuthorForm, PostAuthorCheck, } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; export function PostAuthor() { return ( - + true } + > - + ); } diff --git a/packages/edit-post/src/components/sidebar/post-summary/excerpt.js b/packages/edit-post/src/components/sidebar/post-excerpt/field.js similarity index 86% rename from packages/edit-post/src/components/sidebar/post-summary/excerpt.js rename to packages/edit-post/src/components/sidebar/post-excerpt/field.js index 6ce844b12f3d80..857b3e8132c541 100644 --- a/packages/edit-post/src/components/sidebar/post-summary/excerpt.js +++ b/packages/edit-post/src/components/sidebar/post-excerpt/field.js @@ -6,7 +6,7 @@ import { store as editorStore } from '@wordpress/editor'; import { PlainText } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; -export default function PostSummaryExcerpt() { +export default function PostExcerptField() { const excerpt = useSelect( ( select ) => select( editorStore ).getEditedPostAttribute( 'excerpt' ), [] @@ -17,7 +17,7 @@ export default function PostSummaryExcerpt() { return ( editPost( { excerpt: value } ) } diff --git a/packages/edit-post/src/components/sidebar/post-excerpt/index.js b/packages/edit-post/src/components/sidebar/post-excerpt/index.js new file mode 100644 index 00000000000000..338aad4bd07ee6 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-excerpt/index.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { PostTypeSupportCheck } from '@wordpress/editor'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import PostExcerptField from './field'; + +export default function PostExcerpt() { + return ( + <PostTypeSupportCheck supportKeys="excerpt"> + <ToolsPanelItem + className="edit-post-post-excerpt" + label={ __( 'Excerpt' ) } + hasValue={ () => true } + > + <PostExcerptField /> + </ToolsPanelItem> + </PostTypeSupportCheck> + ); +} diff --git a/packages/edit-post/src/components/sidebar/post-featured-image/index.js b/packages/edit-post/src/components/sidebar/post-featured-image/index.js index 2444fe21a832dc..5eaef7795c2b80 100644 --- a/packages/edit-post/src/components/sidebar/post-featured-image/index.js +++ b/packages/edit-post/src/components/sidebar/post-featured-image/index.js @@ -6,12 +6,20 @@ import { PostFeaturedImage as PostFeaturedImageForm, } from '@wordpress/editor'; import { MediaUploadCheck } from '@wordpress/block-editor'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; export default function PostFeaturedImage() { return ( <PostFeaturedImageCheck> <MediaUploadCheck> - <PostFeaturedImageForm className="edit-post-post-featured-image" /> + <ToolsPanelItem + className="edit-post-post-featured-image" + label={ __( 'Featured image' ) } + hasValue={ () => true } + > + <PostFeaturedImageForm /> + </ToolsPanelItem> </MediaUploadCheck> </PostFeaturedImageCheck> ); diff --git a/packages/edit-post/src/components/sidebar/post-format/index.js b/packages/edit-post/src/components/sidebar/post-format/index.js index 5127fa0930f3fc..d9ee588c722884 100644 --- a/packages/edit-post/src/components/sidebar/post-format/index.js +++ b/packages/edit-post/src/components/sidebar/post-format/index.js @@ -1,18 +1,22 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; import { PostFormat as PostFormatForm, PostFormatCheck, } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; export function PostFormat() { return ( <PostFormatCheck> - <PanelRow className="edit-post-post-format"> + <ToolsPanelItem + className="edit-post-post-format" + label={ __( 'Post format' ) } + > <PostFormatForm /> - </PanelRow> + </ToolsPanelItem> </PostFormatCheck> ); } 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 739aff6034b509..79743c43f59a01 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,22 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; +import { __experimentalToolsPanel as ToolsPanelItem } from '@wordpress/components'; import { PostPendingStatus as PostPendingStatusForm, PostPendingStatusCheck, } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; export function PostPendingStatus() { return ( <PostPendingStatusCheck> - <PanelRow> + <ToolsPanelItem + label={ __( 'Pending review' ) } + hasValue={ () => true } + > <PostPendingStatusForm /> - </PanelRow> + </ToolsPanelItem> </PostPendingStatusCheck> ); } diff --git a/packages/edit-post/src/components/sidebar/post-schedule/index.js b/packages/edit-post/src/components/sidebar/post-schedule/index.js index 7c9021894e26f3..640ede77d47fe8 100644 --- a/packages/edit-post/src/components/sidebar/post-schedule/index.js +++ b/packages/edit-post/src/components/sidebar/post-schedule/index.js @@ -2,7 +2,11 @@ * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { PanelRow, Dropdown, Button } from '@wordpress/components'; +import { + __experimentalToolsPanelItem as ToolsPanelItem, + Dropdown, + Button, +} from '@wordpress/components'; import { useRef } from '@wordpress/element'; import { PostSchedule as PostScheduleForm, @@ -14,7 +18,12 @@ export default function PostSchedule() { const anchorRef = useRef(); return ( <PostScheduleCheck> - <PanelRow className="edit-post-post-schedule" ref={ anchorRef }> + <ToolsPanelItem + ref={ anchorRef } + className="edit-post-post-schedule" + label={ __( 'Publish' ) } + hasValue={ () => true } + > <span>{ __( 'Publish' ) }</span> <Dropdown popoverProps={ { anchorRef } } @@ -30,7 +39,7 @@ export default function PostSchedule() { <PostScheduleForm onClose={ onClose } /> ) } /> - </PanelRow> + </ToolsPanelItem> </PostScheduleCheck> ); } diff --git a/packages/edit-post/src/components/sidebar/post-schedule/style.scss b/packages/edit-post/src/components/sidebar/post-schedule/style.scss index 8e251f47f58574..a80fe479fb5464 100644 --- a/packages/edit-post/src/components/sidebar/post-schedule/style.scss +++ b/packages/edit-post/src/components/sidebar/post-schedule/style.scss @@ -1,7 +1,9 @@ .edit-post-post-schedule { - width: 100%; - position: relative; + align-items: center; + display: flex; justify-content: flex-start; + position: relative; + width: 100%; span { display: block; diff --git a/packages/edit-post/src/components/sidebar/post-slug/index.js b/packages/edit-post/src/components/sidebar/post-slug/index.js index 8b52f94bd33f5d..79f877d81cede1 100644 --- a/packages/edit-post/src/components/sidebar/post-slug/index.js +++ b/packages/edit-post/src/components/sidebar/post-slug/index.js @@ -1,15 +1,20 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; export function PostSlug() { return ( <PostSlugCheck> - <PanelRow className="edit-post-post-slug"> + <ToolsPanelItem + className="edit-post-post-slug" + label={ __( 'Slug' ) } + hasValue={ () => true } + > <PostSlugForm /> - </PanelRow> + </ToolsPanelItem> </PostSlugCheck> ); } diff --git a/packages/edit-post/src/components/sidebar/post-status-row/index.js b/packages/edit-post/src/components/sidebar/post-status-row/index.js new file mode 100644 index 00000000000000..1d36581cc09dac --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-status-row/index.js @@ -0,0 +1,21 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Used inside of <PostStatus> as an alternative to <ToolsPanelItem> for when + * you want something to appear full width but don't want to give it a label + * that appears in the <ToolsPanel> dropdown. + * + * @param {Object} params + * @param {string} params.className + * @param {JSX.Element} params.children + */ +export default function PostStatusRow( { className, children } ) { + return ( + <div className={ classnames( 'edit-post-post-status-row', className ) }> + { children } + </div> + ); +} diff --git a/packages/edit-post/src/components/sidebar/post-status-row/style.scss b/packages/edit-post/src/components/sidebar/post-status-row/style.scss new file mode 100644 index 00000000000000..ece459547767e3 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-status-row/style.scss @@ -0,0 +1,3 @@ +.edit-post-post-status-row { + grid-column: 1 / -1; +} 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 7ba67358149eb2..dc704a38dfa227 100644 --- a/packages/edit-post/src/components/sidebar/post-status/index.js +++ b/packages/edit-post/src/components/sidebar/post-status/index.js @@ -2,15 +2,15 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody } from '@wordpress/components'; -import { withSelect, withDispatch } from '@wordpress/data'; -import { compose, ifCondition } from '@wordpress/compose'; +import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import PostFeaturedImage from '../post-featured-image'; -import PostSummary from '../post-summary'; +import PostTitle from '../post-title'; +import PostExcerpt from '../post-excerpt'; import PostVisibility from '../post-visibility'; import PostTrash from '../post-trash'; import PostSchedule from '../post-schedule'; @@ -29,19 +29,28 @@ import PostURL from '../post-url'; */ const PANEL_NAME = 'post-status'; -function PostStatus( { isOpened, onTogglePanel } ) { +export default function PostStatus() { + // We use isEditorPanelRemoved to hide the panel if it was programatically + // removed. We do not use isEditorPanelEnabled since this panel should not + // be disabled through the UI. + const isRemoved = useSelect( + ( select ) => + select( editPostStore ).isEditorPanelRemoved( PANEL_NAME ), + [] + ); + + if ( isRemoved ) { + return null; + } + return ( - <PanelBody - className="edit-post-post-status" - title={ __( 'Summary' ) } - opened={ isOpened } - onToggle={ onTogglePanel } - > + <ToolsPanel className="edit-post-post-status" label={ __( 'Summary' ) }> <PluginPostStatusInfo.Slot> { ( fills ) => ( <> <PostFeaturedImage /> - <PostSummary /> + <PostTitle /> + <PostExcerpt /> <PostVisibility /> <PostSchedule /> <PostURL /> @@ -56,27 +65,6 @@ function PostStatus( { isOpened, onTogglePanel } ) { </> ) } </PluginPostStatusInfo.Slot> - </PanelBody> + </ToolsPanel> ); } - -export default compose( [ - withSelect( ( select ) => { - // We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do - // not use isEditorPanelEnabled since this panel should not be disabled through the UI. - const { isEditorPanelRemoved, isEditorPanelOpened } = - select( editPostStore ); - return { - isRemoved: isEditorPanelRemoved( PANEL_NAME ), - isOpened: isEditorPanelOpened( PANEL_NAME ), - }; - } ), - ifCondition( ( { isRemoved } ) => ! isRemoved ), - withDispatch( ( dispatch ) => ( { - onTogglePanel() { - return dispatch( editPostStore ).toggleEditorPanelOpened( - PANEL_NAME - ); - }, - } ) ), -] )( PostStatus ); diff --git a/packages/edit-post/src/components/sidebar/post-status/style.scss b/packages/edit-post/src/components/sidebar/post-status/style.scss index a0d64858083f1a..d9d4833c3d56fd 100644 --- a/packages/edit-post/src/components/sidebar/post-status/style.scss +++ b/packages/edit-post/src/components/sidebar/post-status/style.scss @@ -1,7 +1,19 @@ -.edit-post-post-status { - // Counteract the 5px of bottom margin on .components-panel__body-title. - .edit-post-post-featured-image:first-of-type, - .edit-post-post-summary:first-of-type { - margin-top: -5px; +[class].edit-post-post-status { + row-gap: $grid-unit-20; + + > :nth-child(2):not(.edit-post-post-featured-image), + > .edit-post-post-title + :not(.edit-post-post-excerpt), + > .edit-post-post-excerpt + * { + margin-top: $grid-unit-20; + position: relative; + + &::before { + border-top: 1px solid $gray-200; + content: ""; + left: -$grid-unit-20; + position: absolute; + right: -$grid-unit-20; + top: -$grid-unit-20; + } } } diff --git a/packages/edit-post/src/components/sidebar/post-sticky/index.js b/packages/edit-post/src/components/sidebar/post-sticky/index.js index 971428fcd23181..49d00ae9b86045 100644 --- a/packages/edit-post/src/components/sidebar/post-sticky/index.js +++ b/packages/edit-post/src/components/sidebar/post-sticky/index.js @@ -1,18 +1,22 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; import { PostSticky as PostStickyForm, PostStickyCheck, } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; export function PostSticky() { return ( <PostStickyCheck> - <PanelRow> + <ToolsPanelItem + label={ __( 'Stick to top' ) } + hasValue={ () => true } + > <PostStickyForm /> - </PanelRow> + </ToolsPanelItem> </PostStickyCheck> ); } diff --git a/packages/edit-post/src/components/sidebar/post-summary/index.js b/packages/edit-post/src/components/sidebar/post-summary/index.js deleted file mode 100644 index 3d48169cae331c..00000000000000 --- a/packages/edit-post/src/components/sidebar/post-summary/index.js +++ /dev/null @@ -1,23 +0,0 @@ -/** - * WordPress dependencies - */ -import { usePostTypeSupportCheck } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import PostSummaryTitle from './title'; -import PostSummaryExcerpt from './excerpt'; - -export default function PostSummary() { - const hasPostTitle = usePostTypeSupportCheck( 'title' ); - const hasPostExcerpt = usePostTypeSupportCheck( 'excerpt' ); - return ( - ( hasPostTitle || hasPostExcerpt ) && ( - <div className="edit-post-post-summary"> - { hasPostTitle && <PostSummaryTitle /> } - { hasPostExcerpt && <PostSummaryExcerpt /> } - </div> - ) - ); -} diff --git a/packages/edit-post/src/components/sidebar/post-summary/style.scss b/packages/edit-post/src/components/sidebar/post-summary/style.scss deleted file mode 100644 index 8e806a4c3a978d..00000000000000 --- a/packages/edit-post/src/components/sidebar/post-summary/style.scss +++ /dev/null @@ -1,21 +0,0 @@ -.edit-post-post-summary { - border-bottom: $border-width solid $gray-200; - border-top: $border-width solid $gray-200; - margin-left: -$grid-unit-20; - margin-right: -$grid-unit-20; - padding: $grid-unit-10 $grid-unit-20 $grid-unit-20; - - .edit-post-post-featured-image + & { - margin-top: -1px; - } -} - -.edit-post-post-summary__title, -.edit-post-post-summary__excerpt { - margin-top: $grid-unit-10; -} - -.edit-post-post-summary__title { - font-size: 16px; - font-weight: 600; -} 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 cf80cd306574ae..581add2aa9eee2 100644 --- a/packages/edit-post/src/components/sidebar/post-template/index.js +++ b/packages/edit-post/src/components/sidebar/post-template/index.js @@ -2,7 +2,11 @@ * WordPress dependencies */ import { useRef } from '@wordpress/element'; -import { PanelRow, Dropdown, Button } from '@wordpress/components'; +import { + __experimentalToolsPanelItem as ToolsPanelItem, + Dropdown, + Button, +} from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; import { store as editorStore } from '@wordpress/editor'; @@ -41,7 +45,12 @@ export default function PostTemplate() { } return ( - <PanelRow className="edit-post-post-template" ref={ anchorRef }> + <ToolsPanelItem + ref={ anchorRef } + className="edit-post-post-template" + label={ __( 'Template' ) } + hasValue={ () => true } + > <span>{ __( 'Template' ) }</span> <Dropdown popoverProps={ { anchorRef } } @@ -58,7 +67,7 @@ export default function PostTemplate() { <PostTemplateForm onClose={ onClose } /> ) } /> - </PanelRow> + </ToolsPanelItem> ); } 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 0cff4fdd96c22e..78d35469dbb6d9 100644 --- a/packages/edit-post/src/components/sidebar/post-template/style.scss +++ b/packages/edit-post/src/components/sidebar/post-template/style.scss @@ -1,6 +1,8 @@ .edit-post-post-template { - width: 100%; + align-items: center; + display: flex; justify-content: flex-start; + width: 100%; span { display: block; diff --git a/packages/edit-post/src/components/sidebar/post-summary/title.js b/packages/edit-post/src/components/sidebar/post-title/field.js similarity index 90% rename from packages/edit-post/src/components/sidebar/post-summary/title.js rename to packages/edit-post/src/components/sidebar/post-title/field.js index 6efc25811187d5..c869408815b8fe 100644 --- a/packages/edit-post/src/components/sidebar/post-summary/title.js +++ b/packages/edit-post/src/components/sidebar/post-title/field.js @@ -7,7 +7,7 @@ import { PlainText } from '@wordpress/block-editor'; import { decodeEntities } from '@wordpress/html-entities'; import { __ } from '@wordpress/i18n'; -export default function PostSummaryTitle() { +export default function PostTitleField() { const { title, titlePlaceholder } = useSelect( ( select ) => ( { title: select( editorStore ).getEditedPostAttribute( 'title' ), @@ -22,7 +22,7 @@ export default function PostSummaryTitle() { return ( <PlainText __experimentalVersion={ 2 } - className="edit-post-post-summary__title" + className="edit-post-post-title__field" placeholder={ decodeEntities( titlePlaceholder ) || __( 'Add title' ) } diff --git a/packages/edit-post/src/components/sidebar/post-title/index.js b/packages/edit-post/src/components/sidebar/post-title/index.js new file mode 100644 index 00000000000000..053d6ac2d99be5 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-title/index.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { PostTypeSupportCheck } from '@wordpress/editor'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import PostTitleField from './field'; + +export default function PostTitle() { + return ( + <PostTypeSupportCheck supportKeys="title"> + <ToolsPanelItem + className="edit-post-post-title" + label={ __( 'Title' ) } + hasValue={ () => true } + > + <PostTitleField /> + </ToolsPanelItem> + </PostTypeSupportCheck> + ); +} diff --git a/packages/edit-post/src/components/sidebar/post-title/style.scss b/packages/edit-post/src/components/sidebar/post-title/style.scss new file mode 100644 index 00000000000000..35499241780bbc --- /dev/null +++ b/packages/edit-post/src/components/sidebar/post-title/style.scss @@ -0,0 +1,4 @@ +.edit-post-post-title__field { + font-size: 16px; + font-weight: 600; +} diff --git a/packages/edit-post/src/components/sidebar/post-trash/index.js b/packages/edit-post/src/components/sidebar/post-trash/index.js index a7094385c0265d..d1447d91a321cd 100644 --- a/packages/edit-post/src/components/sidebar/post-trash/index.js +++ b/packages/edit-post/src/components/sidebar/post-trash/index.js @@ -1,15 +1,19 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; +import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components'; import { PostTrash as PostTrashLink, PostTrashCheck } from '@wordpress/editor'; +import { __ } from '@wordpress/i18n'; export default function PostTrash() { return ( <PostTrashCheck> - <PanelRow> + <ToolsPanelItem + label={ __( 'Move to trash' ) } + hasValue={ () => true } + > <PostTrashLink /> - </PanelRow> + </ToolsPanelItem> </PostTrashCheck> ); } diff --git a/packages/edit-post/src/components/sidebar/post-url/index.js b/packages/edit-post/src/components/sidebar/post-url/index.js index 7bca993784a702..d89551c192c59c 100644 --- a/packages/edit-post/src/components/sidebar/post-url/index.js +++ b/packages/edit-post/src/components/sidebar/post-url/index.js @@ -2,7 +2,11 @@ * WordPress dependencies */ import { useRef } from '@wordpress/element'; -import { PanelRow, Dropdown, Button } from '@wordpress/components'; +import { + __experimentalToolsPanelItem as ToolsPanelItem, + Dropdown, + Button, +} from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { PostURLCheck, @@ -14,7 +18,12 @@ export default function PostURL() { const anchorRef = useRef(); return ( <PostURLCheck> - <PanelRow className="edit-post-post-url" ref={ anchorRef }> + <ToolsPanelItem + ref={ anchorRef } + className="edit-post-post-url" + label={ __( 'URL' ) } + hasValue={ () => true } + > <span>{ __( 'URL' ) }</span> <Dropdown popoverProps={ { anchorRef } } @@ -28,7 +37,7 @@ export default function PostURL() { <PostURLForm onClose={ onClose } /> ) } /> - </PanelRow> + </ToolsPanelItem> </PostURLCheck> ); } diff --git a/packages/edit-post/src/components/sidebar/post-url/style.scss b/packages/edit-post/src/components/sidebar/post-url/style.scss index dbe6d983efc64e..87d313b48f0d6f 100644 --- a/packages/edit-post/src/components/sidebar/post-url/style.scss +++ b/packages/edit-post/src/components/sidebar/post-url/style.scss @@ -1,6 +1,8 @@ .edit-post-post-url { - width: 100%; + align-items: center; + display: flex; justify-content: flex-start; + width: 100%; span { display: block; 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 382d8f810596ee..850830b4376e75 100644 --- a/packages/edit-post/src/components/sidebar/post-visibility/index.js +++ b/packages/edit-post/src/components/sidebar/post-visibility/index.js @@ -2,7 +2,11 @@ * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { PanelRow, Dropdown, Button } from '@wordpress/components'; +import { + __experimentalToolsPanelItem as ToolsPanelItem, + Dropdown, + Button, +} from '@wordpress/components'; import { PostVisibility as PostVisibilityForm, PostVisibilityLabel, @@ -12,11 +16,16 @@ import { import { useRef } from '@wordpress/element'; export function PostVisibility() { - const rowRef = useRef(); + const anchorRef = useRef(); return ( <PostVisibilityCheck render={ ( { canEdit } ) => ( - <PanelRow ref={ rowRef } className="edit-post-post-visibility"> + <ToolsPanelItem + ref={ anchorRef } + className="edit-post-post-visibility" + label={ __( 'Visibility' ) } + hasValue={ () => true } + > <span>{ __( 'Visibility' ) }</span> { ! canEdit && ( <span> @@ -31,7 +40,7 @@ export function PostVisibility() { // Anchor the popover to the middle of the // entire row so that it doesn't move around // when the label changes. - anchorRef: rowRef.current, + anchorRef, } } renderToggle={ ( { isOpen, onToggle } ) => ( <PostVisibilityToggle @@ -44,7 +53,7 @@ export function PostVisibility() { ) } /> ) } - </PanelRow> + </ToolsPanelItem> ) } /> ); 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 82c89688fca757..d32ba6c4ff157a 100644 --- a/packages/edit-post/src/components/sidebar/post-visibility/style.scss +++ b/packages/edit-post/src/components/sidebar/post-visibility/style.scss @@ -1,6 +1,8 @@ .edit-post-post-visibility { - width: 100%; + align-items: center; + display: flex; justify-content: flex-start; + width: 100%; span { display: block; diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 6e84ff997210c2..912cbd5f1ad912 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -16,8 +16,9 @@ @import "./components/sidebar/post-schedule/style.scss"; @import "./components/sidebar/post-slug/style.scss"; @import "./components/sidebar/post-status/style.scss"; -@import "./components/sidebar/post-summary/style.scss"; +@import "./components/sidebar/post-status-row/style.scss"; @import "./components/sidebar/post-template/style.scss"; +@import "./components/sidebar/post-title/style.scss"; @import "./components/sidebar/post-url/style.scss"; @import "./components/sidebar/post-visibility/style.scss"; @import "./components/sidebar/settings-header/style.scss";