Handbook: Add dedicated Block Styles page under Block API directory #31055
Conversation
|
|
||
| The example above registers a block style named `fancy-quote` to the `core/quote` block. When the user selects this block style from the styles selector, an `is-style-fancy-quote` className will be added to the block's wrapper. | ||
|
|
||
| By adding `isDefault: true` you can mark the registered block style as the one that is recognized as active when no custom class name is provided. It also means that there will be no custom class name added to the HTML output for the style that is marked as default. |
There was a problem hiding this comment.
no custom class name added to the HTML output for the style that is marked as default.
Please help confirm that this is correct. When there are custom styles available, and I select the default style,
I am seeing this CSS class both in the editor and front: is-style-default
There was a problem hiding this comment.
Good catch, I'll do some digging to confirm that this is accurate.
| - `name`: The identifier of the style used to compute a CSS class. | ||
| - `label`: A human-readable label for the style. | ||
|
|
||
| Besides the two mandatory properties, the styles properties array should also include an `inline_style` or a `style_handle` property: |
There was a problem hiding this comment.
These are optional.
It is also possible to add the styles in any stylesheet that is already enqueued (enqueued, not only registered) in the editor or front, or both. Even without the style handle.
I think it would be a good idea to add a paragraph about the naming convention for the CSS class, even if it is already mentioned that it is "The identifier of the style used to compute a CSS class", an example would help.
-If the name of the style is prefix-box-shadow the CSS class to use is: is-style-prefix-box-shadow.
There was a problem hiding this comment.
This PR is mostly intended to establish the dedicated page for Block Styles under the Block API section instead of being rolled into the Block Filters page where it is currently. If my Block Patterns Page PR is merged I'd like to model this page in a similar way and expand the descriptions further.
gziolo
added
[Type] Developer Documentation
fix typo Co-authored-by: Carolina Nymark <[email protected]>
add i18n function for string. Co-authored-by: Carolina Nymark <[email protected]>
There was a problem hiding this comment.
I have added a few comments about text domains.
Also, since a new page is being added in this, I'm wondering if there is something to do like redirection on Meta or something like that. cc @mkaz .
Looks good otherwise. Thank you for the PR @DaisyOlsen.
There was a problem hiding this comment.
I added a minor typo update. Looks like Carolina and Justin did a great job with the document review 👍
Since this is creating a new file and not renaming anything we won't need any redirects.
@DaisyOlsen You will have to update toc.json and add the entry in to the Block API Reference area, you see the existing entries for how. After updating toc.json you need to run npm run docs:build and also add the updated manifest.json document.
Let me know if you have any questions and I can help.
Co-authored-by: Marcus Kazmierczak <[email protected]>
|
@mkaz I've updated the toc and manifest files. Hopefully that is sufficient for this PR. I know there are other edits that should be made but the purpose of this PR is simply to move the content to it's own page. A more comprehensive PR to expand and clarify the content will follow. |
There was a problem hiding this comment.
Overall it looks good to me.
Thanks for adding the requested changes @DaisyOlsen.
Description
Move Block Styles documentation to dedicated page under Block API section of Handbook
How has this been tested?
Documentation. Confirm links and names work as expected
Types of changes
Docs.
Closes #31054