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

Add the initial version of the Block Patterns API and UI as a sidebar plugin #20354

Merged
merged 6 commits into from Feb 26, 2020

Conversation

@youknowriad
Copy link
Contributor

youknowriad commented Feb 21, 2020

Refs #17335

This is the MVP of blocks patterns:

  • A plugin sidebar listing a static list of block patterns
  • Clicking a block pattern add it to the current insert position

Note I shamelessly stole two block patterns from WPHubDesign plugin while waiting for #20345

Capture d’écran 2020-02-21 à 9 36 34 AM

@github-actions

This comment has been minimized.

Copy link

github-actions bot commented Feb 21, 2020

Size Change: +2.04 kB (0%)

Total Size: 866 kB

Filename Size Change
build/annotations/index.js 3.43 kB -1 B
build/autop/index.js 2.58 kB +1 B
build/block-directory/index.js 6.02 kB +1 B
build/block-editor/index.js 104 kB +520 B (0%)
build/block-editor/style-rtl.css 10.5 kB +710 B (6%) 🔍
build/block-editor/style.css 10.5 kB +715 B (6%) 🔍
build/block-library/editor-rtl.css 7.66 kB -13 B (0%)
build/block-library/editor.css 7.66 kB -8 B (0%)
build/block-library/index.js 116 kB +1.8 kB (1%)
build/block-library/style-rtl.css 7.49 kB +16 B (0%)
build/block-library/style.css 7.5 kB +16 B (0%)
build/block-serialization-default-parser/index.js 1.65 kB +1 B
build/blocks/index.js 57.6 kB +4 B (0%)
build/components/index.js 191 kB +835 B (0%)
build/components/style-rtl.css 15.5 kB -529 B (3%)
build/components/style.css 15.5 kB -535 B (3%)
build/compose/index.js 5.76 kB -2 B (0%)
build/data-controls/index.js 1.03 kB -1 B
build/data/index.js 8.22 kB -3 B (0%)
build/date/index.js 5.37 kB +4 B (0%)
build/deprecated/index.js 772 B +1 B
build/dom-ready/index.js 568 B -1 B
build/dom/index.js 3.06 kB -1 B
build/edit-post/index.js 90.9 kB +228 B (0%)
build/edit-post/style-rtl.css 8.59 kB -102 B (1%)
build/edit-post/style.css 8.58 kB -94 B (1%)
build/edit-site/index.js 4.62 kB +38 B (0%)
build/edit-site/style-rtl.css 2.51 kB -257 B (10%) 👏
build/edit-site/style.css 2.51 kB -255 B (10%) 👏
build/edit-widgets/index.js 4.41 kB +51 B (1%)
build/edit-widgets/style-rtl.css 2.59 kB -208 B (8%)
build/edit-widgets/style.css 2.58 kB -207 B (8%)
build/editor/editor-styles-rtl.css 325 B -2 B (0%)
build/editor/editor-styles.css 327 B -1 B
build/editor/index.js 44.6 kB -520 B (1%)
build/editor/style-rtl.css 4.01 kB -115 B (2%)
build/editor/style.css 4 kB -111 B (2%)
build/element/index.js 4.45 kB -2 B (0%)
build/format-library/index.js 7.6 kB +2 B (0%)
build/format-library/style-rtl.css 502 B +2 B (0%)
build/format-library/style.css 502 B +1 B
build/html-entities/index.js 622 B +1 B
build/i18n/index.js 3.48 kB +37 B (1%)
build/is-shallow-equal/index.js 710 B -1 B
build/keyboard-shortcuts/index.js 2.3 kB +4 B (0%)
build/list-reusable-blocks/style-rtl.css 226 B +11 B (4%)
build/list-reusable-blocks/style.css 226 B +10 B (4%)
build/media-utils/index.js 4.85 kB -1 B
build/nux/index.js 3.02 kB +1 B
build/plugins/index.js 2.54 kB +1 B
build/priority-queue/index.js 879 B +1 B
build/rich-text/index.js 14.3 kB -3 B (0%)
build/server-side-render/index.js 2.54 kB -2 B (0%)
build/token-list/index.js 1.27 kB -1 B
build/url/index.js 4 kB +1 B
build/warning/index.js 1.14 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.01 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/core-data/index.js 10.5 kB 0 B
build/escape-html/index.js 733 B 0 B
build/hooks/index.js 1.92 kB 0 B
build/keycodes/index.js 1.68 kB 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/primitives/index.js 1.49 kB 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

@gziolo
gziolo approved these changes Feb 21, 2020
Copy link
Member

gziolo left a comment

Do you plan to put Block Patterns API behind the feature flag? I think it should be considered because it seems like a common approach when new features are under development.

This PR still needs design review.

const blocks = useMemo( () => parse( content ), [ content ] );

return (
<div

This comment has been minimized.

Copy link
@gziolo

gziolo Feb 21, 2020

Member

Unrelated to this PR, we probably should add more capabilities to the Button component:

<Button
    as="div"
    className="block-editor-patterns__item"
    onClick={ () => onClick( blocks ) }
>

Behind the scenes, we would handle:

  • role
  • onKeyDown
  • tabIndex

@diegohaz - is it how Reakit handles custom buttons? :)

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 21, 2020

Author Contributor

The Button has certain design choices in it, I don't see why I should use it here.

This comment has been minimized.

Copy link
@gziolo

gziolo Feb 21, 2020

Member

The Button has certain design choices in it, I don't see why I should use it here.

Such a button would have to live in @wordpress/primitives, I'm talking about accessibility aspects being sorted out. I forgot about visuals :)

This comment has been minimized.

Copy link
@diegohaz

diegohaz Feb 21, 2020

Member

Off the top of my head, this is the list of things you should implement on non-native buttons:

  • role
  • tabIndex
  • onKeyDown for Enter (trigger the button)
  • onKeyDown for Space (activate the button, like a mouse down, :active)
  • onKeyUp for Space (trigger the button just like Enter)
  • aria-disabled (should add the attribute and call .preventDefault() and .stopPropagation on many events. Setting pointer-events: none may help with that, although it's not completely accurate).

Except for Space, that is handled like Enter (otherwise the code would be overcomplicated), Reakit's Button does all that when it's not rendered as the native button element. But it's much simpler to just use the native button. Why not use the native button here?

This comment has been minimized.

Copy link
@diegohaz

diegohaz Feb 21, 2020

Member

If you don't plan to show this component disabled, I would say that the implementation is okay though.

}

function BlockPatterns( { patterns } ) {
const getBlockInsertionPoint = useSelect( ( select ) => {

This comment has been minimized.

Copy link
@gziolo

gziolo Feb 21, 2020

Member

Hooks are better at so many levels. I recall how much work was required to pass down selector to action to call it when a callback is executed. Here, you get everything out of the box :)


registerPlugin( 'edit-post', {
render() {
return (
<>
<BlockPatterns />

This comment has been minimized.

Copy link
@gziolo

gziolo Feb 21, 2020

Member

Cool idea to use Plugins API. Once we have the design sorted out, we can add a new slot in the inserter and everything should still work.

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Feb 21, 2020

This is great! A few things I'm running into:

image

Adding some patterns seems to mess up with the templates a bit.

Also if you add a pattern inside the inner block of another, the editor crashes for me.

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Feb 21, 2020

It'd be good to not focus on any block when a pattern is inserted, the jump and arbitrary focus seems weird.

@enriquesanchez enriquesanchez added this to In progress in Block Patterns via automation Feb 21, 2020
@enriquesanchez

This comment has been minimized.

Copy link
Contributor

enriquesanchez commented Feb 21, 2020

This feels really good! I mirror @mtias's comments.

It'd be good to not focus on any block when a pattern is inserted, the jump and arbitrary focus seems weird.

I'm wrapping inside a group block the patterns I'm creating for #20345. My expectation was that focus would go to the group block (the wrapper), I think this would be a more expected result. What do you think?

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Feb 24, 2020

Pushed some small tweaks:

  • The selection is kept as is when inserting a pattern
  • A snackbar is shown

Let me know how it feels?

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Feb 24, 2020

Using the notice and not selecting feels a lot better to me. I'm still getting this slot polution, though, after inserting a pattern a few times:

image

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Feb 24, 2020

@mtias It should be fixed now, good catch.

@@ -0,0 +1,5 @@
{
"__file": "wp_block",
"title": "Teams",

This comment has been minimized.

Copy link
@mtias

mtias Feb 24, 2020

Contributor

We'll need to consider translations here eventually.

This comment has been minimized.

Copy link
@youknowriad

youknowriad Feb 24, 2020

Author Contributor

Right! since this is potentially just a temporary location, I'm ok just using php for these for now.

lib/pattterns/teams.php

rootClientId,
false
);
createSuccessNotice(

This comment has been minimized.

Copy link
@mtias

mtias Feb 24, 2020

Contributor

This is working well for me.

@mtias
mtias approved these changes Feb 24, 2020
Copy link
Contributor

mtias left a comment

This is looking good for a first pass.

Block Patterns automation moved this from In progress to Reviewer approved Feb 24, 2020
@shaunandrews

This comment has been minimized.

Copy link
Contributor

shaunandrews commented Feb 24, 2020

Works as expected.

I'm not in love with the box-shadow and transform: scale on :hover, so I pushed some CSS changes to hover styles, and cleaned things up a bit. Feel free to revert if you don't like it.

@shaunandrews

This comment has been minimized.

Copy link
Contributor

shaunandrews commented Feb 24, 2020

I just noticed I have to click to SnackBar notices to dismiss them — is that intentional? I expected them to go away on their own after a few seconds.

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Feb 24, 2020

They do go away on their own. Are they stuck for you?

@mapk

This comment has been minimized.

Copy link
Contributor

mapk commented Feb 25, 2020

I made a minor adjustment to help center the previews.

BEFORE

Screen Shot 2020-02-24 at 10 54 06 PM

AFTER

Screen Shot 2020-02-24 at 10 53 31 PM

@mapk

This comment has been minimized.

Copy link
Contributor

mapk commented Feb 25, 2020

I also noticed that the Testimonials block pattern isn't included in a Group block which is probably fine, but when I wanted to delete it, I found I had to select all the blocks that it placed on the page to delete them. I'd like to select a Group block for a particular pattern and delete it altogether knowing I'm targeting all the blocks that got added to my page.

Any thoughts on including all blocks of a pattern into one Group block or other container block when adding them to the page?

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Feb 25, 2020

Any thoughts on including all blocks of a pattern into one Group block or other container block when adding them to the page?

Technically speaking, patterns don't need a wrapper, but I can add it here.

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Feb 25, 2020

Technically speaking, patterns don't need a wrapper, but I can add it here.

Let's have one without a wrapper so that we can get a sense for the experience it provides.

@shaunandrews

This comment has been minimized.

Copy link
Contributor

shaunandrews commented Feb 25, 2020

They do go away on their own. Are they stuck for you?

Ah, I was impatient I guess. They do go away, but slower than I was expecting.

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

youknowriad commented Feb 26, 2020

To split the patterns library discussion from the implementation of the UI. I'm considering merging this PR as is to continue on the UI iterations separately and allow designers to submit patterns as well in parallel. We should not let the current patterns sit for a long time though :P

@youknowriad youknowriad merged commit 287498f into master Feb 26, 2020
3 checks passed
3 checks passed
build
Details
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
Block Patterns automation moved this from Reviewer approved to Done Feb 26, 2020
@youknowriad youknowriad deleted the try/block-patterns-v0 branch Feb 26, 2020
@github-actions github-actions bot added this to the Gutenberg 7.7 milestone Feb 26, 2020
@niklasp

This comment has been minimized.

Copy link
Contributor

niklasp commented Mar 11, 2020

Where do I find block patterns in 7.7 ?

@mtias

This comment has been minimized.

Copy link
Contributor

mtias commented Mar 11, 2020

They are a bit hidden now while the interface is iterated upon:

image

@niklasp

This comment has been minimized.

Copy link
Contributor

niklasp commented Mar 11, 2020

Just a note for usability. In mobile phone screen Width 420px after clicking a "pattern" the pattern select modal stays open so there is no visual feedback that the block was inserted. Imho it should close on click.

@mcsf mcsf mentioned this pull request Mar 13, 2020
0 of 6 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.