[MOOSE-130]: Misc Moose updates for WordPress 6.6 compatibility WIP #146
Conversation
…ger affecting the editor.
…Press has adjusted their selector specificity in 6.6. [Reference](https://make.wordpress.org/core/2024/06/21/wordpress-6-6-css-specificity/)
…changes can't be injected, so we end up having to manually reload the page in the browser anyway.
…d a `build` script to build unminified assets.
…es-update' into feature/MOOSE-130/wp-6.6-compat-updates
Package Old New @wordpress/create-block 4.39.0 4.44.0 @wordpress/scripts 27.6.0 28.1.0 node_modules/@wordpress/scripts public cssnano 6.1.2 7.0.3 node_modules/cssnano public lefthook 1.6.9 1.6.18 node_modules/lefthook public postcss-mixins 10.0.0 10.0.1 node_modules/postcss-mixins public postcss-preset-env 9.5.4 9.5.14 node_modules/postcss-preset-env public
…-updates # Conflicts: # CHANGELOG.md # composer.json
…-updates # Conflicts: # CHANGELOG.md # wp-content/themes/core/blocks/core/image/style.pcss
dpellenwood
requested review from
GeoffDusome,
Vinsanity,
JMRhodes,
LayaTaal and
lindseyolson
|
This is a pretty huge PR but it was some much needed updates to Moose as well as updates specific to changes made in WP 6.6. If you see some styling removed, it's mostly because it's been moved to I'm going to bow out of reviewing this PR because I was pretty involved in it, but I'm interested what everyone else thinks of the updates. |
There was a problem hiding this comment.
🟢 Looks Great @dpellenwood 🌮 I added a comment that may be helpful enhancing our variable definitions.
| @@ -14,7 +14,7 @@ | |||
| font-family: var(--wp--preset--font-family--roboto); | |||
| font-size: var(--wp--preset--font-size--80); | |||
| line-height: 1.1; | |||
| font-weight: 700; | |||
| font-weight: var(--wp--custom--font-weight--bold); | |||
There was a problem hiding this comment.
I ended up taking this a step further in the typography/_variables.pcss partial to define this and reference it more easily. I found it very useful since some fonts can technically define things like medium as 500 or 600.
There was a problem hiding this comment.
`/* -------------------------------------------------------------------------
* Font Weights
* ------------------------------------------------------------------------- */
--font-weight-extra-light: var(--wp--custom--font-weight--extra-light); /* 200 */
--font-weight-light: var(--wp--custom--font-weight--light); /* 300 */
--font-weight-normal: var(--wp--custom--font-weight--regular); /* 400 */
--font-weight-medium: var(--wp--custom--font-weight--medium); /* 500 */
--font-weight-semi-bold: var(--wp--custom--font-weight--semi-bold); /* 600 */
--font-weight-bold: var(--wp--custom--font-weight--bold); /* 700 */`
There was a problem hiding this comment.
Nice! I ticketed this as a possible improvement.
| @@ -0,0 +1,52 @@ | |||
| # Supported Block Features & Settings | |||
There was a problem hiding this comment.
This is a great addition. What do you think about linking to it from the main README so that everyone is readily aware of it?
| * ------------------------------------------------------------------------- */ | ||
|
|
||
| /* important added to override WP's editor stylesheet */ | ||
| .has-global-padding > .alignfull:where(.has-global-padding) > :where(:not(.alignfull):not(.alignwide):not(.aligngrid)) { |
There was a problem hiding this comment.
Wow, this is a nice one to be able to remove!
| * ------------------------------------------------------------------------- */ | ||
|
|
||
| /* @TODO: Add documentation on setting up theming to properly utilize */ | ||
|
|
||
| body { | ||
| :root { |
There was a problem hiding this comment.
I think this would be better handled in a separate PR, but are we opposed to moving these variables out of the block itself? I've had issues here a few times when I want button styles on something outside of the block and the block CSS is not loaded on the page.
There was a problem hiding this comment.
That's an interesting idea. I'd like to explore theming in general a bit to see if we can make it more holistic. I added a ticket to Moose for us to look into it.
…ate to PHP 8.2. Lando composer version update to 2-latest.
What does this do/fix?
A variety of updates & improvements to Moose. Most of the changes are reflective of improvements WP Core has made with the release of v6.6. A few are just general bug fixes or tweaks to make Moose easier to use.
theme.jsonobjects should now be ordered alphabetically to male properties more easy to find.theme.jsonappear in a "size" array (font sizes, spacer sizes), the smallest size should always display firsttheme.jsonnow allows you to style block style variations using thevariationsproperty - so some styling has been moved out of.scssfiles and intotheme.jsonto reflect this.distnpm script to use theproductionENV value so that assets are minified.buildnpm task to build non-minified assets on demand.