Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Multi-Entity Saving UI Improvements #35933

Merged
merged 14 commits into from
Oct 29, 2021
Merged

Editor: Multi-Entity Saving UI Improvements #35933

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3712484
EntityTypeList: Add entity descriptions
ockham Oct 25, 2021
e3b730d
Sort entity groups
ockham Oct 25, 2021
3e0e9cd
Change panel header copy
ockham Oct 25, 2021
034eace
Remove undefined entries from partitioned savables
ockham Oct 27, 2021
ef6f357
Use singular and plural depending on number of savables per entity
ockham Oct 27, 2021
d6b8679
Tweak singular
ockham Oct 27, 2021
88adb53
Remove icons from entities
ockham Oct 27, 2021
4ef8ac1
Use template part area label rather than template part title
ockham Oct 28, 2021
f754848
Revert "Use template part area label rather than template part title"
ockham Oct 29, 2021
496d43f
Replace ternary by &&
ockham Oct 29, 2021
7af0817
Add description for content entities
ockham Oct 29, 2021
f033bfe
No description for Template Part
ockham Oct 29, 2021
84759fe
Singular/plural for Template Part(s) header
ockham Oct 29, 2021
2d024a5
Tweak entity descriptions to exclude reusable blocks
ockham Oct 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 26 additions & 9 deletions packages/editor/src/components/entities-saved-states/entity-type-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,36 @@ import { some } from 'lodash';
/**
* WordPress dependencies
*/
import { __, _n } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { PanelBody } from '@wordpress/components';
import { page, layout } from '@wordpress/icons';
import { PanelBody, PanelRow } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import EntityRecordItem from './entity-record-item';

const ENTITY_NAME_ICONS = {
site: layout,
page,
};
function getEntityDescription( entity, length ) {
const descriptions = {
site: _n(
'This change will affect your whole site.',
'These changes will affect your whole site.',
length
),
wp_template: _n(
'This change will affect pages and posts that use this template.',
'These changes will affect pages and posts that use these templates.',
length
),
wp_template_part: '', // No separate description for template parts.
};

return (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this can become a bit overwhelming with many changes 😄
Screenshot 2021-10-29 at 4 15 48 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was partly by mistake -- there shouldn't be any description for Template Part. Fix in 717d7041ba.

I don't mind removing the "The following content has been modified." description altogether, if it's still too overwhelming.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I personally like it for the page edits. Not sure for reusable blocks though, but not a blocker.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I'd somehow missed the reusable blocks. Good point, I'll do some final tweaking...

descriptions[ entity ] ??
__( 'The following content has been modified.' )
);
}

export default function EntityTypeList( {
list,
Expand All @@ -34,12 +50,13 @@ export default function EntityTypeList( {
[ firstRecord.kind, firstRecord.name ]
);

// Set icon based on type of entity.
// Set description based on type of entity.
const { name } = firstRecord;
const icon = ENTITY_NAME_ICONS[ name ];
const description = getEntityDescription( name, list.length );

return (
<PanelBody title={ entity.label } initialOpen={ true } icon={ icon }>
<PanelBody title={ entity.label } initialOpen={ true }>
{ description && <PanelRow>{ description }</PanelRow> }
{ list.map( ( record ) => {
return (
<EntityRecordItem
Expand Down
24 changes: 18 additions & 6 deletions packages/editor/src/components/entities-saved-states/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,21 @@ export default function EntitiesSavedStates( { close } ) {
} = useDispatch( coreStore );

// To group entities by type.
const partitionedSavables = Object.values(
groupBy( dirtyEntityRecords, 'name' )
);
const partitionedSavables = groupBy( dirtyEntityRecords, 'name' );

// Sort entity groups.
const {
site: siteSavables,
wp_template: templateSavables,
wp_template_part: templatePartSavables,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think that order can be defined as a "priority" somehow in the entities config? Or maybe this is sufficient for now?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it'd make the code quite a bit more complex, and I don't think it's worth it right now, since this is the only place so far where we're needing that priority order.

...contentSavables
} = partitionedSavables;
const sortedPartitionedSavables = [
siteSavables,
templateSavables,
templatePartSavables,
...Object.values( contentSavables ),
].filter( Array.isArray );
ockham marked this conversation as resolved.
Show resolved Hide resolved

// Unchecked entities to be ignored by save function.
const [ unselectedEntities, _setUnselectedEntities ] = useState( [] );
Expand Down Expand Up @@ -160,15 +172,15 @@ export default function EntitiesSavedStates( { close } ) {
</div>

<div className="entities-saved-states__text-prompt">
<strong>{ __( 'Select the changes you want to save' ) }</strong>
<strong>{ __( 'Are you ready to save?' ) }</strong>
<p>
{ __(
'Some changes may affect other areas of your site.'
'The following changes have been made to your site, templates, and content.'
) }
</p>
</div>

{ partitionedSavables.map( ( list ) => {
{ sortedPartitionedSavables.map( ( list ) => {
return (
<EntityTypeList
key={ list[ 0 ].name }
Expand Down