Revisit the bundled block patterns #29973

MaggieCabrera · 2021-03-18T11:15:34Z

Description

This PR adds the block patterns discussed in #28921

How has this been tested?

These have been tested using Empty Theme

Screenshots

Nature

Art

Architecture

Types of changes

New feature

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
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.

mtias · 2021-03-18T11:26:57Z

lib/block-patterns.php

+	);
+}
+
+register_block_pattern_category( 'nature', array( 'label' => _x( 'Nature', 'Block pattern category' ) ) );


I think the categories should be a bit more functional: text, columns, galleries, hero / cover, etc. Can we revise them?

Agreed — I've left some category recommendations below.

kjellr · 2021-03-18T13:44:12Z

I'm sharing some feedback (and suggested categories) for each of the patterns below. I need to do another round of testing these on mobile to see how they scale down on mobile, so stay tuned for that.

I also noticed that this new set doesn't include any replacements for the "Buttons" patterns that are currently bundled with core. I think it makes sense to keep those around, so either myself, @beafialho, or @melchoyce will share a couple updated button-only patterns in this thread later today.

Media + text	Two Images side by side

Let's rename to "Media & text in a full height container" (Category: Headers)	Let's just make the "I" in "Images" lowercase. (Category: Gallery)

Quote	Cover with two columns

Let's rename to "Large header with left-aligned text". (Category: Headers)	Let's rename to "Large header with two columns". (Category: Headers)

Three columns with images and text	Quote with portrait

(Category: Gallery)	Let's rename to just "Quote", so it replaces the existing default Quote pattern. (Category: Text)

Hero section	Media + text

Rename to "Large header with text and a button. I think the text needs a white color assigned. (Category: Headers)	Rename to "Media & text with image on the right", and remove the wrapping cover block. (Category: Headers)

Two columns text and title	Three columns list

Rename to "Two columns of text with offset heading"(Category: Text)	Rename to "Three columns of text".(Category: Text)

Two columns text and title	After

Rename to "Two columns of text" to replace the existing default pattern with this title. (Category: Text)	I think we should remove the blue text color here, and let it inherit the theme's default. (Category: Text)

Three Images Gallery	Two Columns list

Rename to "Three columns with offset images", remove white background color for the columns block — this can just inherit the theme's default background. (Category: Gallery)	Rename to "Two columns of text". Remove white background color and text/link colors — these can just inherit the theme's defaults. (Category: Text)

Three Images Gallery

Rename to "Media and text with image on the right". Let's also rebuild this to use a Media & Text block instead of the two columns it uses now. (Category: Headers)

kjellr · 2021-03-18T17:07:36Z

also noticed that this new set doesn't include any replacements for the "Buttons" patterns that are currently bundled with core. I think it makes sense to keep those around, so either myself, @beafialho, or @melchoyce will share a couple updated button-only patterns in this thread later today.

Here's an additional buttons-only pattern from @beafialho that we can include.

Title: Two Buttons
Category: Buttons

kjellr · 2021-03-18T18:45:03Z

I checked the responsive behavior of these, and there are a ton of issues with the ones that use larger text. For themes that don't have wide content widths (Like Twenty Fifteen for example), this is a problem all the time, not just on smaller screens.

I don't think we'll be able to get those working as designed unless we have a fluid font-size option available, as per #23323 or #24480.

We could technically make the font size smaller for these, but it's going to negatively effect the design. 😞 I'm interested in other designers' thoughts on this.

Screenshots

mtias · 2021-03-18T18:53:52Z

Let's try to add variable font-size and see if that works. I'm interested in a solution that makes things work well by default without a lot of tweaks at every breakpoint.

kjellr · 2021-03-18T19:11:12Z

If Gutenberg added the option of using vw units for custom font sizes, we'd be able to get these working pretty smoothly out of the box.

MaggieCabrera · 2021-03-19T11:02:35Z

Aren't custom units something a theme opts in? I'm not aware of the context of the decision to not add them globally for every theme. If we add them for font sizes, should we do that in the same way? In that case, that won't be universal and not all themes will be able to benefit from them.

kjellr · 2021-03-19T12:07:10Z

Aren't custom units something a theme opts in?

I think that got implemented globally... I know that for example, the Custom Units control in the cover block height field works even if the theme hasn't opted in.

But even if that's not the case, I'd expect that if we used custom units in a block pattern, they'd work even if the theme didn't specifically opt in. That's the way it works with line height: If a pattern uses custom line height, it respects that setting even if the theme hasn't opted in.

mtias · 2021-03-19T12:16:51Z

But even if that's not the case, I'd expect that if we used custom units in a block pattern, they'd work even if the theme didn't specifically opt in. That's the way it works with line height: If a pattern uses custom line height, it respects that setting even if the theme hasn't opted in.

Agreed. Also cc @nosolosw as it seems related to the supports decoupling.

oandregal · 2021-03-22T17:51:57Z

👋 took a look at this, and it seems to be that there are two things here:

That the patterns can use vw units instead of px in inlined font sizes: this can be done already. In the video I did it manually but patterns should also work. In the font size UI control, it is be set to "custom" and a blank value.

210322-1848-font-size-vw-units.mp4

The second issue is allowing more units in the UI font size control. I seem to remember that Jorge and/or @ItsJonQ looked at this at some point as per How to absorb font size units #25137 and Add relative units for font size option #23323 (comment) ― Q, pinging in case it rings any bell or can lend a hand.

MaggieCabrera · 2021-03-22T17:56:16Z

* The second issue is allowing more units in the UI font size control. I seem to remember that Jorge and/or @ItsJonQ looked at this at some point as per #25137 and [#23323 (comment)](https://github.com/WordPress/gutenberg/issues/23323#issuecomment-702283277) ― Q, pinging in case it rings any bell or can lend a hand.

I've been investigating this myself but I'm afraid I am missing a lot of context on how components work (I was trying to implement the UnitSelect component inside Font Size control but that didn't seem to be the way to go about it). I'm very interested in this and I'd love to pair with anyone that wants to have a look at this.

kjellr · 2021-03-22T18:11:44Z

That the patterns can use vw units instead of px in inlined font sizes: this can be done already.

I guess I just never expected that to work. 😂 Thanks for the tip. I'll give this PR a quick refresh later today/tomorrow to try and get that working.

mtias · 2021-03-22T18:50:57Z

Cool, let's get the patterns updated to use them just so that we can merge them then :)

kjellr · 2021-03-22T20:01:11Z

I've adjusted the font sizes on the larger-text patterns so that they all use vw units now. I've tested in Twenty Twenty-One and Twenty Twenty, and it looks pretty good. It would be a nicer if we were able to use something like clamp() or min() here, but this is still workable.

Desktop	Mobile

(I fixed that line break in the "Overseas..." pattern right after I took the screenshot)

@melchoyce if you have a moment, do you think you can help test this and see if those text sizes are working ok in other themes as well?

Once these changes and the new button pattern are included in this PR, I think it'll be in pretty good shape.

MaggieCabrera · 2021-03-23T12:44:11Z

I just updated with the renames and the missing buttons block pattern:

After renaming quote-portrait to quote, I only see the previous one (since it loads from core directly). To have the new one show I believe we need to wait until we make the PR to core, where we can actually delete the old version that has the same name. The PR to core is opened here (Revisit the bundled block patterns wordpress-develop#1103) and I'll update it once this PR is approved with all the changes. For testing purposes I renamed it quote-2 so you can see it in the editor.
Two columns of text and the two buttons one have the same issue the quote has since it's also replacing a core block. I renamed them for the sake of testing as well.

ItsJonQ · 2021-03-23T13:29:08Z

The second issue is allowing more units in the UI font size control.
@nosolosw Haiii!! Yes, there's a limitation in the FontSize control right now. We do have the components/mechanics to allow for unit support. The current issue is a combination of (UI) design, and accommodating the current interactions.

In other words, the control has to look and work differently.

(Poke at this example to get a sense for the current design)

Design: Limited Space (Reset Button)

The presence of the "Reset" button makes it very difficult to include a unit control (due to spacing constraints).
We already experience some layout issues for i18n - for languages with longer labels.

IMO, the "Reset" mechanic as a whole needs to be updated - something touched upon in the updated Sidebar/controls post.

P.S. Limited input space is an issue in Gutenberg's current controls, resulting in values getting (visually) cut off. It's gotten better over time though! The FontSize control is the most noticeable one (for me).

Interaction: Changing values

This one is a minor one. The current number value is a input[type="number"] element that instantly updates on change. Unit inputs need to have this "buffer" state allowing you to type in values like 23vw:

2
23
23v
23vh
// Press Enter

That way, the value can be unit parsed (or CSS parsed for things like var()).

At the moment, there are quite a few E2E tests that rely on the current interaction.
They will break once we make the swap.

This was something we encountered during the initial integration attempts.
We can fix them of course! Just wanted to provide some background info :)

Moving forward

IMO, to successfully add unit support to the UI control, we need to address the UI + interaction concerns above ☝️

Hope this context was helpful!

mtias · 2021-03-23T13:56:20Z

Yes, to expose these in the UI we need to redo the typography panel with the new design direction, accounting for all the interrelations of the typographic settings

kjellr · 2021-03-23T15:42:08Z

I'll get started on a core issue like this one so that we can try getting the images uploaded to the WordPress.org CDN. Once those are up, we can swap out the links here (and in WordPress/wordpress-develop#1103) with those final ones.

In the meantime, a few small notes:

I noticed that some of these patterns included links to the test site. I adjusted those in 2879e0c.
None of these used the old "Columns" category but I think it makes sense to preserve that. I've re-arranged some category labels in 1101483 to account for that.
We'll need alt text for many of these images. @melchoyce would you mind identifying which ones, and writing up some copy for us?

Thanks!

melchoyce · 2021-03-23T15:48:26Z

Just tested with all the Twenties. I added each pattern into a post, to see how the patterns would hold up when potentially next to a sidebar.

Short answer: not well. Font sizing is an issue for these themes on desktop:

These issues appear in Twenty Eleven, Twelve, Thirteen, Fourteen, Fifteen, Sixteen, and Seventeen.

Here's a gallery of all the Twenties: https://cloudup.com/cnLGtBQKuqc

kjellr · 2021-03-23T15:54:08Z

~~For some of those, something like max(8vw, 100%) would help.~~ EDIT: Nevermind, that is wrong.

But it also looks like, three columns of text just don't work in general for some themes. The very-short line lengths are problematic even for the smaller text here:

I'm not totally sure how to solve for that sort of thing. In general, patterns aren't always going to work nicely for all themes. But maybe we need to be more conservative about that for the default patterns?

kjellr · 2021-03-23T17:41:57Z

I'm not very happy with this, but I think our safest option forward is a mix of:

Scaling down font sizes. Rather than using the vw that we added, we might need to max-out at like 48px or something.
Simplifying some of the complex three column patterns.

Here's a proof-of-concept for that approach:

Twenty Twenty:

Editor	Front

Twenty Sixteen:
(The images overflowing the columns looks like an unrelated theme bug, so we should ignore that for our considerations here)

Editor	Front

How do others feel about that compromise?

melchoyce · 2021-03-23T19:16:27Z

I think that's a decent compromise.

I'll write up alt tags for the ones missing 👍

melchoyce · 2021-03-23T19:57:50Z

I keep getting a validation issue for this block when I reload:

Recovery creates an empty paragraph block.

melchoyce · 2021-03-23T20:36:13Z

Image	Alt
	Close-up of dried, cracked earth.
	Forest of bamboo trees, seen from the ground up. The sun shines through the canopy.
	A green and brown rural landscape leading into a bright blue ocean and slightly cloudy sky, done in oil paints.
	The sun setting through a dense forest of trees.
	Wind turbines standing on a grassy plain, against a blue sky.
	The sun shining over a ridge leading down into the shore. In the distance, a car drives down a road.
	An aerial view of waves crashing against a shore.
	An aerial view of a field. A road runs through the upper right corner.
	Close-up, abstract view of geometric architecture.
	Close-up of the corner of a white, geometric building with both sharp points and round corners.
	Close-up, angled view of a window on a white building.
	A side profile of a woman in a russet-colored turtleneck and white bag. She looks up with her eyes closed.
	Close-up, abstract view of architecture.
	A dense forest of tall, straight trees as seen from slightly above.
	"Sunset at Sea after a Storm" by Francis Danby, 1793–1861.

Co-authored-by: Kjell Reigstad <[email protected]>

kjellr

This is looking great. Tests are passing, so let's get this in and get a broader set of users testing them! 🎉

MaggieCabrera requested review from spacedmonkey and TimothyBJacobs as code owners March 18, 2021 11:15

scruffian assigned MaggieCabrera Mar 18, 2021

mtias reviewed Mar 18, 2021

View reviewed changes

kjellr and others added 23 commits April 19, 2021 19:17

Add a small spacer to the "Three columns with images and text" pattern.

50fd294

change color values to use hexadecimal

602311c

fixed syntax

0b08664

Update images to the final WP.org CDN URLs

d73cc30

renamed patterns and unregistered duplicates

8a52fe4

added context and domain to translations, escaped strings

638fd1f

unregistered all the old default patterns

4b86032

escape attributes with esc_attr__

e343edb

escaped strings with html tags using wp_kses_post

047a4f5

linting

7ced16e

Update lib/block-patterns/media-text-arquitecture.php

e679c01

Co-authored-by: Kjell Reigstad <[email protected]>

Add blockTypes prop for compatibility with WordPress#30469.

bd7c8e3

Add categories for uncategorized patterns.

5fce33f

Add code comment.

09ce72c

linting

03c5327

more linting

393fce9

updated snapshot related to 2 buttons block

eb3092e

fixed conflict

6f71de4

fixed adding patterns snapshot

001c639

removed IDs from gallery to fix e2e tests

f927288

removed unnecesary data attributes

91a3e21

removed unnecesary ids

a1b5529

changed ids to null

1cb8196

MaggieCabrera force-pushed the add/new-core-block-patterns branch from b53b730 to 1cb8196 Compare April 19, 2021 17:24

kjellr approved these changes Apr 19, 2021

View reviewed changes

kjellr merged commit 8d630b6 into WordPress:trunk Apr 19, 2021

github-actions bot added this to the Gutenberg 10.5 milestone Apr 19, 2021

This was referenced Apr 20, 2021

Revisit + expand the bundled block patterns #28921

Closed

Clean up bundled pattern titles & categories #30998

Merged

ryelle mentioned this pull request Apr 21, 2021

Block Patterns: Load patterns from wordpress.org API #28800

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revisit the bundled block patterns #29973

Revisit the bundled block patterns #29973

MaggieCabrera commented Mar 18, 2021

mtias Mar 18, 2021

kjellr Mar 18, 2021

kjellr commented Mar 18, 2021 •

edited

Loading

kjellr commented Mar 18, 2021 •

edited

Loading

kjellr commented Mar 18, 2021

mtias commented Mar 18, 2021

kjellr commented Mar 18, 2021 •

edited

Loading

MaggieCabrera commented Mar 19, 2021

kjellr commented Mar 19, 2021

mtias commented Mar 19, 2021

oandregal commented Mar 22, 2021

MaggieCabrera commented Mar 22, 2021

kjellr commented Mar 22, 2021

mtias commented Mar 22, 2021

kjellr commented Mar 22, 2021 •

edited

Loading

MaggieCabrera commented Mar 23, 2021

ItsJonQ commented Mar 23, 2021

mtias commented Mar 23, 2021

kjellr commented Mar 23, 2021 •

edited

Loading

melchoyce commented Mar 23, 2021

kjellr commented Mar 23, 2021 •

edited

Loading

kjellr commented Mar 23, 2021

melchoyce commented Mar 23, 2021

melchoyce commented Mar 23, 2021

melchoyce commented Mar 23, 2021 •

edited

Loading

kjellr left a comment

Revisit the bundled block patterns #29973

Revisit the bundled block patterns #29973

Conversation

MaggieCabrera commented Mar 18, 2021

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

mtias Mar 18, 2021

Choose a reason for hiding this comment

kjellr Mar 18, 2021

Choose a reason for hiding this comment

kjellr commented Mar 18, 2021 • edited Loading

kjellr commented Mar 18, 2021 • edited Loading

kjellr commented Mar 18, 2021

Screenshots

mtias commented Mar 18, 2021

kjellr commented Mar 18, 2021 • edited Loading

MaggieCabrera commented Mar 19, 2021

kjellr commented Mar 19, 2021

mtias commented Mar 19, 2021

oandregal commented Mar 22, 2021

MaggieCabrera commented Mar 22, 2021

kjellr commented Mar 22, 2021

mtias commented Mar 22, 2021

kjellr commented Mar 22, 2021 • edited Loading

MaggieCabrera commented Mar 23, 2021

ItsJonQ commented Mar 23, 2021

Design: Limited Space (Reset Button)

Interaction: Changing values

Moving forward

mtias commented Mar 23, 2021

kjellr commented Mar 23, 2021 • edited Loading

melchoyce commented Mar 23, 2021

kjellr commented Mar 23, 2021 • edited Loading

kjellr commented Mar 23, 2021

melchoyce commented Mar 23, 2021

melchoyce commented Mar 23, 2021

melchoyce commented Mar 23, 2021 • edited Loading

kjellr left a comment

Choose a reason for hiding this comment

kjellr commented Mar 18, 2021 •

edited

Loading

kjellr commented Mar 18, 2021 •

edited

Loading

kjellr commented Mar 18, 2021 •

edited

Loading

kjellr commented Mar 22, 2021 •

edited

Loading

kjellr commented Mar 23, 2021 •

edited

Loading

kjellr commented Mar 23, 2021 •

edited

Loading

melchoyce commented Mar 23, 2021 •

edited

Loading