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

Display children of inner block controllers in the block navigator #24083

Merged

Conversation

noahtallen
Copy link
Member

Description

Fixes #23459. In #21368, all "controlled" inner blocks were excluded from getBlock and getBlocks. This works because much of the time, you only want to know whhat blocks are in the particular entity you are looking at. For example, when you call getBlock on a template part, you would not want to be aware of any children template parts. You only want to know which blocks are contained in that template part.

However, there are still some bits of the UI (like the block navigator) which depend on seeing a list of all the blocks rendered on the page -- it does not care which blocks belong to which entity. So this PR:

  1. Adds a way to get all nested blocks via getBlock and getBlocks. Previously, those functions always excluded the children of nested inner block controllers. Now, these functions can include those nested children if a flag is set.
  2. Use above flag in BlockNavigation to include all blocks, including nested inner block controller children.

How has this been tested?

Locally, in edit site.

Screenshots

Screen Shot 2020-07-20 at 5 45 59 PM

Types of changes

Bug fix

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.

@noahtallen noahtallen changed the title Fix/block navigator not showing inner block controllers Display children of inner block controllers in the block navigator Jul 21, 2020
@github-actions
Copy link

github-actions bot commented Jul 21, 2020

Size Change: +62 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/block-editor/index.js 125 kB +62 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.97 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/style-rtl.css 10.6 kB 0 B
build/block-editor/style.css 10.6 kB 0 B
build/block-library/editor-rtl.css 8.36 kB 0 B
build/block-library/editor.css 8.36 kB 0 B
build/block-library/index.js 132 kB 0 B
build/block-library/style-rtl.css 7.49 kB 0 B
build/block-library/style.css 7.49 kB 0 B
build/block-library/theme-rtl.css 729 B 0 B
build/block-library/theme.css 730 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.4 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 kB 0 B
build/date/index.js 5.38 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.23 kB 0 B
build/edit-navigation/index.js 10.9 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.63 kB 0 B
build/edit-post/style.css 5.63 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 9.38 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.11 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.33 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@youknowriad
Copy link
Contributor

I don't like this selector argument tbh, but I can live with it :). I commented about a potential bug though.

@noahtallen noahtallen force-pushed the fix/block-navigator-not-showing-inner-block-controllers branch from e29a327 to 64a40e8 Compare August 12, 2020 21:50
@noahtallen
Copy link
Member Author

Screen Shot 2020-08-12 at 2 57 13 PM

here's the current look

@noahtallen noahtallen merged commit bd954d2 into master Aug 13, 2020
@noahtallen noahtallen deleted the fix/block-navigator-not-showing-inner-block-controllers branch August 13, 2020 21:32
@github-actions github-actions bot added this to the Gutenberg 8.8 milestone Aug 13, 2020
@noahtallen noahtallen self-assigned this Aug 13, 2020
@youknowriad
Copy link
Contributor

After some reports of typing performance regressions on 8.8 I used gitbisect and it seems that this PR introduced a big performance regression.

@@ -67,10 +67,11 @@ export default compose(
} = select( 'core/block-editor' );
const selectedBlockClientId = getSelectedBlockClientId();
return {
rootBlocks: getBlocks(),
rootBlocks: getBlocks( '', { includeControlledInnerBlocks: true } ),
Copy link
Contributor

Choose a reason for hiding this comment

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

Calling selectors with inline objects is never a good idea in terms of performance, not sure it's the source of the issue but it's definitely something to avoid in general (breaks memoization)

? EMPTY_ARRAY
: getBlocks( state, clientId, {
includeControlledInnerBlocks,
} ),
Copy link
Contributor

Choose a reason for hiding this comment

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

This call also breaks memoization as it will recompute getBlocks on each call since we're passing and inline object.

return map( getBlockOrder( state, rootClientId ), ( clientId ) =>
getBlock( state, clientId )
getBlock( state, clientId, { includeControlledInnerBlocks } )
Copy link
Contributor

Choose a reason for hiding this comment

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

Same here.

@youknowriad
Copy link
Contributor

The good news is that this PR fixes the regressions #24835

@noahtallen
Copy link
Member Author

Thank you for the tips about inline objects, I did not realize that would be the case!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Experimental Experimental feature or API.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigator is not introspecting the contents of template areas
4 participants