Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block API: Add viewStyle property support to block.json #55492

Merged
merged 4 commits into from
Jan 31, 2024

Conversation

gaambo
Copy link
Contributor

@gaambo gaambo commented Oct 19, 2023

What?

This PR adds the viewStyle property to the block.json schema, the documentation for block meta data and also enabled using it in the create-block package.
It's the Gutenberg part to the track ticket 59673. See also the Gutenberg issue #54491.

Why?

See issue #54491. The code to register and enqueue the viewStyles happens in core and on trac. In Gutenberg the block.json schema and documentation needs to be changed.

How?

Block metadata
Add property to JSON schema, add property to documentation about block metadata.

@wordpress/create-block
Add property as configurable in create-block, but don't use it by default, because most simple blocks won't need it. But creators of create-block templates can use it. That's also how the viewScript property is handled as far as I can see.

@wordpress/scripts
As far as I can see, no changes in the @wordpress/scripts package are necessary, since just using a view.js which imports a view.scss (for example) works out of the box and can be set. If the view.js is in the block.json, it's automatically recognized by the webpack config.

Testing Instructions

The Gutenberg part alone has no functional changes per se. Only the schema changes, which helps in IDEs and for validation of block.json.

Regarding the create-block part: That actually adds functionality, in that a template can set a viewStyle property - I guess? But I'm not 100 percent certain, how to test that. I probably would need to create a new template type? Anybody knows?

@fabiankaegy
Copy link
Member

I would like to change the status of this PR to draft till the actual change to add the viewStyle property was actually merged

@gaambo gaambo marked this pull request as draft October 20, 2023 04:57
@gziolo
Copy link
Member

gziolo commented Oct 22, 2023

One important consideration when documenting viewStyle would be emphasizing the actual use cases or better the thought process when to use it. One thing to speaks to me is explaining that it applies to the CSS necessary to render these parts of the block that will ever become interactive on the front end after uses performs some action. In effect, they should never be needed in the editor's context even when using the preview mode. Well, unless we change in the future how the preview mode works.

@gziolo gziolo mentioned this pull request Nov 3, 2023
69 tasks
@gziolo
Copy link
Member

gziolo commented Nov 3, 2023

All the necessary changes for WordPress core are ready to review in WordPress/wordpress-develop#5531. I have just tested, and there are no changes necessary for wp-scripts build as noted in https://core.trac.wordpress.org/ticket/59673#comment:4.

@gziolo gziolo added [Feature] Block API API that allows to express the block paradigm. [Type] New API New API to be used by plugin developers or package users. [Type] Developer Documentation Documentation for developers [Status] Blocked Used to indicate that a current effort isn't able to move forward labels Nov 3, 2023
@gaambo
Copy link
Contributor Author

gaambo commented Nov 3, 2023

@gziolo

One important consideration when documenting viewStyle would be emphasizing the actual use cases or better the thought process when to use it. One thing to speaks to me is explaining that it applies to the CSS necessary to render these parts of the block that will ever become interactive on the front end after uses performs some action. In effect, they should never be needed in the editor's context even when using the preview mode. Well, unless we change in the future how the preview mode works.

I've put a more detailed explanation to the property documentation in block-metadata.md. I also thought about adding a section further down below, explaining the different style/script properties and when to use them. But maybe this would be better suited for the how-to guide for scripts and stylesheets?

@gziolo gziolo changed the title 54491 Add viewStyle property Block API: Add viewStyle property Jan 31, 2024
@gziolo gziolo changed the title Block API: Add viewStyle property Block API: Add viewStyle property support to block.json Jan 31, 2024
@gziolo
Copy link
Member

gziolo commented Jan 31, 2024

I would like to change the status of this PR to draft till the actual change to add the viewStyle property was actually merged

The changes on the WordPress Core side are ready. See https://core.trac.wordpress.org/ticket/59673 for details. There are some merge conflicts to resolve, so this branch needs to be updated with the latest changes from trunk.

Do we want to add support for viewStyle when using Gutenberg with WordPress 6.4 and 6.3, which are currently supported by the plugin?

@gziolo gziolo removed the [Status] Blocked Used to indicate that a current effort isn't able to move forward label Jan 31, 2024
@gaambo gaambo force-pushed the add/viewStyle-54491 branch from 310c47b to dc22656 Compare January 31, 2024 09:34
@gaambo
Copy link
Contributor Author

gaambo commented Jan 31, 2024

I just rebased and committed the suggestions from your side.

I've marked the PR for review and am happy to add any further documentation or testing if needed.

@gaambo gaambo marked this pull request as ready for review January 31, 2024 09:52
@gziolo gziolo removed the [Type] New API New API to be used by plugin developers or package users. label Jan 31, 2024
@gziolo
Copy link
Member

gziolo commented Jan 31, 2024

@fabiankaegy, do you think we have enough to land it?

Copy link
Member

@fabiankaegy fabiankaegy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gziolo This looks good to me and I think it is enough to land it 👍

@gziolo gziolo merged commit 91d5778 into WordPress:trunk Jan 31, 2024
55 of 56 checks passed
@github-actions github-actions bot added this to the Gutenberg 17.7 milestone Jan 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants