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.

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

Update entity saved states to be selected by default and partitioned by type. #21159

Merged
merged 28 commits into from Apr 2, 2020

Conversation

@Addison-Stavlo
Copy link
Contributor

@Addison-Stavlo Addison-Stavlo commented Mar 26, 2020

Description

This PR offers 2 Bug Fixes:

  1. Allows checkboxes to be toggled on/off again.
  2. Allows parent post to actually save through this when applicable (it was previously not actually saving)

And also 2 minor design changes as suggested in #20421 :

  1. All checkboxes selected by default.
  2. Partition the list by entity type.

I believe these changes are a small step in the right direction for the future designs being suggested. However, I believe this is a good place to review and merge current changes to re-introduce working functionality.

More Info

1. Allows checkboxes to be toggled on/off again.

There was a logic error preventing the items to be selected/deselected for saving.

unselectable

2. Allows parent post to actually save through this when applicable

This EntitySavedStates component receives an ignoredForSave prop as a list of entities to be ignored by its save function. However, the items shown in the selectable save list did not exclude entities which are part of ignoredForSave. This would cause the perception of these items (currently limited to parent entities in the Page, Post, etc. editors) to be saved when they actually were not.

For reasons outlined in the comment below #21159 (comment), I think it is best to get rid of this prop altogether, so now the parent entities like 'Page' will save as expected when applicable.

Screen Shot 2020-03-25 at 8 38 15 PM

3 & 4. All checkboxes selected by default & Entities partitioned by type:

Instead of all savable items being unselected by default, they will be checked by default and separated by entity type:

Screen Shot 2020-03-25 at 8 15 49 PM

How has this been tested?

Tested on local docker setup in page, post, template, template part, and site editor instances.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • Minor design/functionality update (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.
@github-actions
Copy link

@github-actions github-actions bot commented Mar 26, 2020

Size Change: +21 kB (2%)

Total Size: 884 kB

Filename Size Change
build/a11y/index.js 1.02 kB +18 B (1%)
build/annotations/index.js 3.45 kB +23 B (0%)
build/api-fetch/index.js 3.8 kB +411 B (10%) ⚠️
build/autop/index.js 2.59 kB +2 B (0%)
build/block-directory/index.js 6.03 kB +9 B (0%)
build/block-editor/index.js 102 kB +184 B (0%)
build/block-editor/style-rtl.css 11.2 kB +207 B (1%)
build/block-editor/style.css 11.2 kB +210 B (1%)
build/block-library/editor-rtl.css 7.21 kB -11 B (0%)
build/block-library/editor.css 7.21 kB -12 B (0%)
build/block-library/index.js 110 kB +374 B (0%)
build/block-library/style-rtl.css 7.5 kB +69 B (0%)
build/block-library/style.css 7.51 kB +68 B (0%)
build/block-serialization-default-parser/index.js 1.65 kB -1 B
build/blocks/index.js 57.5 kB -1 B
build/components/index.js 195 kB +4.48 kB (2%)
build/components/style-rtl.css 16.1 kB +296 B (1%)
build/components/style.css 16 kB +297 B (1%)
build/compose/index.js 6.21 kB +4 B (0%)
build/core-data/index.js 10.7 kB +55 B (0%)
build/data-controls/index.js 1.03 kB -3 B (0%)
build/data/index.js 8.23 kB -19 B (0%)
build/date/index.js 5.37 kB -1 B
build/deprecated/index.js 772 B +1 B
build/dom-ready/index.js 569 B +1 B
build/dom/index.js 3.05 kB -1 B
build/edit-post/index.js 92.3 kB +1.06 kB (1%)
build/edit-post/style-rtl.css 12 kB +3.54 kB (29%) 🚨
build/edit-post/style.css 12 kB +3.55 kB (29%) 🚨
build/edit-site/index.js 9.1 kB +2.38 kB (26%) 🚨
build/edit-site/style-rtl.css 4.62 kB +1.74 kB (37%) 🚨
build/edit-site/style.css 4.62 kB +1.74 kB (37%) 🚨
build/edit-widgets/index.js 4.43 kB +2 B (0%)
build/edit-widgets/style-rtl.css 3.74 kB +1.16 kB (30%) 🚨
build/edit-widgets/style.css 3.74 kB +1.16 kB (30%) 🚨
build/editor/editor-styles-rtl.css 423 B -5 B (1%)
build/editor/editor-styles.css 426 B -5 B (1%)
build/editor/index.js 42.8 kB -1.05 kB (2%)
build/editor/style-rtl.css 3.49 kB -503 B (14%) 👏
build/editor/style.css 3.49 kB -495 B (14%) 👏
build/format-library/index.js 6.95 kB +5 B (0%)
build/i18n/index.js 3.57 kB +82 B (2%)
build/keyboard-shortcuts/index.js 2.3 kB +1 B
build/keycodes/index.js 1.7 kB +12 B (0%)
build/list-reusable-blocks/index.js 2.99 kB +2 B (0%)
build/media-utils/index.js 4.84 kB -1 B
build/notices/index.js 1.57 kB -2 B (0%)
build/nux/index.js 3.01 kB -3 B (0%)
build/plugins/index.js 2.54 kB -2 B (0%)
build/primitives/index.js 1.5 kB -2 B (0%)
build/priority-queue/index.js 780 B -1 B
build/rich-text/index.js 14.5 kB +3 B (0%)
build/server-side-render/index.js 2.54 kB -7 B (0%)
build/shortcode/index.js 1.69 kB -8 B (0%)
build/token-list/index.js 1.28 kB +10 B (0%)
build/url/index.js 4.01 kB +2 B (0%)
build/viewport/index.js 1.6 kB -3 B (0%)
build/warning/index.js 1.14 kB +1 B
build/wordcount/index.js 1.17 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/edit-navigation/index.js 2.48 kB 0 B
build/edit-navigation/style-rtl.css 239 B 0 B
build/edit-navigation/style.css 241 B 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 1.93 kB 0 B
build/html-entities/index.js 622 B 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/redux-routine/index.js 2.84 kB 0 B

compressed-size-action

@Addison-Stavlo Addison-Stavlo marked this pull request as ready for review Mar 26, 2020
@Addison-Stavlo Addison-Stavlo self-assigned this Mar 26, 2020
@Addison-Stavlo Addison-Stavlo changed the title Update entity saved states to be selected by default. Update entity saved states to be selected by default and partitioned by type. Mar 26, 2020
@vindl vindl added this to Needs review in Full site editing Mar 26, 2020
@Addison-Stavlo
Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo commented Mar 27, 2020

Actually, the more I look at the code, the history, and the designs the more it seems to make sense to get rid of this ignoredForSave prop altogether.

It is only added here:

ignoredForSave={ this.createIgnoredForSave(
postType,
postId
) }

And is only used to prevent saving those parent post items here:

const entitiesToSave = dirtyEntityRecords.filter(
( { kind, name, key } ) => {
return ! some(
ignoredForSave.concat( unsavedEntityRecords ),
( elt ) =>
elt.kind === kind &&
elt.name === name &&
elt.key === key
);
}
);

This prop was added as part of the first exploration PR into this #18029, so maybe the initial idea was not to have the parent post savable through this component. But since design mockups all seem to show this functionality, we should just remove this and allow saving of the parent post in the modal when applicable.

@youknowriad can you think of any reasons why we would need to keep this prop? Currently parent posts show up in the modal but are only giving the illusion of being saved through this. We should probably just remove this and have them show up and save as expected (as opposed to my initial direction of conforming other things to this prop that doesn't seem to make sense anymore).

I updated the PR to go this route as it seems to make the most sense.

@youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Mar 30, 2020

I agree with the reasoning here 👍 I'm not really sure why we needed this prop in the first place.

Do you think it's possible to add an e2e test about this feature (multi-entity save)?

@Addison-Stavlo Addison-Stavlo requested review from Soean and talldan as code owners Apr 1, 2020
Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo left a comment

Do you think it's possible to add an e2e test about this feature (multi-entity save)?

Sure thing! I updated this to have an e2e test at packages/e2e-tests/specs/editor/various/multi-entity-saving.test.js. These tests walk through both the post editor as well as the site editor.

const [ slug, _setSlug ] = useState();
const [ theme, setTheme ] = useState();
const [ slug, _setSlug ] = useState( '' );
const [ theme, setTheme ] = useState( '' );

This comment has been minimized.

@Addison-Stavlo

Addison-Stavlo Apr 1, 2020
Author Contributor

It was necessary to edit these to stop a react warning from breaking the e2e tests. Without initializing as an empty string, react would complain about turning an uncontrolled component into a controlled component once the input was used.

@@ -53,12 +53,13 @@ export default function SaveButton() {
const disabled = ! isDirty || isSaving;

const [ isOpen, setIsOpen ] = useState( false );
const open = useCallback( setIsOpen.bind( null, true ), [] );
const close = useCallback( setIsOpen.bind( null, false ), [] );
const open = useCallback( () => setIsOpen( true ), [] );

This comment has been minimized.

@Addison-Stavlo

Addison-Stavlo Apr 1, 2020
Author Contributor

These were also necessary to edit due to reacts warnings breaking e2e tests. Without this change, react would throw a warning when the button was used about useState update functions not supporting the second callback argument.

@youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Apr 1, 2020

packages/e2e-tests/specs/editor/various/multi-entity-saving.test.js

This should probably be moved to the "experimental" specs folder. That's how we distinguish the tests that can run in Core from the others (experimental ones)

@mtias
Copy link
Contributor

@mtias mtias commented Apr 1, 2020

I'd love to get this one in as it'd improve the quality of the upcoming WP Block Talk demo :P

@Addison-Stavlo
Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo commented Apr 1, 2020

This should probably be moved to the "experimental" specs folder. That's how we distinguish the tests that can run in Core from the others (experimental ones)

That makes sense. I moved it to the experimental folder.

@youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Apr 1, 2020

Looks like this is not working properly for the site entity. I guess it shouldn't be a top level item.
Capture d’écran 2020-04-01 à 7 49 53 PM

or maybe we should use the "site title" as label there.

@mtias
Copy link
Contributor

@mtias mtias commented Apr 1, 2020

Yes, I still wish we could use the block name that triggered the entity save here, or the name of the attribute changed :)

@Addison-Stavlo
Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo commented Apr 1, 2020

Looks like this is not working properly for the site entity.

Thats what I would have expected to see given the functionality on master and the scope of the given changes. It shows up like that on master too:

Screen Shot 2020-04-01 at 3 01 16 PM

So at least it's not a regression, but definitely something that we will need to address.

I guess it shouldn't be a top level item.

I don't understand what we mean by 'top level item' in this case, could you elaborate please?

Yes, I still wish we could use the block name that triggered the entity save here, or the name of the attribute changed :)

Agreed, that would be much less ambiguous that the 'untitled' site. I'd be happy to iterate further on these things but I'd vote to address them in follow-up PR(s) if possible.

@mtias
Copy link
Contributor

@mtias mtias commented Apr 1, 2020

@Addison-Stavlo I think the difference is between showing "Site" as a heading and "Untitled" as the checked item vs just showing the checkbox with "Site" next to it.

@Addison-Stavlo
Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo commented Apr 1, 2020

I think the difference is between showing "Site" as a heading and "Untitled" as the checked item vs just showing the checkbox with "Site" next to it.

Ah, ok I see now. Thank you! Il do something about that here shortly.

On a related note about having the 'Untitled' appear now as opposed to before:

The 'Untitled' started showing up as there was an 'Untitled' label fallback in the code but hidden behind other logic that would never trigger it:

{ !! record.title && (
<>
{ ': ' }
<strong>
{ record.title || __( 'Untitled' ) }
</strong>
</>
) }

I assumed it was desired as the fallback label so now entities without titles should show 'untitled' as pointed out with the Site's entity.

@Addison-Stavlo
Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo commented Apr 1, 2020

Ok, with a small edit to the __experimentalGetDirtyEntityRecords selector, the site entity no longer comes back untitled:

Screen Shot 2020-04-01 at 5 31 46 PM

Copy link
Member

@noahtallen noahtallen left a comment

So happy that I can actually save entities now! 🎉

(I rebased this on master before testing.)

I don't know if this is related to the PR, but I am noticing that the blue dots do not reflect which templates need updated. I took this screenshot immediately upon entering the page before editing it. (And it stays the same even after saving them).

Screen Shot 2020-04-01 at 8 24 01 PM

Additionally, when I make a change to only a template part, it asks me to save the template part and the template (which I didn't expect, but maybe it is necessary??). When I change only the template, I only have to save the template.

Anyways, this does fix what is advertised: it correctly saves the templates. So I think it could be merged for the block talk, and other stuff could be follow ups

@youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Apr 2, 2020

Additionally, when I make a change to only a template part, it asks me to save the template part and the template (which I didn't expect, but maybe it is necessary??

I believe it shouldn't ask to save the template in this case, I know it's not an easy bug though. It's related to how "controlled" InnerBlocks work. I proposed a solution at some point but It was discarded at that moment. If it's something you're interested in tackling le me know, I can explain further.

I took this screenshot immediately upon entering the page before editing it. (And it stays the same even after saving them)

I believe this is "normal" because these templates come initially from the theme files and are not saved in the CPT.

@youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Apr 2, 2020

Looks like the site editor test is failing, I'm going to skip it to land this but consider checking it separately. Thanks.

@youknowriad youknowriad merged commit e82e819 into master Apr 2, 2020
3 checks passed
3 checks passed
@github-actions
build
Details
@github-actions
pull-request-automation
Details
@travis-ci
Travis CI - Pull Request Build Passed
Details
@youknowriad youknowriad deleted the update/update-flow-with-entities branch Apr 2, 2020
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Apr 2, 2020
@Addison-Stavlo
Copy link
Contributor Author

@Addison-Stavlo Addison-Stavlo commented Apr 2, 2020

Looks like the site editor test is failing

Is that in regards to the e2e test I added? Il take a look. It has been passing for me but I think I may need to find a way to make it a more controlled environment. Navigating to a given site's Site Editor isn't going to be as universally congruent as starting a new post is, so we may have to force it to use the demo template and maybe some other tricks to make it more consistent.. 🤔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants