Skip to content

Add presets support to the native mobile editor Spacer block #44234

@dcalhoun

Description

@dcalhoun

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.

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,
};
}

Metadata

Metadata

Assignees

Labels

Mobile App - i.e. Android or iOSNative mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)[Block] SpacerAffects the Spacer Block[Type] EnhancementA suggestion for improvement.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions