Try: Add 3 section styles, update Hero: Centered Heading pattern. #151

jasmussen · 2024-08-29T09:56:43Z

Description

Starts initial work on adding Section styles (#142). In this case, it adds three section styles from this spot in the Figma file:

These use what I believe is the most suggested format for section style slugs (#3), section-1, section-2, section-3.

Additionally, I made a change to the Hero Centered Heading pattern to remove the explicitly set heading color, so that it will inherit the color set on the container instead.

Screenshots

Testing Instructions

Open the inserter, insert 4 instances of the Hero Centered Heading pattern.
Set the 2nd to fourth pattern to styles 2-4 in the inspector.
Test additional patterns (group/column based) for these section styles.

jasmussen · 2024-08-29T09:57:18Z

patterns/hero-centered-heading.php

@@ -15,8 +15,8 @@
 <div class="wp-block-group alignfull" style="min-height:0vh;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--40);">
 	<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group">
-		<!-- wp:heading {"textAlign":"center","level":1,"style":{"spacing":{"margin":{"right":"0","left":"0"},"padding":{"right":"0","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"textColor":"contrast"} -->
-		<h1 class="wp-block-heading has-text-align-center has-contrast-color has-text-color has-link-color" style="margin-right:0;margin-left:0;padding-right:0;padding-left:0">Tell your story</h1>
+		<!-- wp:heading {"textAlign":"center","level":1,"style":{"spacing":{"margin":{"right":"0","left":"0"},"padding":{"right":"0","left":"0"}}}} -->


@juanfra let me know if it was intentional to explicitly set the heading color here.

No, it was not intentional.

github-actions · 2024-08-29T09:57:31Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jasmussen <[email protected]>
Co-authored-by: juanfra <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: justintadlock <[email protected]>
Co-authored-by: carolinan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

jasmussen · 2024-08-29T09:58:14Z

styles/blocks/section-1.json

+		"blocks": {
+			"core/separator": {
+				"color": {
+					"text": "color-mix(in srgb, currentColor 25%, transparent)"


@carolinan @beafialho Let me know if I got this right! I only found a few separator designs in the Figma.

richtabor · 2024-08-29T12:28:49Z

Additionally, I made a change to the Hero Centered Heading pattern to remove the explicitly set heading color, so that it will inherit the color set on the container instead.

We should remove explicit color application almost everywhere.

jasmussen · 2024-08-29T12:55:57Z

We should remove explicit color application almost everywhere.

I found another instance here:

and pushed a fix to this:

I'm not going to push more to this branch, just to keep it focused, but I'll spin up a separate PR to fix an issue with Large Title:

Also separate, but related question, any advice on what to do with patterns that really look best with color? Example:

A few things at play here:

That pattern really looks most compelling in the pattern browser when it has that base yellow background color. Removing it loses a lot of character. Can we default a pattern to a Section style? Guess we could, right?
Any idea why the link color isn't inherited? I guess that should be defined in these section styles too, yes?

jasmussen · 2024-08-29T13:04:37Z

Actually I got that yellow pattern working pretty well. Okay to push to this branch too?

jasmussen · 2024-08-29T13:14:19Z

If no-one minds, I'd like to push the pattern update, it's working quite well, and it's a great way to provide some sectional diversity in the bundled patterns:

carolinan · 2024-08-29T13:17:42Z

That pattern really looks most compelling in the pattern browser when it has that base yellow background color. Removing it loses a lot of character. Can we default a pattern to a Section style? Guess we could, right?

Yes, that was the plan and why the color wasn't added earlier.

richtabor · 2024-08-29T14:01:41Z

Also separate, but related question, any advice on what to do with patterns that really look best with color?
Yes, that was the plan and why the color wasn't added earlier.

The background color should not be applied, but a section style can be added as a class to the pattern (any pattern).

richtabor · 2024-08-29T14:02:57Z

styles/blocks/section-1.json

+			},
+			"link": {
+				"color": {
+					"text": "var(--wp--preset--color--contrast)"


I think we could remove this, if we used currentColor in the parent theme.json.

Otherwise if the user changes the text color, they'll also need to also change the link color.

Oh yeah, good call!

jasmussen · 2024-08-29T14:04:04Z

The background color should not be applied, but a section style can be added as a class to the pattern (any pattern).

Nice, yeah that's what I did in this commit. Works well.

styles/blocks/section-2.json

juanfra

This is so good! Works well for me, and code lalso ooks good.

Screen.Recording.2024-08-29.at.16.03.37.mov

jasmussen · 2024-08-29T14:17:45Z

Thanks all for the reviews and input. I'm going to let this one sit unmerged until tomorrow morning, to let this conversation settle, and I'll implement what gets decided. It won't necessarily be set in stone from that point onwards, we'll always be able to change things until the beta period, but it will be good to land this soon, so all new patterns created can use best practices as far as how to apply colors!

jasmussen · 2024-08-30T06:38:15Z

Coming back this morning, it seems like the conversation ended on the same spot that this PR landed on. So I'm going to go ahead and merge, knowing that this is still possible to change after this merge, I'll be happy to address any followups. Thanks all!

Try: Add 3 section styles, update Hero: Centered Heading pattern.

6e7a96d

jasmussen added the [Component] Block Patterns label Aug 29, 2024

jasmussen requested review from juanfra, carolinan and beafialho August 29, 2024 09:56

jasmussen self-assigned this Aug 29, 2024

jasmussen commented Aug 29, 2024

View reviewed changes

This was referenced Aug 29, 2024

Add section styles #142

Closed

Section style slugs #3

Closed

Update Two Headings and a List.

1d28cea

Update location and link, and include link colors in section styles.

0844f50

richtabor reviewed Aug 29, 2024

View reviewed changes

styles/blocks/section-2.json Show resolved Hide resolved

juanfra approved these changes Aug 29, 2024

View reviewed changes

juanfra mentioned this pull request Aug 29, 2024

Try: Add buttons styles. #157

Merged

jasmussen merged commit c25ce24 into trunk Aug 30, 2024
10 of 12 checks passed

jasmussen deleted the try/section-styles branch August 30, 2024 06:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: Add 3 section styles, update Hero: Centered Heading pattern. #151

Try: Add 3 section styles, update Hero: Centered Heading pattern. #151

jasmussen commented Aug 29, 2024

jasmussen Aug 29, 2024 •

edited

Loading

juanfra Aug 29, 2024

github-actions bot commented Aug 29, 2024 •

edited

Loading

jasmussen Aug 29, 2024

richtabor commented Aug 29, 2024

jasmussen commented Aug 29, 2024

jasmussen commented Aug 29, 2024

jasmussen commented Aug 29, 2024

carolinan commented Aug 29, 2024

richtabor commented Aug 29, 2024

richtabor Aug 29, 2024

richtabor Aug 29, 2024

jasmussen Aug 29, 2024

jasmussen commented Aug 29, 2024

juanfra left a comment •

edited

Loading

jasmussen commented Aug 29, 2024

jasmussen commented Aug 30, 2024

Try: Add 3 section styles, update Hero: Centered Heading pattern. #151

Try: Add 3 section styles, update Hero: Centered Heading pattern. #151

Conversation

jasmussen commented Aug 29, 2024

jasmussen Aug 29, 2024 • edited Loading

Choose a reason for hiding this comment

juanfra Aug 29, 2024

Choose a reason for hiding this comment

github-actions bot commented Aug 29, 2024 • edited Loading

jasmussen Aug 29, 2024

Choose a reason for hiding this comment

richtabor commented Aug 29, 2024

jasmussen commented Aug 29, 2024

jasmussen commented Aug 29, 2024

jasmussen commented Aug 29, 2024

carolinan commented Aug 29, 2024

richtabor commented Aug 29, 2024

richtabor Aug 29, 2024

Choose a reason for hiding this comment

richtabor Aug 29, 2024

Choose a reason for hiding this comment

jasmussen Aug 29, 2024

Choose a reason for hiding this comment

jasmussen commented Aug 29, 2024

juanfra left a comment • edited Loading

Choose a reason for hiding this comment

jasmussen commented Aug 29, 2024

jasmussen commented Aug 30, 2024

jasmussen Aug 29, 2024 •

edited

Loading

github-actions bot commented Aug 29, 2024 •

edited

Loading

juanfra left a comment •

edited

Loading