Global Styles: Add support for caption elements #41140
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
scruffian
added
[Feature] Themes
|
If we choose this path, does it mean that we are no longer considering making the captions separate inner blocks? |
I believe so yes. Inner blocks bring a lot of extra complexity with them (for example the block toolbar and inspector controls) which may not give us the best user experience for editing the block they are part of. |
scruffian
force-pushed
the
add/support-for-caption-element
branch
from
2e63587
to
9e02a62
Compare
|
Size Change: +136 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
scruffian
force-pushed
the
add/support-for-caption-element
branch
from
9e02a62
to
d4718ba
Compare
draganescu
added
[Type] Enhancement
draganescu
requested review from
getdave,
MaggieCabrera and
andrewserong
and removed request for
spacedmonkey,
geriux,
ajitbohra and
ellatrix
|
cc @WordPress/block-themers |
scruffian
force-pushed
the
add/support-for-caption-element
branch
from
d4ab54e
to
ecb4bf4
Compare
draganescu
approved these changes
Jun 22, 2022
There was a problem hiding this comment.
I believe this follows in the footsteps of adding the button element. 🚢 it.
@carolinan it's not known. We're adding element support so that theme.json can style this element, but if we arrive at a place where a Caption block makes sense it will not be blocked by the element, but it will probably use it and inherit the styling seamlessly.
scruffian
force-pushed
the
add/support-for-caption-element
branch
from
3fe9dff
to
11a92cb
Compare
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 8, 2022
…ments.
This enables themes to:
* Set style rules for all heading elements together rather than having to do it individually.
* Style captions in `theme.json` by adding this into your `theme.json` file:
{{{
{
"styles": {
"elements": {
"caption": {
"color": {
"background": "red",
"text": "yellow"
}
}
}
}
}
}}}
This commit backports the original PRs from Gutenberg repository:
* [WordPress/gutenberg#41981 #41981: Global Styles: Add support for heading elements]
* [WordPress/gutenberg#41140 #41140: Global Styles: Add support for caption elements]
Follow-up to [50973].
Props cbravobernal, scruffian, madhudollu, mikachan, zieladam, bph, poena, andraganescu, ndiego, bgardner.
See #56467.
git-svn-id: https://develop.svn.wordpress.org/trunk@54105 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 8, 2022
…ments.
This enables themes to:
* Set style rules for all heading elements together rather than having to do it individually.
* Style captions in `theme.json` by adding this into your `theme.json` file:
{{{
{
"styles": {
"elements": {
"caption": {
"color": {
"background": "red",
"text": "yellow"
}
}
}
}
}
}}}
This commit backports the original PRs from Gutenberg repository:
* [WordPress/gutenberg#41981 #41981: Global Styles: Add support for heading elements]
* [WordPress/gutenberg#41140 #41140: Global Styles: Add support for caption elements]
Follow-up to [50973].
Props cbravobernal, scruffian, madhudollu, mikachan, zieladam, bph, poena, andraganescu, ndiego, bgardner.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54105
git-svn-id: http://core.svn.wordpress.org/trunk@53664 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Sep 8, 2022
…ments.
This enables themes to:
* Set style rules for all heading elements together rather than having to do it individually.
* Style captions in `theme.json` by adding this into your `theme.json` file:
{{{
{
"styles": {
"elements": {
"caption": {
"color": {
"background": "red",
"text": "yellow"
}
}
}
}
}
}}}
This commit backports the original PRs from Gutenberg repository:
* [WordPress/gutenberg#41981 #41981: Global Styles: Add support for heading elements]
* [WordPress/gutenberg#41140 #41140: Global Styles: Add support for caption elements]
Follow-up to [50973].
Props cbravobernal, scruffian, madhudollu, mikachan, zieladam, bph, poena, andraganescu, ndiego, bgardner.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54105
git-svn-id: https://core.svn.wordpress.org/trunk@53664 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pbearne
pushed a commit
to pbearne/wordpress-develop
that referenced
this pull request
Sep 9, 2022
…ments.
This enables themes to:
* Set style rules for all heading elements together rather than having to do it individually.
* Style captions in `theme.json` by adding this into your `theme.json` file:
{{{
{
"styles": {
"elements": {
"caption": {
"color": {
"background": "red",
"text": "yellow"
}
}
}
}
}
}}}
This commit backports the original PRs from Gutenberg repository:
* [WordPress/gutenberg#41981 #41981: Global Styles: Add support for heading elements]
* [WordPress/gutenberg#41140 #41140: Global Styles: Add support for caption elements]
Follow-up to [50973].
Props cbravobernal, scruffian, madhudollu, mikachan, zieladam, bph, poena, andraganescu, ndiego, bgardner.
See #56467.
git-svn-id: https://develop.svn.wordpress.org/trunk@54105 602fd350-edb4-49c9-b593-d223f7449a82
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 10, 2022
This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json] * [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks] * [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements] * [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally] * [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector] * [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages] * [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name] * [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree] * [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names] * [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json] * [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors] * [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements] * [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles] * [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list] * [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity] * [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON] * [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements] * [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements] * [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements] Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54118 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 10, 2022
This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json] * [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks] * [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements] * [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally] * [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector] * [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages] * [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name] * [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree] * [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names] * [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json] * [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors] * [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements] * [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles] * [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list] * [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity] * [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON] * [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements] * [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements] * [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements] Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov. See #56467. Built from https://develop.svn.wordpress.org/trunk@54118 git-svn-id: http://core.svn.wordpress.org/trunk@53677 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Sep 10, 2022
This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json] * [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks] * [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements] * [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally] * [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector] * [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages] * [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name] * [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree] * [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names] * [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json] * [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors] * [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements] * [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles] * [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list] * [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity] * [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON] * [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements] * [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements] * [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements] Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov. See #56467. Built from https://develop.svn.wordpress.org/trunk@54118 git-svn-id: https://core.svn.wordpress.org/trunk@53677 1a063a9b-81f0-0310-95a4-ce76da25c4cd
mburridge
added
the
Needs Dev Note
|
Added the Needs Dev Note label in case this needs a dev note (either individual or as part of a "misc" dev note) for WP 6.1 release. |
|
I think this is covered by: https://make.wordpress.org/core/?p=98557 |
mburridge
removed
the
Needs Dev Note
|
Thanks @scruffian, I've removed the label. |
whereiscodedude
pushed a commit
to whereiscodedude/wpss
that referenced
this pull request
Sep 18, 2022
…ments.
This enables themes to:
* Set style rules for all heading elements together rather than having to do it individually.
* Style captions in `theme.json` by adding this into your `theme.json` file:
{{{
{
"styles": {
"elements": {
"caption": {
"color": {
"background": "red",
"text": "yellow"
}
}
}
}
}
}}}
This commit backports the original PRs from Gutenberg repository:
* [WordPress/gutenberg#41981 #41981: Global Styles: Add support for heading elements]
* [WordPress/gutenberg#41140 #41140: Global Styles: Add support for caption elements]
Follow-up to [50973].
Props cbravobernal, scruffian, madhudollu, mikachan, zieladam, bph, poena, andraganescu, ndiego, bgardner.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54105
whereiscodedude
pushed a commit
to whereiscodedude/wpss
that referenced
this pull request
Sep 18, 2022
This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json] * [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks] * [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements] * [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally] * [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector] * [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages] * [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name] * [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree] * [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names] * [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json] * [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors] * [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements] * [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles] * [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list] * [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity] * [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON] * [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements] * [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements] * [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements] Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov. See #56467. Built from https://develop.svn.wordpress.org/trunk@54118
57 tasks
youknowriad
reviewed
Oct 20, 2022
| <RichText.Content | ||
| tagName="figcaption" | ||
| value={ caption } | ||
| className={ __experimentalGetElementClassName( |
There was a problem hiding this comment.
Any change to a save function of a block need a deprecation to be aded to that block. See #45153
This was referenced Oct 20, 2022
ootwch
pushed a commit
to ootwch/wordpress-develop
that referenced
this pull request
Nov 4, 2022
…ments.
This enables themes to:
* Set style rules for all heading elements together rather than having to do it individually.
* Style captions in `theme.json` by adding this into your `theme.json` file:
{{{
{
"styles": {
"elements": {
"caption": {
"color": {
"background": "red",
"text": "yellow"
}
}
}
}
}
}}}
This commit backports the original PRs from Gutenberg repository:
* [WordPress/gutenberg#41981 #41981: Global Styles: Add support for heading elements]
* [WordPress/gutenberg#41140 #41140: Global Styles: Add support for caption elements]
Follow-up to [50973].
Props cbravobernal, scruffian, madhudollu, mikachan, zieladam, bph, poena, andraganescu, ndiego, bgardner.
See #56467.
git-svn-id: https://develop.svn.wordpress.org/trunk@54105 602fd350-edb4-49c9-b593-d223f7449a82
ootwch
pushed a commit
to ootwch/wordpress-develop
that referenced
this pull request
Nov 4, 2022
This commit backports the original PRs from Gutenberg repository: * [WordPress/gutenberg#40260 #40260 Add support for button elements to theme.json] * [WordPress/gutenberg#40889 #40889 Theme Json: Don't output double selectors for elements inside blocks] * [WordPress/gutenberg#41140 #41140 Global Styles: Add support for caption elements] * [WordPress/gutenberg#41160 #41160 Global Styles: Load block CSS conditionally] * [WordPress/gutenberg#41240 #41240 Global Styles: Button Element: update button element selector] * [WordPress/gutenberg#41335 #41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages] * [WordPress/gutenberg#41446 #41446 Block styles: Account for style block nodes that have no name] * [WordPress/gutenberg#41696 #41696 Global Styles: Allow references to values in other locations in the tree] * [WordPress/gutenberg#41753 #41753 Elements: Add an API make it easier to get class names] * [WordPress/gutenberg#41786 #41786 Support pseudo selectors on elements in theme json] * [WordPress/gutenberg#41822 #41822 Elements: Button - Fix element selectors] * [WordPress/gutenberg#41981 #41981 Global Styles: Add support for heading elements] * [WordPress/gutenberg#42072 #42072 Fix link element hover bleeding into button element default styles] * [WordPress/gutenberg#42096 #42096 Add visited to link element allowed pseudo selector list] * [WordPress/gutenberg#42669 #42669 Link elements: Add a :where selector to the :not to lower specificity] * [WordPress/gutenberg#42776 #42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON] * [WordPress/gutenberg#43088 #43088 Pseudo elements supports on button elements] * [WordPress/gutenberg#43167 #43167 Theme_JSON: Use existing append_to_selector for pseudo elements] * [WordPress/gutenberg#43988 #43988 Styles API: Fixed selectors for nested elements] Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54118 602fd350-edb4-49c9-b593-d223f7449a82
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This makes it possible to style captions in theme.json by adding this into your theme.json file:
Why?
So that themes can independently control the display of their captions. See #40205
How?
We create a new element called caption and then add the
wp-element-captionclass to all elements that we want to use the caption styles.The problem with this approach is that captions are also targeted by the default styles in the block themselves. This is not a problem as the CSS global styles outputs is stronger, except for the case of captions inside gallery blocks.
Testing Instructions
Screenshots or screencast