diff --git a/packages/e2e-tests/specs/editor/various/post-visibility.test.js b/packages/e2e-tests/specs/editor/various/post-visibility.test.js index 346d05661e706b..c49613663ec2f3 100644 --- a/packages/e2e-tests/specs/editor/various/post-visibility.test.js +++ b/packages/e2e-tests/specs/editor/various/post-visibility.test.js @@ -19,7 +19,7 @@ describe( 'Post visibility', () => { await openDocumentSettingsSidebar(); - await page.click( '.edit-post-post-visibility__toggle' ); + await page.click( '*[aria-label^="Select visibility"]' ); const [ privateLabel ] = await page.$x( '//label[text()="Private"]' @@ -57,7 +57,7 @@ describe( 'Post visibility', () => { .getEditedPostAttribute( 'status' ); } ); - await page.click( '.edit-post-post-visibility__toggle' ); + await page.click( '*[aria-label^="Select visibility"]' ); const [ privateLabel ] = await page.$x( '//label[text()="Private"]' @@ -90,7 +90,7 @@ describe( 'Post visibility', () => { await openDocumentSettingsSidebar(); // Set a publish date for the next month. - await page.click( '.edit-post-post-schedule__toggle' ); + await page.click( '*[aria-label^="Change date"]' ); await page.click( '*[aria-label="Move forward to switch to the next month."]' ); @@ -100,7 +100,7 @@ describe( 'Post visibility', () => { ) )[ 0 ].click(); - await page.click( '.edit-post-post-visibility__toggle' ); + await page.click( '*[aria-label^="Select visibility"]' ); const [ privateLabel ] = await page.$x( '//label[text()="Private"]' ); await privateLabel.click(); diff --git a/packages/e2e-tests/specs/editor/various/scheduling.test.js b/packages/e2e-tests/specs/editor/various/scheduling.test.js index 71f802f9598ab9..55cc9952aec7c6 100644 --- a/packages/e2e-tests/specs/editor/various/scheduling.test.js +++ b/packages/e2e-tests/specs/editor/various/scheduling.test.js @@ -39,7 +39,7 @@ describe( 'Scheduling', () => { expect( await getPublishButtonText() ).toBe( 'Publish' ); // Open the datepicker. - await page.click( '.edit-post-post-schedule__toggle' ); + await page.click( '*[aria-label^="Change date"]' ); // Change the publishing date to a year in the future. await page.click( '.components-datetime__time-field-year' ); @@ -56,7 +56,7 @@ describe( 'Scheduling', () => { it( 'Should keep date time UI focused when the previous and next month buttons are clicked', async () => { await createNewPost(); - await page.click( '.edit-post-post-schedule__toggle' ); + await page.click( '*[aria-label^="Change date"]' ); await page.click( '*[aria-label="Move backward to switch to the previous month."]' ); diff --git a/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js b/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js index 5ada2ecc837123..a89ac0469f27ae 100644 --- a/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js +++ b/packages/e2e-tests/specs/editor/various/sidebar-permalink.test.js @@ -8,8 +8,7 @@ import { publishPost, } from '@wordpress/e2e-test-utils'; -// TODO: Use a more accessible selector. -const urlRowSelector = '.edit-post-post-url'; +const urlButtonSelector = '*[aria-label^="Change URL"]'; // This tests are not together with the remaining sidebar tests, // because we need to publish/save a post, to correctly test the permalink row. @@ -30,7 +29,7 @@ describe( 'Sidebar Permalink', () => { await publishPost(); // Start editing again. await page.type( '.editor-post-title__input', ' (Updated)' ); - expect( await page.$( urlRowSelector ) ).toBeNull(); + expect( await page.$( urlButtonSelector ) ).toBeNull(); } ); it( 'should not render URL when post is public but not publicly queryable', async () => { @@ -39,7 +38,7 @@ describe( 'Sidebar Permalink', () => { await publishPost(); // Start editing again. await page.type( '.editor-post-title__input', ' (Updated)' ); - expect( await page.$( urlRowSelector ) ).toBeNull(); + expect( await page.$( urlButtonSelector ) ).toBeNull(); } ); it( 'should render URL when post is public and publicly queryable', async () => { @@ -48,6 +47,6 @@ describe( 'Sidebar Permalink', () => { await publishPost(); // Start editing again. await page.type( '.editor-post-title__input', ' (Updated)' ); - expect( await page.$( urlRowSelector ) ).not.toBeNull(); + expect( await page.$( urlButtonSelector ) ).not.toBeNull(); } ); } ); 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 739234ce987bb4..7c9021894e26f3 100644 --- a/packages/edit-post/src/components/sidebar/post-schedule/index.js +++ b/packages/edit-post/src/components/sidebar/post-schedule/index.js @@ -1,21 +1,17 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { PanelRow, Dropdown, Button } from '@wordpress/components'; import { useRef } from '@wordpress/element'; import { PostSchedule as PostScheduleForm, - PostScheduleLabel, PostScheduleCheck, usePostScheduleLabel, } from '@wordpress/editor'; export default function PostSchedule() { const anchorRef = useRef(); - - const fullLabel = usePostScheduleLabel( { full: true } ); - return ( @@ -24,18 +20,11 @@ export default function PostSchedule() { popoverProps={ { anchorRef } } position="bottom left" contentClassName="edit-post-post-schedule__dialog" - renderToggle={ ( { onToggle, isOpen } ) => ( - <> - - + renderToggle={ ( { isOpen, onToggle } ) => ( + ) } renderContent={ ( { onClose } ) => ( @@ -45,3 +34,22 @@ export default function PostSchedule() { ); } + +function PostScheduleToggle( { isOpen, onClick } ) { + const label = usePostScheduleLabel(); + const fullLabel = usePostScheduleLabel( { full: true } ); + return ( + + ); +} 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 2b06190c2f1b29..7bca993784a702 100644 --- a/packages/edit-post/src/components/sidebar/post-url/index.js +++ b/packages/edit-post/src/components/sidebar/post-url/index.js @@ -3,16 +3,15 @@ */ import { useRef } from '@wordpress/element'; import { PanelRow, Dropdown, Button } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { PostURLCheck, - PostURLLabel, PostURL as PostURLForm, + usePostURLLabel, } from '@wordpress/editor'; export default function PostURL() { const anchorRef = useRef(); - return ( @@ -23,14 +22,7 @@ export default function PostURL() { className="edit-post-post-url__dropdown" contentClassName="edit-post-post-url__dialog" renderToggle={ ( { isOpen, onToggle } ) => ( - + ) } renderContent={ ( { onClose } ) => ( @@ -40,3 +32,19 @@ export default function PostURL() { ); } + +function PostURLToggle( { isOpen, onClick } ) { + const label = usePostURLLabel(); + 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 index a03de00917a9c1..382d8f810596ee 100644 --- a/packages/edit-post/src/components/sidebar/post-visibility/index.js +++ b/packages/edit-post/src/components/sidebar/post-visibility/index.js @@ -1,12 +1,13 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { PanelRow, Dropdown, Button } from '@wordpress/components'; import { PostVisibility as PostVisibilityForm, PostVisibilityLabel, PostVisibilityCheck, + usePostVisibilityLabel, } from '@wordpress/editor'; import { useRef } from '@wordpress/element'; @@ -33,14 +34,10 @@ export function PostVisibility() { anchorRef: rowRef.current, } } renderToggle={ ( { isOpen, onToggle } ) => ( - + /> ) } renderContent={ ( { onClose } ) => ( @@ -53,4 +50,20 @@ export function PostVisibility() { ); } +function PostVisibilityToggle( { isOpen, onClick } ) { + const label = usePostVisibilityLabel(); + return ( + + ); +} + export default PostVisibility; diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index 2427b52c6032f4..ea8d411f8767c2 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -61,9 +61,12 @@ export { default as PostTrashCheck } from './post-trash/check'; export { default as PostTypeSupportCheck } from './post-type-support-check'; export { default as PostURL } from './post-url'; export { default as PostURLCheck } from './post-url/check'; -export { default as PostURLLabel } from './post-url/label'; +export { default as PostURLLabel, usePostURLLabel } from './post-url/label'; export { default as PostVisibility } from './post-visibility'; -export { default as PostVisibilityLabel } from './post-visibility/label'; +export { + default as PostVisibilityLabel, + usePostVisibilityLabel, +} from './post-visibility/label'; export { default as PostVisibilityCheck } from './post-visibility/check'; export { default as TableOfContents } from './table-of-contents'; export { default as ThemeSupportCheck } from './theme-support-check'; diff --git a/packages/editor/src/components/post-schedule/label.js b/packages/editor/src/components/post-schedule/label.js index 8845684432538a..3802de051ab9c6 100644 --- a/packages/editor/src/components/post-schedule/label.js +++ b/packages/editor/src/components/post-schedule/label.js @@ -14,7 +14,7 @@ export default function PostScheduleLabel( props ) { return usePostScheduleLabel( props ); } -export function usePostScheduleLabel( { full } ) { +export function usePostScheduleLabel( { full = false } = {} ) { const { date, isFloating } = useSelect( ( select ) => ( { date: select( editorStore ).getEditedPostAttribute( 'date' ), diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js index f34a6404605613..38b8138d85943d 100644 --- a/packages/editor/src/components/post-url/label.js +++ b/packages/editor/src/components/post-url/label.js @@ -10,6 +10,10 @@ import { filterURLForDisplay } from '@wordpress/url'; import { store as editorStore } from '../../store'; export default function PostURLLabel() { + return usePostURLLabel(); +} + +export function usePostURLLabel() { const postLink = useSelect( ( select ) => select( editorStore ).getCurrentPost().link, [] diff --git a/packages/editor/src/components/post-visibility/label.js b/packages/editor/src/components/post-visibility/label.js index 2e50aebe488dac..580eed75620b4d 100644 --- a/packages/editor/src/components/post-visibility/label.js +++ b/packages/editor/src/components/post-visibility/label.js @@ -10,6 +10,10 @@ import { visibilityOptions } from './utils'; import { store as editorStore } from '../../store'; export default function PostVisibilityLabel() { + return usePostVisibilityLabel(); +} + +export function usePostVisibilityLabel() { const visibility = useSelect( ( select ) => select( editorStore ).getEditedPostVisibility() );