Improve child blocks API's and UI. #7003

jorgefilipecosta · 2018-05-29T15:42:10Z

Description

This PR extends the blocks API with two new selectors getChildBlocks and hasChildBlocks.
A class is added for inserter items with children and the UI is changed using the new class. Now we have a special design in blocks with children (this design is in progress).
A new area that appears when we are inserting blocks inside blocks with children was created.

gziolo · 2018-05-29T16:52:09Z

blocks/store/selectors.js

+ */
+export const hasChildBlocks = createSelector(
+	( state, blockName ) => {
+		return getChildBlocks( state, blockName ).length > 0;


This selector only wraps another selector. It shouldn’t use another layer of caching.

Nice catch @gziolo, I updated the code!

mtias · 2018-05-29T17:41:17Z

Closes #6998.

gziolo · 2018-05-29T18:10:53Z

One of the unit tests is failing.

jorgefilipecosta · 2018-05-29T22:23:04Z

Hi @gziolo the test case was fixed.
Thank @mtias for the design updates.

mtias · 2018-05-30T10:28:19Z

Pushed some further tweaks to the design:

@jasmussen I think the biggest thing missing is addressing the blurry icons :)

jasmussen · 2018-05-30T11:04:18Z

Nice work. I unblurred the icons :D

jorgefilipecosta · 2018-05-30T13:59:39Z

I rebased this PR and it seems to be working fine.

gziolo · 2018-05-30T14:13:44Z

editor/components/inserter/menu.js

+						<div className="editor-inserter__child-blocks">
+							<div className="editor-inserter__parent-block-header">
+								<div className="editor-inserter__parent-block-icon">
+									<BlockIcon icon={ rootBlockIcon } />


BlockIcon should be rendered only when the icon is set

Normally we never do this check because BlockIcon handles it but in this case, we can do it because we have wrapping div for the icon.

gziolo · 2018-05-30T14:17:22Z

editor/components/inserter/menu.js

@@ -176,6 +184,18 @@ export class InserterMenu extends Component {
 				/>

 				<div className="editor-inserter__results">
+					{ !! childItems.length &&


Can we extract this code to a new component to avoid confusing conditional checks for an icon and title? As far as I understand when there are child blocks then the icon and title must be set, right?

Yes if we have childblocks the icon and title are set unless the block did not use a title/item, but that's part of the block responsibility.

The child blocks rendering logic was extracted to a separate component.

gziolo · 2018-05-30T14:18:12Z

blocks/store/selectors.js

+ *
+ * @return {Array} Array of child block names.
+ */
+export const getChildBlockNames = createSelector(


This selector seems to be quite important so let’s add unit tests to avoid regressions in the future.

Unit tests added 👍

gziolo · 2018-05-30T14:22:20Z

editor/components/inserter/menu.js

 		const filteredItems = searchItems( items, filterValue );

+		const childItems = rootChildBlocks ?


rootChildBlocks is always an array, so in JS it’s always truthy.

This makes the search field a bit bigger and nicer, and changes the height to match better the contents.

jasmussen · 2018-05-30T14:29:26Z

Pushed a little polish.

mtias · 2018-05-30T16:04:02Z

editor/components/inserter/child-items-list.js

@@ -0,0 +1,29 @@
+/**


This could just be called ChildBlocks

Renamed 👍

gravityrail

LGTM! 🎉

gziolo · 2018-05-30T17:30:53Z

editor/components/inserter/menu.js

@@ -176,6 +182,14 @@ export class InserterMenu extends Component {
 				/>

 				<div className="editor-inserter__results">
+					<ChildBlocks
+						rootBlockIcon={ rootBlockIcon }


Did you consider to use withSelect directly on ChildBlocks component instead of passing down rootBlockIcon and rootBlockTitle?

gziolo · 2018-05-30T17:32:20Z

editor/components/inserter/child-blocks.js

+import BlockIcon from '../block-icon';
+
+function ChildBlocks( { rootBlockIcon, rootBlockTitle, items, ...props } ) {
+	if ( ! items || ! items.length ) {


Can we use ifCondition HOC here?

gziolo

Code changes look good, I left 2 more questions, but definitely not blockers. Nice work 👍

aduth · 2018-05-30T17:52:50Z

blocks/api/registration.js

+ * @param {string} blockName Block type name.
+ *
+ * @return {Array} Array of child block names.
+ */


Not sure a JSDoc parser would detect this as being "attached" to the getChildBlockNames function with the newline between.

The line breaks were corrected.

aduth · 2018-05-30T17:54:48Z

editor/components/inserter/item-list.js

+									'editor-inserter__item',
+									getBlockMenuDefaultClassName( item.id ),
+									{
+										'editor-inserter__item-with-childs': item.hasChildBlocks,


Grammar: "childs" -> "children"

This is a modifier, so could be written as one, e.g. has-children (reference)

aduth · 2018-05-30T17:57:52Z

editor/store/selectors.js

@@ -1397,6 +1397,7 @@ export const getInserterItems = createSelector(
 				isDisabled,
 				utility: calculateUtility( blockType.category, count, isContextual ),
 				frecency: calculateFrecency( time, count ),
+				hasChildBlocks: hasChildBlocks( blockType.name ),


How is the cache bust if we proceed to register a block defining blockType.name as a valid parent ?

We clean the cache each time state.blockTypes changes, so when we register a block the cache is invalidated.

We clean the cache each time state.blockTypes changes, so when we register a block the cache is invalidated.

But state.blockTypes (from core/blocks store) is not considered when we call getInserterItems (from core/editor store).

I understand now the problem, getInserterItems is cached and depends on core/blocks store when core/blocks change the cache may not be updated. I think this is an already existing problem. Before if we register a new block a new item should exist but the cache may not be updated, it is not easy to spot because the cache updates a lot.

Thank you for clarifying this issue I will try to propose a solution to this problem!

jorgefilipecosta · 2018-05-31T11:19:41Z

Thank you @jasmussen and @mtias for the design improvements. Thank you @aduth, @gravityrail, and @gziolo for the reviews!

jasmussen · 2018-06-01T07:38:20Z

Great work, thank you.

I'm not sure this PR is the cause, but recently I've started seeing duplicate items in the slash command:

Simply search for "/image" and you'll see it. Ring any bells?

aduth · 2018-06-06T14:01:42Z

@jasmussen Do you still see this on master? I'm not able to reproduce. Can we create a separate issue if it's still present?

jorgefilipecosta · 2018-06-06T14:07:32Z

Sorry, @jasmussen I missed the comment but like @aduth I'm not being able to reproduce the issue in master or in the last release 3.0.1. Are you still able to reproduce the problem?

jasmussen · 2018-06-06T14:14:19Z

@aduth @jorgefilipecosta Can confirm that I'm not seeing this anymore. I don't know what fixed it, I could swear I saw it for /gallery as soon as yesterday. But I can't repro.

Edit: also seeing it for Cover Image now.

jasmussen · 2018-06-07T07:16:57Z

@aduth @jorgefilipecosta I now see it in master again. I have zero idea why it reappeared. And I can't reproduce it for all blocks. I now see it for Heading and Gallery:

gziolo reviewed May 29, 2018

View reviewed changes

jorgefilipecosta force-pushed the add/child-blocks-improvements branch 4 times, most recently from 2fb62dc to cc62ab9 Compare May 29, 2018 17:22

jorgefilipecosta force-pushed the add/child-blocks-improvements branch from 464fff0 to fe478b7 Compare May 29, 2018 22:20

mtias force-pushed the add/child-blocks-improvements branch from 1339854 to 71239bb Compare May 30, 2018 10:27

mtias added this to the 3.0 milestone May 30, 2018

Improve child blocks API's and UI.

c2ff68c

jorgefilipecosta force-pushed the add/child-blocks-improvements branch from 4afef04 to 4e9b6b9 Compare May 30, 2018 13:27

mtias and others added 3 commits May 30, 2018 14:33

Adjust visual design of stacked block.

da24c3e

Polish design of block cards in the inserter.

8d564e9

Don't blur the icons.

562c558

jorgefilipecosta force-pushed the add/child-blocks-improvements branch from 4e9b6b9 to 562c558 Compare May 30, 2018 13:33

gziolo reviewed May 30, 2018

View reviewed changes

Polish the paddings and search field.

0334269

This makes the search field a bit bigger and nicer, and changes the height to match better the contents.

mtias reviewed May 30, 2018

View reviewed changes

gravityrail approved these changes May 30, 2018

View reviewed changes

Added test cases and other improvements.

a943aa6

jorgefilipecosta force-pushed the add/child-blocks-improvements branch from 45ae97f to a943aa6 Compare May 30, 2018 16:30

gziolo reviewed May 30, 2018

View reviewed changes

gziolo approved these changes May 30, 2018

View reviewed changes

aduth reviewed May 30, 2018

View reviewed changes

revisions

7a3e385

jorgefilipecosta force-pushed the add/child-blocks-improvements branch from eb6914f to 7a3e385 Compare May 31, 2018 11:02

jorgefilipecosta merged commit c93b778 into master May 31, 2018

jorgefilipecosta deleted the add/child-blocks-improvements branch May 31, 2018 11:16

jorgefilipecosta mentioned this pull request May 31, 2018

Inserter Tweaks for Child Blocks #6998

Closed

This was referenced May 31, 2018

Simplify the Inserter accessibility #7058

Merged

Inserter UI adjustments #7059

Closed

		const filteredItems = searchItems( items, filterValue );

		const childItems = rootChildBlocks ?

Improve child blocks API's and UI. #7003

Improve child blocks API's and UI. #7003

Conversation

jorgefilipecosta commented May 29, 2018 • edited Loading

Description

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtias commented May 29, 2018

gziolo commented May 29, 2018

jorgefilipecosta commented May 29, 2018

mtias commented May 30, 2018

jasmussen commented May 30, 2018

jorgefilipecosta commented May 30, 2018

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasmussen commented May 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gravityrail left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta May 31, 2018 • edited Loading

Choose a reason for hiding this comment

jorgefilipecosta commented May 31, 2018

jasmussen commented Jun 1, 2018

aduth commented Jun 6, 2018

jorgefilipecosta commented Jun 6, 2018

jasmussen commented Jun 6, 2018 • edited Loading

jasmussen commented Jun 7, 2018

jorgefilipecosta commented May 29, 2018 •

edited

Loading

jorgefilipecosta May 31, 2018 •

edited

Loading

jasmussen commented Jun 6, 2018 •

edited

Loading