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. |
carolinan
Apr 22, 2021
•
Contributor
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
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
DaisyOlsen
Apr 22, 2021
Author
Contributor
Good catch, I'll do some digging to confirm that this is accurate.
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: |
carolinan
Apr 22, 2021
Contributor
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.
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.
DaisyOlsen
Apr 22, 2021
Author
Contributor
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.
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.
fix typo Co-authored-by: Carolina Nymark <[email protected]>
add i18n function for string. Co-authored-by: Carolina Nymark <[email protected]>
|
I have added a few comments about text domains. Looks good otherwise. Thank you for the PR @DaisyOlsen. |
|
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 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. |
|
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