[MOOSE-99] Moose 2.0 #152

GeoffDusome · 2024-08-05T18:23:00Z

What does this do/fix?

Blocks: Removes unused block definitions from core plugin. Since we've moved to defining block variations in the styles directory, it's no longer necessary to define block variations in the PHP classes that extend Block_Base.
Blocks: I've moved all variation definitions to separate JSON files within the /styles directory; I'm on the fence here about restructuring this directory to additionally house the block styles that live within theme.json currently (to be something like styles/blocks & styles/variations). This would allow us to reduce the size of the theme.json file, but would split things up a bunch and possibly make finding things confusing.
Color: Removes empty color utilities file
Color: Various color updates; Note here that I did not update colors to use primary, secondary. I wasn't quite sure why design made this decision, but I'm 99% sure we wanted to get away from doing this. Please let me know if I'm just wrong here.
Layout: Breakpoints have been updated to match design.
General: Removed transitions that aren't used in core Moose; I personally haven't used any of these easings and I've only used the general --transition.
General: Moves some files around to places where they make a bit more sense; focus-visible -> /actions; stacking order -> columns block.
General: Icons have been reduced to only using one definition for each icon. We should be trying to use mask where possible so that we don't need to define multiple icon colors.
General: scss files in the theme should now more consistently use themed defined CSS properties, rather than WP preset properties.
Typography: Added overline block style for the Paragraph block; Added matching utility class / mixin
Typography: Added font selection styles; Do we need dark theme changes for this?
Typography: Removes Roboto fonts; switches to Inter Tight. Font files gathered from Google Webfonts Helper since there's still no reliable way to use Google Fonts in theme.json
Buttons: Added "Has Icon" toggle to button block; Allows us to define when an arrow shows, instead of it being default for each button. This also allows us to have additional button styles without needing to define separate button styles for each.
Buttons: You'll notice that there's theme styles in the Button block styles; Unfortunately this is a side-effect of the block variation JSON files not being able to parse variations within variations (as described in this Slack thread). This is a temporary solution for now until this gets resolved in a later WP release.

QA

Links to relevant issues

Screenshots/video:

TBD

…ables

…ck styles

dpellenwood

Left some questions & suggestions, Geoff. This is great. We'll review at the biweekly together to get feedback before we approve to merge.

dpellenwood · 2024-08-06T17:14:54Z

wp-content/themes/core/assets/pcss/color/_variables.pcss

-	--color-neutral-10: var(--wp--preset--color--neutral-10);
-	--color-neutral-20: var(--wp--preset--color--neutral-20);
-	--color-neutral-30: var(--wp--preset--color--neutral-30);
-	--color-neutral-40: var(--wp--preset--color--neutral-40);
-	--color-neutral-50: var(--wp--preset--color--neutral-50);
-	--color-neutral-60: var(--wp--preset--color--neutral-60);
-	--color-neutral-70: var(--wp--preset--color--neutral-70);
-	--color-neutral-80: var(--wp--preset--color--neutral-80);
-	--color-neutral-90: var(--wp--preset--color--neutral-90);
+	--color-neutral-10: var(--wp--preset--color--neutral-10, #f5f5f5);
+	--color-neutral-20: #e8e8e8;
+	--color-neutral-30: #d1d1d1;
+	--color-neutral-40: #a3a3a3;
+	--color-neutral-50: var(--wp--preset--color--neutral-50, #767676);
+	--color-neutral-60: #5d5d5d;
+	--color-neutral-70: #464646;
+	--color-neutral-80: #2f2f2f;
+	--color-neutral-90: #1f1f1f;


Curious about this change. IIRC, our goal was to always define all properties via theme.json and then reference those values in our CSS to prevent mismatched values.

The issue I've been running into on projects lately is that design wants all the colors available, but they don't want all the colors available to editors. So, we end up only adding a few of the colors to the global color palette and then the rest get added in code to be used elsewhere on the site. Normally these other grays are used in places not editable by editors like buttons and navigation. It's likely though that we're not using all of these colors and a lot of them can be stripped though.

Design also wanted to go back to primary / secondary with this update - so maybe we have a pretty big disconnect on colors that we need to meet to go over? Maybe I can post in the channel first for feelers on if we need to meet or not?

There's always the option to get super granular with colors too, where we can choose per block which colors are available in the palette.

dpellenwood · 2024-08-06T17:15:36Z

wp-content/themes/core/assets/pcss/color/_variables.pcss

+	--color-blue: var(--wp--preset--color--blue, #3050e5);
+	--color-blue-rgb: 48, 80, 229;


Couldn't the blue preset value be the rgb() color?

I wasn't able to find a combination of this that worked. It doesn't appear you can just assign 48, 80, 229 to the preset value. It expects a prefix like # or rgb(. Setting it to rgb(48, 80, 229) doesn't allow you to use in an rgba() definition.

Since this color is only used for the ::selection code, I could also just one-off the rgba() definition to the selection code instead?

Let's keep it defined as a color var, but maybe name it specifically like --color-selection-highlight or something similar?

Updated to new naming for variable; Moved it to it's own section in the colors file; Added a description for this new section and updated the value to use a #RRGGBBAA format.

dpellenwood · 2024-08-06T17:17:40Z

wp-content/themes/core/assets/pcss/media-queries/_variables.pcss

-@custom-media --viewport-small (min-width: 600px);
-@custom-media --viewport-small-max (max-width: 767px);
-@custom-media --viewport-medium (min-width: 768px);
-@custom-media --viewport-wpadmin (min-width: 783px);


We should keep the wpadmin breakpoint defined (even if we're using it for tablet). Often designs don't stick to that value when they get implemented.

I removed this because it no longer is true and now aligns with the --mq-wp-medium media query at the bottom of this file. Maybe the breakpoints have been updated in core, but 783px is no longer mentioned in here: https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss.

I could rename medium to be wpadmin or adminbar so it's more in line with what it's used for generally?

Interesting. Let's go with adminbar. We often use a different medium value on projects.

Updated this variable to be --mq-wp-adminbar. This breakpoint will match the defined tablet media query but can be used in places where contexts dictates it makes more sense to reference the admin bar media query rather than the tablet media query.

wp-content/themes/core/assets/pcss/typography/_mixins.pcss

wp-content/themes/core/styles/blocks/heading/b-x-small.json

dpellenwood · 2024-08-12T16:57:43Z

@GeoffDusome , left a couple follow-ups to your questions. Feel free to merge after you've reviewed/updated. Thanks!

dpellenwood

🥔 💨

GeoffDusome added 6 commits August 4, 2024 10:37

[MOOSE-99]: start 2.0

19e6641

[MOOSE-99]: move variations to styles directory

76fedb7

[MOOSE-99]: add overline utility

c2d8c3f

[MOOSE-99]: move focus visible mixins to actions; add dark theme vari…

1e2ca45

…ables

[MOOSE-99]: fix inline link color; move stacking order to columns blo…

963484d

…ck styles

[MOOSE-99]: fix separator block

b954ba5

GeoffDusome added the needs work label Aug 5, 2024

GeoffDusome self-assigned this Aug 5, 2024

[MOOSE-99]: scss files should use themed defined properties

ab60da1

GeoffDusome added Needs FE Review Launch Environment Deploys to dokku and removed needs work labels Aug 5, 2024

GeoffDusome marked this pull request as ready for review August 5, 2024 18:34

[MOOSE-99]: empty commit to trigger build

e6e3ad8

GeoffDusome requested review from Vinsanity, dpellenwood, LayaTaal, bjcooper and clontztopher August 5, 2024 18:35

[MOOSE-99]: update changelog

2c1f226

dpellenwood reviewed Aug 6, 2024

View reviewed changes

[MOOSE-99]: rename using 10 base

5cfe694

GeoffDusome and others added 3 commits August 12, 2024 14:21

Merge branch 'main' into MOOSE-99/moose-2.0

90ee9f3

[MOOSE-99]: selection highlight color variable; media query edit

16823b2

[MOOSE-99]: selection highlight color value was wrong

1b08d61

GeoffDusome removed the Launch Environment Deploys to dokku label Aug 12, 2024

[MOOSE-99]: empty commit to trigger build

1bf7e72

GeoffDusome requested a review from dpellenwood August 12, 2024 18:46

dpellenwood approved these changes Aug 12, 2024

View reviewed changes

GeoffDusome merged commit 7f7830c into main Aug 12, 2024
11 checks passed

GeoffDusome deleted the MOOSE-99/moose-2.0 branch August 12, 2024 19:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MOOSE-99] Moose 2.0 #152

[MOOSE-99] Moose 2.0 #152

GeoffDusome commented Aug 5, 2024 •

edited

Loading

dpellenwood left a comment

dpellenwood Aug 6, 2024

GeoffDusome Aug 6, 2024

dpellenwood Aug 6, 2024

GeoffDusome Aug 6, 2024

dpellenwood Aug 12, 2024

GeoffDusome Aug 12, 2024

dpellenwood Aug 6, 2024

GeoffDusome Aug 6, 2024

dpellenwood Aug 12, 2024

GeoffDusome Aug 12, 2024

dpellenwood commented Aug 12, 2024

dpellenwood left a comment

		--color-blue: var(--wp--preset--color--blue, #3050e5);
		--color-blue-rgb: 48, 80, 229;

[MOOSE-99] Moose 2.0 #152

[MOOSE-99] Moose 2.0 #152

Conversation

GeoffDusome commented Aug 5, 2024 • edited Loading

What does this do/fix?

QA

dpellenwood left a 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dpellenwood commented Aug 12, 2024

dpellenwood left a comment

Choose a reason for hiding this comment

GeoffDusome commented Aug 5, 2024 •

edited

Loading