Skip to content

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

Merged
noahtallen merged 3 commits into
masterfrom
fix/block-navigator-not-showing-inner-block-controllers
Aug 13, 2020
Merged

Display children of inner block controllers in the block navigator#24083
noahtallen merged 3 commits into
masterfrom
fix/block-navigator-not-showing-inner-block-controllers

Conversation

@noahtallen
Copy link
Copy Markdown
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 requested a review from epiqueras July 21, 2020 00:58
@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
Copy Markdown

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

Comment thread packages/block-editor/src/store/selectors.js Outdated
Comment thread packages/block-editor/src/components/block-navigation/index.js Outdated
Comment thread packages/block-editor/src/store/selectors.js
@youknowriad
Copy link
Copy Markdown
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
Copy Markdown
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
Copy Markdown
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.

const selectedBlockClientId = getSelectedBlockClientId();
return {
rootBlocks: getBlocks(),
rootBlocks: getBlocks( '', { includeControlledInnerBlocks: true } ),
Copy link
Copy Markdown
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
Copy Markdown
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.

( state, rootClientId, { includeControlledInnerBlocks = false } = {} ) => {
return map( getBlockOrder( state, rootClientId ), ( clientId ) =>
getBlock( state, clientId )
getBlock( state, clientId, { includeControlledInnerBlocks } )
Copy link
Copy Markdown
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
Copy Markdown
Contributor

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

@noahtallen
Copy link
Copy Markdown
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