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()
);