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 ed41f8c2baa87e..f80ed4d3fe8204 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 @@ -3,7 +3,6 @@ */ import { Button, - BaseControl, ToggleControl, Dropdown, __experimentalText as Text, @@ -11,6 +10,7 @@ import { __experimentalVStack as VStack, TextControl, RadioControl, + VisuallyHidden, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useDispatch } from '@wordpress/data'; @@ -18,6 +18,8 @@ import { useState, useMemo } from '@wordpress/element'; 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'; + /** * Internal dependencies */ @@ -85,6 +87,7 @@ export default function PageStatus( { date, } ) { const [ showPassword, setShowPassword ] = useState( !! password ); + const instanceId = useInstanceId( PageStatus ); const { editEntityRecord } = useDispatch( coreStore ); const { createErrorNotice } = useDispatch( noticesStore ); @@ -193,10 +196,17 @@ export default function PageStatus( { selected={ status } /> { status !== 'private' && ( - +
+ + { __( 'Password' ) } + { showPassword && ( - - saveStatus( { - password: value, - } ) - } - value={ password } - placeholder={ __( - 'Use a secure password' - ) } - type="text" - /> +
+ + { __( 'Create password' ) } + + + saveStatus( { + password: value, + } ) + } + value={ password } + placeholder={ __( + 'Use a secure password' + ) } + type="text" + id={ `edit-site-change-status__password-input-${ instanceId }` } + /> +
) } - +
) } 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 0a618d9ff53d3f..8c10b32085612b 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 @@ -14,10 +14,12 @@ min-width: 320px; padding: $grid-unit-20; } + .edit-site-change-status__options { .components-base-control__field > .components-v-stack { gap: $grid-unit-10; } + label { .components-text { display: block; @@ -25,15 +27,22 @@ } } } + + .edit-site-change-status__password-legend { + padding: 0; + margin-bottom: $grid-unit-10; + } } .edit-site-summary-field { .components-dropdown { flex-grow: 1; } + .edit-site-summary-field__trigger { width: 100%; } + .edit-site-summary-field__label { width: 30%; }