-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
[WIP] Support both experimental and non-experimental typography supports in JS #63072
[WIP] Support both experimental and non-experimental typography supports in JS #63072
Conversation
}; | ||
|
||
// Stabilize the style property support keys by mapping experimental supports to stable supports. | ||
const STYLE_PROPERTY = Object.keys( RAW_STYLE_PROPERTY ).reduce( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: I've added this here instead of updating the STYLE_PROPERTY
directly in api/constants
as unfortunately the constants are exported publicly. If we think it's safe to change, I can update that file directly instead of this part of the change. Here's the original file:
gutenberg/packages/blocks/src/api/constants.js
Lines 17 to 272 in 02c6a8f
export const __EXPERIMENTAL_STYLE_PROPERTY = { | |
// Kept for back-compatibility purposes. | |
'--wp--style--color--link': { | |
value: [ 'color', 'link' ], | |
support: [ 'color', 'link' ], | |
}, | |
aspectRatio: { | |
value: [ 'dimensions', 'aspectRatio' ], | |
support: [ 'dimensions', 'aspectRatio' ], | |
useEngine: true, | |
}, | |
background: { | |
value: [ 'color', 'gradient' ], | |
support: [ 'color', 'gradients' ], | |
useEngine: true, | |
}, | |
backgroundColor: { | |
value: [ 'color', 'background' ], | |
support: [ 'color', 'background' ], | |
requiresOptOut: true, | |
useEngine: true, | |
}, | |
backgroundImage: { | |
value: [ 'background', 'backgroundImage' ], | |
support: [ 'background', 'backgroundImage' ], | |
useEngine: true, | |
}, | |
backgroundRepeat: { | |
value: [ 'background', 'backgroundRepeat' ], | |
support: [ 'background', 'backgroundRepeat' ], | |
useEngine: true, | |
}, | |
backgroundSize: { | |
value: [ 'background', 'backgroundSize' ], | |
support: [ 'background', 'backgroundSize' ], | |
useEngine: true, | |
}, | |
backgroundPosition: { | |
value: [ 'background', 'backgroundPosition' ], | |
support: [ 'background', 'backgroundPosition' ], | |
useEngine: true, | |
}, | |
borderColor: { | |
value: [ 'border', 'color' ], | |
support: [ '__experimentalBorder', 'color' ], | |
useEngine: true, | |
}, | |
borderRadius: { | |
value: [ 'border', 'radius' ], | |
support: [ '__experimentalBorder', 'radius' ], | |
properties: { | |
borderTopLeftRadius: 'topLeft', | |
borderTopRightRadius: 'topRight', | |
borderBottomLeftRadius: 'bottomLeft', | |
borderBottomRightRadius: 'bottomRight', | |
}, | |
useEngine: true, | |
}, | |
borderStyle: { | |
value: [ 'border', 'style' ], | |
support: [ '__experimentalBorder', 'style' ], | |
useEngine: true, | |
}, | |
borderWidth: { | |
value: [ 'border', 'width' ], | |
support: [ '__experimentalBorder', 'width' ], | |
useEngine: true, | |
}, | |
borderTopColor: { | |
value: [ 'border', 'top', 'color' ], | |
support: [ '__experimentalBorder', 'color' ], | |
useEngine: true, | |
}, | |
borderTopStyle: { | |
value: [ 'border', 'top', 'style' ], | |
support: [ '__experimentalBorder', 'style' ], | |
useEngine: true, | |
}, | |
borderTopWidth: { | |
value: [ 'border', 'top', 'width' ], | |
support: [ '__experimentalBorder', 'width' ], | |
useEngine: true, | |
}, | |
borderRightColor: { | |
value: [ 'border', 'right', 'color' ], | |
support: [ '__experimentalBorder', 'color' ], | |
useEngine: true, | |
}, | |
borderRightStyle: { | |
value: [ 'border', 'right', 'style' ], | |
support: [ '__experimentalBorder', 'style' ], | |
useEngine: true, | |
}, | |
borderRightWidth: { | |
value: [ 'border', 'right', 'width' ], | |
support: [ '__experimentalBorder', 'width' ], | |
useEngine: true, | |
}, | |
borderBottomColor: { | |
value: [ 'border', 'bottom', 'color' ], | |
support: [ '__experimentalBorder', 'color' ], | |
useEngine: true, | |
}, | |
borderBottomStyle: { | |
value: [ 'border', 'bottom', 'style' ], | |
support: [ '__experimentalBorder', 'style' ], | |
useEngine: true, | |
}, | |
borderBottomWidth: { | |
value: [ 'border', 'bottom', 'width' ], | |
support: [ '__experimentalBorder', 'width' ], | |
useEngine: true, | |
}, | |
borderLeftColor: { | |
value: [ 'border', 'left', 'color' ], | |
support: [ '__experimentalBorder', 'color' ], | |
useEngine: true, | |
}, | |
borderLeftStyle: { | |
value: [ 'border', 'left', 'style' ], | |
support: [ '__experimentalBorder', 'style' ], | |
useEngine: true, | |
}, | |
borderLeftWidth: { | |
value: [ 'border', 'left', 'width' ], | |
support: [ '__experimentalBorder', 'width' ], | |
useEngine: true, | |
}, | |
color: { | |
value: [ 'color', 'text' ], | |
support: [ 'color', 'text' ], | |
requiresOptOut: true, | |
useEngine: true, | |
}, | |
columnCount: { | |
value: [ 'typography', 'textColumns' ], | |
support: [ 'typography', 'textColumns' ], | |
useEngine: true, | |
}, | |
filter: { | |
value: [ 'filter', 'duotone' ], | |
support: [ 'filter', 'duotone' ], | |
}, | |
linkColor: { | |
value: [ 'elements', 'link', 'color', 'text' ], | |
support: [ 'color', 'link' ], | |
}, | |
captionColor: { | |
value: [ 'elements', 'caption', 'color', 'text' ], | |
support: [ 'color', 'caption' ], | |
}, | |
buttonColor: { | |
value: [ 'elements', 'button', 'color', 'text' ], | |
support: [ 'color', 'button' ], | |
}, | |
buttonBackgroundColor: { | |
value: [ 'elements', 'button', 'color', 'background' ], | |
support: [ 'color', 'button' ], | |
}, | |
headingColor: { | |
value: [ 'elements', 'heading', 'color', 'text' ], | |
support: [ 'color', 'heading' ], | |
}, | |
headingBackgroundColor: { | |
value: [ 'elements', 'heading', 'color', 'background' ], | |
support: [ 'color', 'heading' ], | |
}, | |
fontFamily: { | |
value: [ 'typography', 'fontFamily' ], | |
support: [ 'typography', '__experimentalFontFamily' ], | |
useEngine: true, | |
}, | |
fontSize: { | |
value: [ 'typography', 'fontSize' ], | |
support: [ 'typography', 'fontSize' ], | |
useEngine: true, | |
}, | |
fontStyle: { | |
value: [ 'typography', 'fontStyle' ], | |
support: [ 'typography', '__experimentalFontStyle' ], | |
useEngine: true, | |
}, | |
fontWeight: { | |
value: [ 'typography', 'fontWeight' ], | |
support: [ 'typography', '__experimentalFontWeight' ], | |
useEngine: true, | |
}, | |
lineHeight: { | |
value: [ 'typography', 'lineHeight' ], | |
support: [ 'typography', 'lineHeight' ], | |
useEngine: true, | |
}, | |
margin: { | |
value: [ 'spacing', 'margin' ], | |
support: [ 'spacing', 'margin' ], | |
properties: { | |
marginTop: 'top', | |
marginRight: 'right', | |
marginBottom: 'bottom', | |
marginLeft: 'left', | |
}, | |
useEngine: true, | |
}, | |
minHeight: { | |
value: [ 'dimensions', 'minHeight' ], | |
support: [ 'dimensions', 'minHeight' ], | |
useEngine: true, | |
}, | |
padding: { | |
value: [ 'spacing', 'padding' ], | |
support: [ 'spacing', 'padding' ], | |
properties: { | |
paddingTop: 'top', | |
paddingRight: 'right', | |
paddingBottom: 'bottom', | |
paddingLeft: 'left', | |
}, | |
useEngine: true, | |
}, | |
textAlign: { | |
value: [ 'typography', 'textAlign' ], | |
support: [ 'typography', 'textAlign' ], | |
useEngine: false, | |
}, | |
textDecoration: { | |
value: [ 'typography', 'textDecoration' ], | |
support: [ 'typography', '__experimentalTextDecoration' ], | |
useEngine: true, | |
}, | |
textTransform: { | |
value: [ 'typography', 'textTransform' ], | |
support: [ 'typography', '__experimentalTextTransform' ], | |
useEngine: true, | |
}, | |
letterSpacing: { | |
value: [ 'typography', 'letterSpacing' ], | |
support: [ 'typography', '__experimentalLetterSpacing' ], | |
useEngine: true, | |
}, | |
writingMode: { | |
value: [ 'typography', 'writingMode' ], | |
support: [ 'typography', '__experimentalWritingMode' ], | |
useEngine: true, | |
}, | |
'--wp--style--root--padding': { | |
value: [ 'spacing', 'padding' ], | |
support: [ 'spacing', 'padding' ], | |
properties: { | |
'--wp--style--root--padding-top': 'top', | |
'--wp--style--root--padding-right': 'right', | |
'--wp--style--root--padding-bottom': 'bottom', | |
'--wp--style--root--padding-left': 'left', | |
}, | |
rootOnly: true, | |
}, | |
}; |
@@ -93,6 +130,36 @@ function filterElementBlockSupports( blockSupports, name, element ) { | |||
} ); | |||
} | |||
|
|||
function getStableBlockSupports( blockType ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TODO: Add a comment explaining what this does (treats experimental typography keys as non-experimental)
Size Change: +281 B (+0.02%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
Update: while this technically works, it's a bit fiddly. @aaronrobertshaw had the good suggestion to try updating Specifically, the place to do the processing is likely in
This work is a little on the backburner for me, so I won't get around to it immediately, but my next step will be try that idea out (likely in a separate PR) so we can explore the different options (hopefully by sometime next week). |
Just chatted with @aaronrobertshaw some more about the ideas here, and for a potential approach on a neater way to handle this. Ideas to try next:
|
Just closing this out now as I've made a start on an alternative implementation over in #63401, which seems promising. I've only done the JS changes for now, but I'll continue on with the PHP logic next week. Thanks again for the tips, Aaron! 🙇 |
What?
🚧 🚧 🚧 🚧 Early exploration into stabilizing the Typography block supports, not yet ready for testing 🚧 🚧 🚧 🚧
Part of #63001
Allow support for the following typography block supports in both JS and PHP logic:
__experimentalFontFamily
→fontFamily
__experimentalTextDecoration
→textDecoration
__experimentalFontStyle
→fontStyle
__experimentalFontWeight
→fontWeight
__experimentalLetterSpacing
→letterSpacing
__experimentalTextTransform
→textTransform
__experimentalWritingMode
→writingMode
Why?
To enable blocks to opt in to typography supports without needing to use the
__experimental
prefix. At the same time, we need to support any block plugins out in the wild that still use the experimental prefix, so support will likely need to be maintained in perpetuity.How?
TBC
To-do
usePasteStyles
works as expectedTesting Instructions
TBC
Testing Instructions for Keyboard
Screenshots or screencast