diff --git a/packages/editor/src/components/post-author/panel.js b/packages/editor/src/components/post-author/panel.js index 908617a86f290..5c162cfa50377 100644 --- a/packages/editor/src/components/post-author/panel.js +++ b/packages/editor/src/components/post-author/panel.js @@ -58,7 +58,6 @@ export function PostAuthor() { ( diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js index 2aec930298c20..a61d230a00119 100644 --- a/packages/editor/src/components/post-format/index.js +++ b/packages/editor/src/components/post-format/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Button, SelectControl } from '@wordpress/components'; +import { Button, RadioControl } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { useInstanceId } from '@wordpress/compose'; import { store as coreStore } from '@wordpress/core-data'; @@ -85,16 +85,17 @@ export default function PostFormat() { return (
- onUpdatePostFormat( format ) } id={ postFormatSelectorId } options={ formats.map( ( format ) => ( { label: format.caption, value: format.id, } ) ) } + hideLabelFromVision /> { suggestion && suggestion.id !== postFormat && (

diff --git a/packages/editor/src/components/post-format/panel.js b/packages/editor/src/components/post-format/panel.js index cbd065183eefa..faaf88b785a4b 100644 --- a/packages/editor/src/components/post-format/panel.js +++ b/packages/editor/src/components/post-format/panel.js @@ -1,20 +1,85 @@ /** * WordPress dependencies */ -import { PanelRow } from '@wordpress/components'; +import { Button, Dropdown } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { useState, useMemo } from '@wordpress/element'; +import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor'; /** * Internal dependencies */ -import PostFormatForm from './'; +import { default as PostFormatForm, POST_FORMATS } from './'; import PostFormatCheck from './check'; +import PostPanelRow from '../post-panel-row'; +import { store as editorStore } from '../../store'; -export function PostFormat() { +/** + * Renders the Post Author Panel component. + * + * @return {Component} The component to be rendered. + */ +function PostFormat() { + const { postFormat } = useSelect( ( select ) => { + const { getEditedPostAttribute } = select( editorStore ); + const _postFormat = getEditedPostAttribute( 'format' ); + return { + postFormat: _postFormat ?? 'standard', + }; + }, [] ); + const activeFormat = POST_FORMATS.find( + ( format ) => format.id === postFormat + ); + + // 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: 'left-start', + offset: 36, + shift: true, + } ), + [ popoverAnchor ] + ); return ( - - - + + ( + + ) } + renderContent={ ( { onClose } ) => ( +

+ + +
+ ) } + /> + ); } diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss index 135ee7f357902..ec3a8b1626b54 100644 --- a/packages/editor/src/components/post-format/style.scss +++ b/packages/editor/src/components/post-format/style.scss @@ -2,8 +2,14 @@ margin: $grid-unit-05 0 0 0; } -.editor-post-format__panel { - display: flex; - flex-direction: column; - align-items: stretch; +.editor-post-format__dialog .editor-post-format__dialog-content { + // sidebar width - popover padding - form margin + min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20; + margin: $grid-unit-10; +} + +.editor-post-format__options { + .components-base-control__field > .components-v-stack { + gap: $grid-unit-15; + } } diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js index ab2f714027e63..367d3e112478c 100644 --- a/packages/editor/src/components/sidebar/post-summary.js +++ b/packages/editor/src/components/sidebar/post-summary.js @@ -79,9 +79,9 @@ export default function PostSummary( { onActionPerformed } ) { + - { fills } diff --git a/test/e2e/specs/editor/various/new-post.spec.js b/test/e2e/specs/editor/various/new-post.spec.js index b3591db1ec50b..68d983e91045b 100644 --- a/test/e2e/specs/editor/various/new-post.spec.js +++ b/test/e2e/specs/editor/various/new-post.spec.js @@ -40,7 +40,7 @@ test.describe( 'new editor state', () => { // Should display the Post Formats UI. await editor.openDocumentSettingsSidebar(); await expect( - page.locator( 'role=combobox[name="Post Format"i]' ) + page.locator( 'role=button[name="Change Format: Standard"i]' ) ).toBeVisible(); } );