Blank Canvas Blocks: Added Block Patterns #3514

MaggieCabrera · 2021-03-23T16:17:05Z

Changes proposed in this Pull Request:

This PR adds block patterns to BCB. I have only tested the patterns that load on .org and I had to make adjustments due to the change in color naming conventions.

Related issue(s):

Closes #3415

blank-canvas-blocks/functions.php

scruffian · 2021-03-23T16:40:34Z

There are a couple of patterns that don't work for me:

I do often have problems with cover blocks though, so this might just be me!

MaggieCabrera · 2021-03-23T16:46:12Z

There are a couple of patterns that don't work for me:

I do often have problems with cover blocks though, so this might just be me!

Nope! that happens when the block pattern is calling a color (background, primary) that doesn't exist on the current theme and it's asking you to choose a new one. I think you are using a plugin that I'm not cause I don't see those, I'll look for that.

pbking · 2021-03-23T16:47:44Z

blank-canvas-blocks/inc/block-patterns.php

+									<!-- /wp:image -->
+
+									<!-- wp:heading {"textAlign":"center","level":1,"textColor":"almost-black"} -->
+									<h1 class="has-text-align-center has-almost-black-color has-text-color"><strong>'. esc_html__( 'Jasmine Baker', 'blank-canvas-blocks' ) . '</strong></h1>


Since there is no guarantee that 'almost-black' is going to be available in any child themes (or any theme once switched) I don't believe has-almost-black-color (or any of the descriptive color values) should be used here.

I think we could use just the hex color but this is not a universal block pattern, is it? according to our slack conversation, child themes are going to unregister these.

I don't understand how all block patterns aren't "universal". If on theme A I use a block pattern, then change themes the blocks are still there but they they (potentially) look bad because classes that were expected are no longer there.

yeah, that's the problem if we don't use hex codes or until we get semantic colors that are available to all themes...

Yeah, I think for now we should use hex colors in all of the Blank Canvas patterns to combat this.

scruffian · 2021-03-23T16:49:35Z

I think you are using a plugin that I'm not cause I don't see those, I'll look for that.

The only plugin I have is Gutenberg

pbking · 2021-03-23T16:49:57Z

blank-canvas-blocks/inc/block-patterns.php

+					'title'      => __( 'Gradient Links', 'blank-canvas-blocks' ),
+					'categories' => array( 'link-in-bio' ),
+					'content'    => '<!-- wp:cover {"overlayColor":"background","minHeight":1090,"minHeightUnit":"px","align":"full"} -->
+									<div class="wp-block-cover alignfull has-background-background-color has-background-dim" style="min-height:1090px"><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","id":130,"width":96,"height":96,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->


has-background-background-color would be super if we had semantic colors define-able in our themes. But alas the "background color" is only available as a CSS variable since it's expressed in the "custom" block of theme.json. This color should probably be expressed another way.

pbking · 2021-03-23T16:50:52Z

blank-canvas-blocks/inc/block-patterns.php

+					'title'      => __( 'Musician Links', 'blank-canvas-blocks' ),
+					'categories' => array( 'link-in-bio' ),
+					'content'    => '<!-- wp:cover {"url":"' . esc_url( get_stylesheet_directory_uri() . '/assets/images/pattern-links-gradient.jpg' ) . '","id":181,"hasParallax":true,"dimRatio":0,"overlayColor":"primary","minHeight":100,"minHeightUnit":"vh","align":"full"} -->
+									<div class="wp-block-cover alignfull has-primary-background-color has-parallax" style="background-image:url(' . esc_url( get_stylesheet_directory_uri() . '/assets/images/pattern-links-gradient.jpg' ) . ');min-height:100vh"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":10} -->


There's no has-primary-background-color available to be used here.

… into add/bcb-block-patterns

…hing

…zation for the <em>s

scruffian · 2021-03-23T20:31:43Z

I think this is ready for another test

* Limit content width for things aligned left/right Co-authored-by: Jeff Ong <jeff.ong@automattic.com>

pbking · 2021-03-24T13:29:08Z

Pushed a minor change to alignment as it related to containers that aren't groups that this branch illuminated.

kjellr · 2021-03-24T13:57:37Z

Whoops — I posted some original notes over in #3415 (comment) before I realized this PR was here. This definitely improves upon that but I still have a bunch of notes:

There are content-width errors throughout.
The page title is present. (Should I be switching to a different template here? Not sure how that is supposed to work)
The spacing between blocks is very different than in the original theme. Can we adjust that?
The heading font weights don't match.
The separator blocks don't match the original theme.
The "Antonio Miller" heading is not readable.
The "Patricia Jones" logo image is missing for me.
The "Patricia Jones" link underlines are different, but I think that's ok.

Blank Canvas	Blank Canvas Blocks

Introduce spacing around P and H* elements using the custom.margin.vertical variable.

… into add/bcb-block-patterns

jffng · 2021-03-24T22:13:23Z

We made a number of changes to bring these patterns more in line with their designs:

Adjusted button hover + text colors
Adjusted font weights for headings — removing the "strong" tag / bold treatment from the pattern and using the custom font weight we are declaring for all headings.
Adjusted spacing variable to use the same value as Seedlet (30px) and applied it to paragraphs and heading elements.
Fixed width errors occurring in button groups by wrapping them inside a group block and inheriting the default layout.
Applied has-black-color has-text-color classes to Antonio Miller heading
Fixed Patricia Jones logo image
Adjusted separators

The page title is present. (Should I be switching to a different template here? Not sure how that is supposed to work)

My assumption is FSE handles this.

MaggieCabrera · 2021-03-25T11:22:58Z

blank-canvas-blocks/sass/base/_normalize.scss

@@ -16,6 +16,10 @@ img {
 	max-width: 100%;
 }

+hr {
+	border: none; // Undo the wp-admin common.css: https://github.com/WordPress/WordPress/blob/fc6e4cbe3ef1dcd3a9977272d7ddcc413acdde0d/wp-admin/css/common.css#L865-L869


This PR should undo what wp admin defines, but the browser defaults are not border: none; so it will be different if/when that PR lands. add_theme_support( 'wp-block-styles' ); does provide some defaults for the separator, though.

That PR just landed, by the way

kjellr · 2021-03-25T12:08:21Z

My assumption is FSE handles this.

In general, if this is a 1:1 reproduction of Blank Canvas, we'll want the default post/page template to have no page title. We should definitely provide an alternate that does though. I see that in general, we need to add more templates, so this can totally be handled separately though.

I'll put this on my list to re-test today. 👍

blank-canvas-blocks/experimental-theme.json

kjellr · 2021-03-25T16:00:33Z

These changes look good, and match the existing patterns pretty well. 🙌 Only a few comments:

We don't necessarily need to adjust the heading weight globally. With these latest changes, <strong> has no effect on the heading block, which isn't great. I'd recommend setting the Bold headings to be bold in the pattern itself (like the original patterns did), and then just making sure that renders at the same weight it did for the original Blank Canvas.
Button hovers for custom-colored outline buttons are broken. We should probably adopt @MaggieCabrera's Seedlet fix for that issue.

pbking · 2021-03-25T17:45:52Z

Because we aren't able to customize what strong means without configuration we don't expect from Gutenberg I don't think we should do that in BCB. So for now that locks us in at (I think?) a font-weight of ~700 for <strong>. Which is a tad heavier than the 600 that Blank Canvas achieves but will be our only choice without theme-specific CSS overrides. (A child-them of this could.)

I suggest we revert the emboldened changes, keeping them a tad bolder than desired but retaining the ability to embolden headers with rich text controls.

Weights look like this now

This reverts commit d39b05f.

kjellr · 2021-03-25T20:03:02Z

Do we need a Gutenberg issue for allowing global styles to specify a font weight for bold? Or is that tracked already somewhere?

pbking · 2021-03-25T20:04:34Z

I don't believe so; I'm of the opinion that doing that in the font's CSS is appropriate. BCB is in a unique place where we're trying to avoid specifying things that aren't going to be controlled by Gutenberg (so subsequent child themes won't have to work to overcome it).

As far as I know an issue doesn't exist for that. If that seems like a thing that should be user or theme configurable - outside of CSS - I wouldn't argue against it; just seems abstract enough a thing to expect to be in a theme's limited specific CSS.

pbking · 2021-03-25T20:19:37Z

Regarding the button hover state, since the colors are applied with style properties there's no CSS solution. I don't believe the fix you reference is quite the same situation. I'm afraid that using that solution to style the buttons results in hover-less states.

I would certainly be keen to address that problem in some way but I'm not sure how. It should probably have something to do with the button block directly though.

kjellr · 2021-03-26T14:58:25Z

Regarding the button hover state, since the colors are applied with style properties there's no CSS solution. I don't believe the fix you reference is quite the same situation. I'm afraid that using that solution to style the buttons results in hover-less states.
I would certainly be keen to address that problem in some way but I'm not sure how. It should probably have something to do with the button block directly though.

We definitely fixed this for the normal version of Blank Canvas blocks — maybe it was in a followup PR actually? Or it could've been somewhere else. 🤔

In any case, we should make sure it's working the same way for Blank Canvas blocks, since I don't expect the hover states to be sorted out in Gutenberg for quite some time. The hover states were a blocking issue for launching the patterns back when we initially launched them, and I consider it a blocking issue for BCB too. I've opened #3538 to track it.

kjellr · 2021-03-26T15:11:41Z

I've also opened a Gutenberg issue for the bold font weight setting: WordPress/gutenberg#30297

added block patterns

56cb7af

MaggieCabrera self-assigned this Mar 23, 2021

MaggieCabrera added the [Theme] Blank Canvas Blocks label Mar 23, 2021

MaggieCabrera added this to the Blank Canvas Blocks milestone Mar 23, 2021

MaggieCabrera requested a review from a team March 23, 2021 16:17

scruffian reviewed Mar 23, 2021

View reviewed changes

blank-canvas-blocks/functions.php Outdated Show resolved Hide resolved

MaggieCabrera added 2 commits March 23, 2021 17:21

changed domain name

2a380b1

changed require route to work with child themes

c646d22

pbking reviewed Mar 23, 2021

View reviewed changes

scruffian added 4 commits March 23, 2021 18:01

fix colors

62882af

Merge branch 'add/bcb-block-patterns' of github.com:Automattic/themes…

c4ba02e

… into add/bcb-block-patterns

Remove the cover block from the pattern as it doesn't seem to do anyt…

ad952e0

…hing

remove the cover block, add alignment to the image, change data sanit…

22c05d5

…zation for the <em>s

pbking and others added 2 commits March 24, 2021 08:38

Limit content width for things aligned left/right (#3504)

4c23164

* Limit content width for things aligned left/right Co-authored-by: Jeff Ong <jeff.ong@automattic.com>

Unset alignfull width for full width cover block (and others)

fe1a3b7

kjellr mentioned this pull request Mar 24, 2021

[Blank Canvas Blocks] Add block patterns #3415

Closed

Fixed media query error from previous merge

49f558e

pbking mentioned this pull request Mar 24, 2021

Work on updating the default templates to better match Blank Canvas #3522

Merged

pbking and others added 4 commits March 24, 2021 13:33

Refactored lef/right alighnment reset

24666ee

added block patterns

2e862ae

changed domain name

cb27d1a

fix colors

adc91b8

pbking and others added 9 commits March 24, 2021 13:46

Unset alignfull width for full width cover block (and others)

e310f3c

Fighting Gutenberg margins to achive design intentions.

2658adf

Adjust spacing around (text) blocks

1c11c23

Introduce spacing around P and H* elements using the custom.margin.vertical variable.

Merge branch 'add/bcb-block-patterns' of github.com:Automattic/themes…

e5c75e6

… into add/bcb-block-patterns

Update button hover colors.

cdbfedc

Support editor color assignment for separator.

c6bf17c

Refactor separator styles.

f7b597d

Reduce heading font weights via existing mechanisms.

d39b05f

Fix block pattern markup.

0169413

Refactor separator styles to match how Gutenberg styles separators.

456ba1d

MaggieCabrera commented Mar 25, 2021

View reviewed changes

jffng added 3 commits March 25, 2021 10:02

Standardize margins for hrs

0caf799

Unset separator border on front-end.

d6f4f7b

Make separators use borders again.

fb35eb2

MaggieCabrera commented Mar 25, 2021

View reviewed changes

blank-canvas-blocks/experimental-theme.json Outdated Show resolved Hide resolved

Use text color to set separator color.

3768b62

Revert "Reduce heading font weights via existing mechanisms."

7a73136

This reverts commit d39b05f.

pbking merged commit 46b64a3 into make/blank-canvas-blocks Mar 25, 2021

pbking deleted the add/bcb-block-patterns branch March 25, 2021 20:29

danieldudzic assigned danieldudzic and unassigned danieldudzic Mar 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blank Canvas Blocks: Added Block Patterns #3514

Blank Canvas Blocks: Added Block Patterns #3514

MaggieCabrera commented Mar 23, 2021

scruffian commented Mar 23, 2021

MaggieCabrera commented Mar 23, 2021

pbking Mar 23, 2021

MaggieCabrera Mar 23, 2021

pbking Mar 23, 2021

MaggieCabrera Mar 23, 2021

kjellr Mar 24, 2021

scruffian commented Mar 23, 2021

pbking Mar 23, 2021

pbking Mar 23, 2021

scruffian commented Mar 23, 2021

pbking commented Mar 24, 2021

kjellr commented Mar 24, 2021

jffng commented Mar 24, 2021 •

edited

Loading

MaggieCabrera Mar 25, 2021

MaggieCabrera Mar 25, 2021

kjellr commented Mar 25, 2021

kjellr commented Mar 25, 2021 •

edited

Loading

pbking commented Mar 25, 2021 •

edited

Loading

kjellr commented Mar 25, 2021

pbking commented Mar 25, 2021 •

edited

Loading

pbking commented Mar 25, 2021 •

edited

Loading

kjellr commented Mar 26, 2021

kjellr commented Mar 26, 2021

Blank Canvas Blocks: Added Block Patterns #3514

Blank Canvas Blocks: Added Block Patterns #3514

Conversation

MaggieCabrera commented Mar 23, 2021

Changes proposed in this Pull Request:

Related issue(s):

scruffian commented Mar 23, 2021

MaggieCabrera commented Mar 23, 2021

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

scruffian commented Mar 23, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scruffian commented Mar 23, 2021

pbking commented Mar 24, 2021

kjellr commented Mar 24, 2021

jffng commented Mar 24, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr commented Mar 25, 2021

kjellr commented Mar 25, 2021 • edited Loading

pbking commented Mar 25, 2021 • edited Loading

kjellr commented Mar 25, 2021

pbking commented Mar 25, 2021 • edited Loading

pbking commented Mar 25, 2021 • edited Loading

kjellr commented Mar 26, 2021

kjellr commented Mar 26, 2021

jffng commented Mar 24, 2021 •

edited

Loading

kjellr commented Mar 25, 2021 •

edited

Loading

pbking commented Mar 25, 2021 •

edited

Loading

pbking commented Mar 25, 2021 •

edited

Loading

pbking commented Mar 25, 2021 •

edited

Loading