-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
What problem does this address?
A Spacer block improvement adding support for theme-controlled spacing presets is ready to merge in #44002. The native mobile editor lacks support for the spacing presets, as the native context can not natively parse the CSS custom properties used for the feature. Landing the web feature first would result in a "Problem display the block" error and the possibility of accidentally overriding the Spacer block settings in the native mobile editor.
What is your proposed solution?
We should add support for the new spacing presets by parsing the CSS custom properties within the Spacer block.
[The CSS custom presets are] within the block's attributes so we will need to parse these values in the block itself. If we want to support default style values for the Spacer block coming from the theme.json we will need to adjust something there but we don't have support for those controls on native so I think that should be added once we add those controls.
— @geriux in #44002 (comment)
This is somewhat similar to how we parse global style properties within getGlobalStyles, but will need to be done within the Spacer block itself and not necessarily at the global level.
gutenberg/packages/components/src/mobile/global-styles-context/utils.native.js
Lines 381 to 421 in 5cbfe81
| export function getGlobalStyles( rawStyles, rawFeatures ) { | |
| const features = rawFeatures ? JSON.parse( rawFeatures ) : {}; | |
| const mappedValues = getMappedValues( features, features?.color?.palette ); | |
| const colors = parseStylesVariables( | |
| JSON.stringify( features?.color ), | |
| mappedValues | |
| ); | |
| const gradients = parseStylesVariables( | |
| JSON.stringify( features?.color?.gradients ), | |
| mappedValues | |
| ); | |
| const customValues = parseStylesVariables( | |
| JSON.stringify( features?.custom ), | |
| mappedValues | |
| ); | |
| const globalStyles = parseStylesVariables( | |
| rawStyles, | |
| mappedValues, | |
| customValues | |
| ); | |
| const fontSizes = normalizeFontSizes( features?.typography?.fontSizes ); | |
| return { | |
| __experimentalFeatures: { | |
| color: { | |
| palette: colors?.palette, | |
| gradients, | |
| text: features?.color?.text ?? true, | |
| background: features?.color?.background ?? true, | |
| defaultPalette: features?.color?.defaultPalette ?? true, | |
| defaultGradients: features?.color?.defaultGradients ?? true, | |
| }, | |
| typography: { | |
| fontSizes, | |
| customLineHeight: features?.custom?.[ 'line-height' ], | |
| }, | |
| }, | |
| __experimentalGlobalStylesBaseStyles: globalStyles, | |
| }; | |
| } |