Try: Block Library polish #19836

jasmussen · 2020-01-23T09:42:53Z

Desktop:

Medium sized desktop:

Smaller screens and mobile:

For starters, it redesigns the block library:

It is full-height to give lots more space.
It drops the help panel, as we now have a welcome screen.
It moves the tip to the footer.
It detaches the preview and shows it only on hover.

~~Still to do here, is to polish the responsive behavior, possibly apply the new category names, and massage the pixels a bit further.~~

What should also be done is to explore the UI from #18667, as well as add a tab for block patterns, and finally the ability for the block library to open as a modal dialog defaulting to the block patterns tab when opened from the sibling inserter. However these are probably best explored separately.

~~For now and serving as a prototype,~~ I appreciate how much space there is, including whitespace. The detached preview also feels lighter, even if it actually covers a bit more content. The amount of red in the code is also encouraging.

jasmussen · 2020-01-24T12:23:04Z

Alright, I have updated this PR to make it work across breakpoints.

As a first step on the journey towards #17335 (comment), this PR is now ready for review.

To complete that task fully, we still need a separate tab for block patterns, and we need for the library to be possible to open as a modal from the sibling inserter. But as a first step, this PR can now be evaluated on its merits. Your thoughts are most welcome. I have updated the initial PR description with fresh GIFs and screenshots.

ZebulanStanphill · 2020-01-24T20:09:23Z

I like it!

I think Reusable Blocks belong in their own tab. They're sort of like patterns but with shared state across all instances, so I think it makes sense to separate them from standard blocks.

Some issues I noticed:

The preview for the Group block overflows vertically.

The block library is too thin at some viewport widths.

The help/tip text needs some more padding.

Also, the sibling inserter button is missing the white background color it had before, though I haven't checked to see if the same issue exists in master.

jasmussen · 2020-01-27T08:57:48Z

Excellent feedback, Zeb, thank you for the review. Will take a stab at those now.

jasmussen · 2020-01-27T09:44:13Z

Thank you, I believe I fixed the items mentioned, and an edgecase for non-fullscreen that I had forgotten about.

ZebulanStanphill · 2020-01-27T20:35:42Z

Nice! Unfortunately I just discovered another issue. It looks like the inserter doesn't fill the screen width properly on mobile.

It looks like it may have something to do with scrollbars taking up space (or not) on different platforms.

jasmussen · 2020-01-28T06:34:34Z

Thanks. I'm under the weather today, so I'll take it easy and have this fixed tomorrow.

jasmussen · 2020-01-31T08:14:07Z

Thanks to excellent testing, I believe this PR is ready to merge.

Do note, however that as I worked to address #19836 (comment), I discovered an issue that also appears in master, which I've tracked in #19977.

jasmussen · 2020-01-31T10:35:49Z

I'm have discovered and am working on an issue with this iteration which does not work too well when opened from the sibling inserter.

jasmussen · 2020-01-31T11:35:44Z

Fixed an issue where these elaborate layout styles broke the minimalism of the appender library.

As noted, that appender library is likely going to receive more love exploring next steps of #17335 (comment). But for now it's back to its old normal.

jasmussen · 2020-01-31T11:36:13Z

packages/block-editor/src/components/inserter/index.js

-				contentClassName="block-editor-inserter__popover"
+				contentClassName={ classnames(
+					'block-editor-inserter__popover',
+					{ 'is-from-toolbar': !isAppender }


Open to suggestions for a better classname here than is-from-toolbar.

is-top-toolbar-inserter, maybe?

ZebulanStanphill · 2020-01-31T15:48:09Z

I have noticed one more minor issue. The block previews do not appear for the inserter when opened from the placeholder (both the textual Paragraph variant and the rectangle one used in the Group and Column blocks).

jasmussen · 2020-01-31T18:28:43Z

The block previews do not appear for the inserter when opened from the placeholder (both the textual Paragraph variant and the rectangle one used in the Group and Column blocks).

This worked for the briefest of moments in a broken way in this branch, and as I debugged it I was confused too. Turns out its forcefully hidden in master also, and only visible when opened from the top left.

I think unhiding it from that location is a worthwhile discussion, and one that is serendipitous to the next step ideas of making it a dialog when opened from those places. But I would think it may be best to keep the current behavior for this PR?

ZebulanStanphill · 2020-01-31T18:47:17Z

If that's the behavior in master, then I think it's fine to merge this without any further changes (after merge conflicts are resolved).

This starts work on #17335 (comment). For starters, it redesigns the block library: - It is full-height to give lots more space. - It drops the help panel, as we now have a welcome screen. - It moves the tip to the footer. - It detaches the preview and shows it only on hover. Still to do here, is to polish the responsive behavior, possibly apply the new category names, and massage the pixels a bit further. What should also be done is to explore the UI from #18667, as well as add a tab for block patterns, and finally the ability for the block library to open as a modal dialog defaulting to the block patterns tab when opened from the sibling inserter. However these are probably best explored separately.

jasmussen · 2020-02-03T09:11:31Z

packages/block-editor/src/components/inserter/index.js

-				contentClassName="block-editor-inserter__popover"
+				contentClassName={ classnames(
+					'block-editor-inserter__popover',
+					{ 'is-top-toolbar-inserter': ! isAppender }


This variable used to distinguish the visual styling between the top toolbar inserter and the one invoked from the sibling inserter. In a rebase, I failed to verify this still worked before pushing, and somehow it broke. I don't know why it doesn't work anymore. @youknowriad if you have time, can you provide insights into this?

Here's how it looks when broken.

This is definitely not the right variable to check for and in fact we don't have any variable to distinguish these properly at the moment.

I think we follow the CSS suggestions I propose (avoid the large width and use absolute positionning for the preview), we could show the same inserter in all places and it will be shown properly with less code. We might need to add a dedicated prop to remove the preview hideBlockPreview or somthing but the overall design will stay consistent.

To clarify the issue on that screenshot is that the width of the popover is very large (not just the panel on the left) so centering the toggle appear broken. Absolute positioning of the preview fixes that.

youknowriad · 2020-02-11T08:27:02Z

packages/block-editor/src/components/inserter/style.scss

-	@include break-medium {
-		overflow-y: visible;
-		height: $block-inserter-content-height + $block-inserter-tabs-height + $block-inserter-search-height;
+	.block-editor-inserter__toggle {


Why is this not top level?

youknowriad · 2020-02-11T08:29:57Z

packages/block-editor/src/components/inserter/style.scss

+		@include break-medium {
+			overflow-y: visible;
+			height: 92vh; // This is limited by a max-height from the popover component itself.
+			width: 82vw; // This is limited by a max-width.


I don't like that this is using random numbers, this ignores the fact that the inserter is a reusable component that can be used anywhere.

Can we just remove these, have a max-width and height 100% (popover should adapt it according to the available space)?

This is a good thought, and is related to both #19836 (comment) and #19836 (comment).

The challenge is, we need for this to be responsive, i.e. fill the full height of the screen, and at least a big chunk of the screen horizontally at many breakpoints.

Absolute positioning can be used for that normally. But in this case, the popover container acts as a relative positioner, meaning that the coordinates, the width and the height of any child element is relative to that container. And it's 0 pixels wide and tall, which in this case was obviously solved with viewport units.

I'm afraid a refactor of this is probably beyond my skill to address.

youknowriad · 2020-02-11T08:32:09Z

packages/block-editor/src/components/inserter/style.scss

+			pointer-events: none;
+		}
+
+		// Remove the popover styling and apply it instead to each sub panel.


Another option is to consider the preview as an absolute positioned div outside of the flow of the popover. It might be simpler.

youknowriad · 2020-02-28T09:26:10Z

@jasmussen Tried a simpler approach here #20526 let me know what you think?

jasmussen · 2020-03-03T10:07:23Z

Closing in favor of #20526, which is better in most ways!

jasmussen added the [Status] In Progress Tracking issues with work in progress label Jan 23, 2020

jasmussen requested review from ajitbohra, chrisvanpatten, ellatrix, jorgefilipecosta, talldan and youknowriad as code owners January 23, 2020 09:42

jasmussen self-assigned this Jan 23, 2020

jasmussen mentioned this pull request Jan 23, 2020

Block Patterns: Add ability for predefined block layouts to be added to a document #17335

Closed

6 tasks

jasmussen added [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Package] Block library /packages/block-library and removed [Status] In Progress Tracking issues with work in progress labels Jan 24, 2020

jasmussen force-pushed the try/block-library-polish branch from a8fb641 to b67a52b Compare January 31, 2020 07:51

jasmussen force-pushed the try/block-library-polish branch from 37b72ff to 4a371c9 Compare January 31, 2020 10:30

jasmussen force-pushed the try/block-library-polish branch from 4a371c9 to 9075ccb Compare January 31, 2020 10:39

jasmussen commented Jan 31, 2020

View reviewed changes

jasmussen force-pushed the try/block-library-polish branch from f7e9ec1 to f51dc36 Compare January 31, 2020 11:41

Joen Asmussen added 3 commits February 3, 2020 09:50

Add basic responsiveness to panels.

226ae20

Address feedback.

6ebc4ac

Fix issue with library in appender.

956cb60

jasmussen force-pushed the try/block-library-polish branch from f51dc36 to 956cb60 Compare February 3, 2020 08:52

Address feedback.

32b535d

jasmussen commented Feb 3, 2020

View reviewed changes

jasmussen mentioned this pull request Feb 5, 2020

Edit Site: Expose "global style" tools #19255

Closed

remove help panel setting

afebef8

youknowriad reviewed Feb 11, 2020

View reviewed changes

This was referenced Feb 13, 2020

Try/hint of more blocks in inserter #19609

Closed

In the block inserter, hint that there are more blocks below 'Most Used' #17872

Closed

shaunandrews mentioned this pull request Feb 14, 2020

Blocks: Contextual tips tied to specific search queries #20196

Closed

jasmussen mentioned this pull request Feb 26, 2020

Should "common blocks" comprise the most commonly-used blocks? #11515

Closed

youknowriad mentioned this pull request Feb 28, 2020

Make the inserter full height #20526

Merged

jasmussen closed this Mar 3, 2020

youknowriad deleted the try/block-library-polish branch March 3, 2020 16:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: Block Library polish #19836

Try: Block Library polish #19836

jasmussen commented Jan 23, 2020 •

edited

Loading

jasmussen commented Jan 24, 2020 •

edited

Loading

ZebulanStanphill commented Jan 24, 2020

jasmussen commented Jan 27, 2020

jasmussen commented Jan 27, 2020

ZebulanStanphill commented Jan 27, 2020

jasmussen commented Jan 28, 2020

jasmussen commented Jan 31, 2020

jasmussen commented Jan 31, 2020

jasmussen commented Jan 31, 2020

jasmussen Jan 31, 2020

ZebulanStanphill Jan 31, 2020

ZebulanStanphill commented Jan 31, 2020

jasmussen commented Jan 31, 2020

ZebulanStanphill commented Jan 31, 2020

jasmussen Feb 3, 2020

youknowriad Feb 11, 2020

youknowriad Feb 11, 2020 •

edited

Loading

youknowriad Feb 11, 2020

youknowriad Feb 11, 2020

jasmussen Feb 12, 2020

youknowriad Feb 11, 2020

youknowriad commented Feb 28, 2020

jasmussen commented Mar 3, 2020

Try: Block Library polish #19836

Try: Block Library polish #19836

Conversation

jasmussen commented Jan 23, 2020 • edited Loading

jasmussen commented Jan 24, 2020 • edited Loading

ZebulanStanphill commented Jan 24, 2020

jasmussen commented Jan 27, 2020

jasmussen commented Jan 27, 2020

ZebulanStanphill commented Jan 27, 2020

jasmussen commented Jan 28, 2020

jasmussen commented Jan 31, 2020

jasmussen commented Jan 31, 2020

jasmussen commented Jan 31, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZebulanStanphill commented Jan 31, 2020

jasmussen commented Jan 31, 2020

ZebulanStanphill commented Jan 31, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad Feb 11, 2020 • edited Loading

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

youknowriad commented Feb 28, 2020

jasmussen commented Mar 3, 2020

jasmussen commented Jan 23, 2020 •

edited

Loading

jasmussen commented Jan 24, 2020 •

edited

Loading

youknowriad Feb 11, 2020 •

edited

Loading