Block List: Remove createInnerBlockList utility / context #7192

aduth · 2018-06-06T20:47:10Z

This pull request seeks to remove the createInnerBlockList utility function and block context property which, as described in #6943, was introduced at a time when the InnerBlocks component could not depend on components in Editor.

This should be a simplification of block context, potentially with some performance and/or memory improvements, as an intermediary component is no longer created and instead the block context contains simpler values: a uid which already existed, a renderBlockMenu function which can hopefully be eliminated at some point. Previously we would create, cache, and pass through a custom component definition for each block, even if that block did not support nesting.

Testing instructions:

Verify there are no regressions to the display an interaction of nested blocks. Of note:

Previewing shared nested blocks in the inserter should work as expected
renderBlockMenu (what's this for again, @youknowriad ?)

aduth · 2018-06-06T20:50:13Z

editor/components/block-edit/index.js


 		return {
-			...prevState,


As part of #6419 (ead8dc5), I'm guessing this was previously trying to avoid clobbering the focusedElement and setFocusedElement assigned in constructor. From my testing, this doesn't happen: The return value from getDerivedStateFromProps is applied as patch (same as setState):

Demo: https://codepen.io/aduth/pen/YvGyag

cc @gziolo

I will test it tomorrow. I think it was introduced before and was trying to prevent state updates when props didn’t change by returning null. Maybe your proposal works the same, it would be awesome 😃

I found my commit which I used to test BlockEdit updates: 909844f. Great refactoring, everything works as expected. I didn't discover any regression and the code is much cleaner 💯

youknowriad · 2018-06-07T08:34:08Z

renderBlockMenu (what's this for again, @youknowriad ?)

This is a way to extend the BlockMenu in the edit-post module. I think we can probably replace it by a Slot. I believe even plugin authors could be interested to hook into this menu. I'll give it a shot in a separate PR.

youknowriad

I had this in mind as well :) Nice refactoring 👍

youknowriad · 2018-06-07T08:37:57Z

editor/components/index.js

@@ -5,6 +5,7 @@ export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
+export { withBlockEditContext } from './block-edit/context';


I'd prefer if we don't expose this one to avoid confusion with Block edit props for block authors. Hopefully we can get rid of createInnerBlockList

Well, it would allow me to refactor Gallery and Image to remove focus when an image is clicked so I'm not that against exposing it :)

However, I think we agreed that we should avoid exposing this context if possible. If there is a better way to do it, then let's keep this context internal as long as necessary.

If we merge #7199, we shouldn't need to export it. It's used exclusively by the shared block in its rendering of <BlockEdit /> which needs renderBlockMenu. If we can make it work with just uid (already passed as a prop to block's edit), then it can be avoided.

Let’s merge #7199 in that case 🎉

gziolo · 2018-06-07T16:59:11Z

I had this in mind as well :) Nice refactoring 👍

Welcome to the club. I tried to keep away myself from it because of the complexity :)

gziolo · 2018-06-07T19:13:45Z

editor/components/inner-blocks/index.js

 }

 InnerBlocks = compose( [
-	withContext( 'BlockList' )(),
-	withContext( 'uid' )(),
+	withBlockEditContext( ( context ) => pick( context, [ 'uid', 'renderBlockMenu' ] ) ),


In #7199 @youknowriad proposes how to get rid of renderBlockMenu from the context. Would it be possible to pass down uid to InnerBlocks instead to avoid exposing it through BlockEditContext?

In #7199 @youknowriad proposes how to get rid of renderBlockMenu from the context. Would it be possible to pass down uid to InnerBlocks instead to avoid exposing it through BlockEditContext?

Do you mean pass down as in by the developer in their own rendering of the component? Technically it's possible because we do pass the UID as a prop to edit, but there was a bit of quality-of-life magic meant to be provided by the InnerBlocks. The component also lives inside editor so it doesn't seem like it should be unadvisable to rely on withBlockEditContext ?

The component also lives inside editor so it doesn't seem like it should be unadvisable to rely on withBlockEditContext ?

Right, I saw a file from core-blocks updated and assumed this one belongs there, too. My bad, please skip my comment :)

aduth · 2018-06-19T20:55:00Z

Rebased after the merge of #7199. Now no longer need to expose withBlockEditContext from the @wordpress/editor module.

youknowriad · 2018-06-20T12:36:09Z

editor/components/inner-blocks/index.js

-		</div>
-	);
+class InnerBlocks extends Component {
+	componentWillReceiveProps( nextProps ) {


Can we update this to componentDidUpdate at the same time?

Can we update this to componentDidUpdate at the same time?

I went down this path and started to realize there's a fair bit about the behavior of block list settings that needs fixing / improvement. Will make a follow up pull request immediately after this merge.

youknowriad

Nice refactoring

aduth added [Type] Performance Related to performance efforts [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P [Type] Code Quality Issues or PRs that relate to code quality labels Jun 6, 2018

aduth commented Jun 6, 2018

View reviewed changes

youknowriad reviewed Jun 7, 2018

View reviewed changes

youknowriad mentioned this pull request Jun 7, 2018

Replace the renderBlockMenu prop with a Slot #7199

Merged

gziolo reviewed Jun 7, 2018

View reviewed changes

aduth force-pushed the remove/create-inner-block-list branch from 9d305d1 to 53b58f0 Compare June 19, 2018 20:51

Block List: Remove createInnerBlockList utility / context

89087af

aduth force-pushed the remove/create-inner-block-list branch from 53b58f0 to 89087af Compare June 19, 2018 20:54

youknowriad reviewed Jun 20, 2018

View reviewed changes

youknowriad approved these changes Jun 20, 2018

View reviewed changes

aduth merged commit 6ba1458 into master Jun 20, 2018

aduth deleted the remove/create-inner-block-list branch June 20, 2018 18:07

aduth restored the remove/create-inner-block-list branch June 20, 2018 18:11

aduth deleted the remove/create-inner-block-list branch June 20, 2018 18:11

aduth mentioned this pull request Jun 20, 2018

Inner Blocks: Refactor treatment of block settings #7418

Merged

mtias added this to the 3.1 milestone Jun 21, 2018

gziolo mentioned this pull request Apr 1, 2019

Block Editor: move selection state from RichText to the store #14640

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Block List: Remove createInnerBlockList utility / context #7192

Block List: Remove createInnerBlockList utility / context #7192

aduth commented Jun 6, 2018 •

edited

Loading

aduth Jun 6, 2018 •

edited

Loading

gziolo Jun 6, 2018

gziolo Jun 7, 2018

youknowriad commented Jun 7, 2018

youknowriad left a comment

youknowriad Jun 7, 2018

gziolo Jun 7, 2018

aduth Jun 8, 2018

gziolo Jun 8, 2018

gziolo commented Jun 7, 2018

gziolo Jun 7, 2018

aduth Jun 8, 2018

gziolo Jun 8, 2018

aduth commented Jun 19, 2018

youknowriad Jun 20, 2018

aduth Jun 20, 2018

youknowriad left a comment

Block List: Remove createInnerBlockList utility / context #7192

Block List: Remove createInnerBlockList utility / context #7192

Conversation

aduth commented Jun 6, 2018 • edited Loading

aduth Jun 6, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Jun 7, 2018

youknowriad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Jun 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth commented Jun 19, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

aduth commented Jun 6, 2018 •

edited

Loading

aduth Jun 6, 2018 •

edited

Loading