Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#56094 new defect (bug)

Allow the style property of block.json to be an array

Reported by: zieladam's profile zieladam Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch has-unit-tests needs-dev-note
Focuses: Cc:

Description

## What problem does this PR solve?

In https://github.com/WordPress/gutenberg/pull/34180 we moved block CSS to blockJson.supports.__experimentalStyle. This ticket is about getting rid of that experimental property and supporting arrays in `blockJson.style. The goal is to only have a single location where styles are defined.

Change History (11)

This ticket was mentioned in PR #2853 on WordPress/wordpress-develop by adamziel.


2 years ago
#1

## What problem does this PR solve?

In https://github.com/WordPress/gutenberg/pull/34180 we moved block CSS to blockJson.supports.__experimentalStyle. This PR moves it under blockJson.style at the root level. The goal is to only have a single location where styles are defined.

This PR is an alternative to https://github.com/WordPress/gutenberg/pull/41656

## Other considerations

This is a breaking change – any existing code that assumes style to be a single item or an array of strings will throw a notice at best.

## Test plan

  1. Apply this PR to your local wordpress-develop
  2. Run npm run build
  3. Apply https://github.com/WordPress/gutenberg/pull/41873 to your local Gutenberg installation
  4. Build Gutenberg
  5. Switch themes to TwentyTwentyTwo
  6. Create a new page
  7. Insert a button, give it some text
  8. Save it, view it on the frontend
  9. Confirm the buttons have a large padding at the bottom

cc @getdave @scruffian @draganescu

Trac ticker: https://core.trac.wordpress.org/ticket/56094

gziolo commented on PR #2853:


2 years ago
#2

It looks like we have everything covered so it needs a final review and a round of testing with and without the Gutenberg plugin.

adamziel commented on PR #2853:


2 years ago
#3

I think we're good now! GitHub CI seems to be failing, though, so might be worth waiting until it works again before merging.

adamziel commented on PR #2853:


2 years ago
#4

All the tests passed! Would you please help get this PR approved? CC @gziolo @aristath @scruffian @getdave

#5 @bph
2 years ago

  • Keywords has-dev-note added

#6 @bph
2 years ago

  • Keywords needs-dev-note added; has-dev-note removed

adamziel commented on PR #2853:


2 years ago
#7

@gziolo do you think you could merge this one?

adamziel commented on PR #2853:


2 years ago
#8

cc @mtias for soundness check – does this change seem reasonable to you?

gziolo commented on PR #2853:


2 years ago
#9

The example shared in the description looks nice in my opinion as it consolidates several available options. In the future, we could also use the same API borrowed from theme.json for style variations:

{{{json
{

"styles": [

{

"name": "default",
"label": "Default",
"isDefault": true

},
{

"name": "plain",
"label": "Other",
"settings": {

"border": {

"color": {

"text": "#000",
"background": "#ccccc"

}

}

}

}

],
"style": [ "wp-block-button", {

"border": {

"color": {

"text": "#fff",
"background": "#32373c"

}

}

} ]

}
}}}

gziolo commented on PR #2853:


2 years ago
#10

Let's land https://github.com/WordPress/gutenberg/pull/41873 in the Gutenberg plugin first and give it a try before we include it in WordPress core. Code-wise everything is ready, and it had enough reviewers. We mostly need to validate that the extended API for style in block.json is friendly for developers – it's mostly the question of whether it's intuitive and straightforward to document.

Note: See TracTickets for help on using tickets.