diff --git a/packages/editor/src/components/entities-saved-states/entity-record-item.js b/packages/editor/src/components/entities-saved-states/entity-record-item.js index 70ca2b83c4dfd..15bdc8c2f2284 100644 --- a/packages/editor/src/components/entities-saved-states/entity-record-item.js +++ b/packages/editor/src/components/entities-saved-states/entity-record-item.js @@ -39,10 +39,7 @@ export default function EntityRecordItem( { record, checked, onChange } ) { <CheckboxControl __nextHasNoMarginBottom label={ - <strong> - { decodeEntities( entityRecordTitle ) || - __( 'Untitled' ) } - </strong> + decodeEntities( entityRecordTitle ) || __( 'Untitled' ) } checked={ checked } onChange={ onChange } diff --git a/packages/editor/src/components/entities-saved-states/entity-type-list.js b/packages/editor/src/components/entities-saved-states/entity-type-list.js index cb050a370c4e3..ed2f4aeacfd76 100644 --- a/packages/editor/src/components/entities-saved-states/entity-type-list.js +++ b/packages/editor/src/components/entities-saved-states/entity-type-list.js @@ -30,7 +30,7 @@ function getEntityDescription( entity, count ) { ); case 'page': case 'post': - return __( 'The following content has been modified.' ); + return __( 'The following has been modified.' ); } } @@ -55,18 +55,15 @@ function GlobalStylesDescription( { record } ) { } ); return globalStylesChanges.length ? ( - <> - <h3 className="entities-saved-states__description-heading"> - { __( 'Changes made to:' ) } - </h3> - <PanelRow>{ globalStylesChanges.join( ', ' ) }.</PanelRow> - </> + <PanelRow className="entities-saved-states__change-summary"> + { globalStylesChanges.join( ', ' ) }. + </PanelRow> ) : null; } function EntityDescription( { record, count } ) { if ( 'globalStyles' === record?.name ) { - return <GlobalStylesDescription record={ record } />; + return null; } const description = getEntityDescription( record?.name, count ); return description ? <PanelRow>{ description }</PanelRow> : null; @@ -117,6 +114,9 @@ export default function EntityTypeList( { /> ); } ) } + { 'globalStyles' === firstRecord?.name && ( + <GlobalStylesDescription record={ firstRecord } /> + ) } </PanelBody> ); } diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index 8e531ce580101..413a27d27dfd3 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -2,9 +2,13 @@ * WordPress dependencies */ import { Button, Flex, FlexItem } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { __, _n, sprintf } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useCallback, useRef } from '@wordpress/element'; +import { + useCallback, + useRef, + createInterpolateElement, +} from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { __experimentalUseDialog as useDialog } from '@wordpress/compose'; @@ -215,8 +219,17 @@ export function EntitiesSavedStatesExtensible( { { additionalPrompt } <p> { isDirty - ? __( - 'The following changes have been made to your site, templates, and content.' + ? createInterpolateElement( + sprintf( + /* translators: %d: number of site changes waiting to be saved. */ + _n( + 'There is <strong>%d site change</strong> waiting to be saved.', + 'There are <strong>%d site changes</strong> waiting to be saved.', + sortedPartitionedSavables.length + ), + sortedPartitionedSavables.length + ), + { strong: <strong /> } ) : __( 'Select the items you want to save.' ) } </p> diff --git a/packages/editor/src/components/entities-saved-states/style.scss b/packages/editor/src/components/entities-saved-states/style.scss index 6fb981c22f960..15878a14ff978 100644 --- a/packages/editor/src/components/entities-saved-states/style.scss +++ b/packages/editor/src/components/entities-saved-states/style.scss @@ -19,3 +19,8 @@ .entities-saved-states__description-heading { font-size: $default-font-size; } + +.entities-saved-states__change-summary { + color: $gray-700; + font-size: $helptext-font-size; +}