Push local block styles to global block style #45961
Closed
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
|
|
|
Size Change: +898 B (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
ramonjd
added
[Status] In Progress
ramonjd
commented
Nov 23, 2022
ramonjd
force-pushed
the
try/save-block-local-styles-to-global-styles
branch
from
9d2cc43 to
cf94d86
Compare
ramonjd
commented
Dec 7, 2022
And the worst commit.
…styles so we can hook into the global styles context.
… editor Removing blockglobalstyle context and provider since we'll use global style provider. Starting to reset user config when resetting block-level styles. Deliberately not rebuilding docs here :)
Apply global styles reset in resetAllFilters Appearance and line height reset methods
ramonjd
force-pushed
the
try/save-block-local-styles-to-global-styles
branch
from
c589552 to
7877bc0
Compare
|
Closing this exploratory PR with the following remarks:
Example button callback const { setUserConfig } = useContext( GlobalStylesContext );
const pushBlockAttributesToGlobalStyles = () => {
setPushToGlobalStylesState( 'sending' );
const newStyles = JSON.parse(
JSON.stringify( attributes?.style || {} )
);
setUserConfig( ( currentConfig ) => {
// Deep clone `currentConfig` to avoid mutating it later.
const newUserConfig = JSON.parse(
JSON.stringify( currentConfig )
);
Object.entries( STYLE_PROPERTY ).forEach(
( [ key, properties ] ) => {
const styleValue = get(
newStyles,
properties?.value,
undefined
);
if ( styleValue !== undefined ) {
const fullPath = [
'styles',
'blocks',
blockName,
...properties?.value,
];
set( newUserConfig, fullPath, styleValue );
}
}
);
// Handle presets in attributes.
[
{
key: 'fontSize',
presetKey: 'font-size',
path: [ 'typography', 'fontSize' ],
},
{
key: 'fontFamily',
presetKey: 'font-family',
path: [ 'typography', 'fontFamily' ],
},
{
key: 'textColor',
presetKey: 'color',
path: [ 'color', 'text' ],
},
{
key: 'backgroundColor',
presetKey: 'color',
path: [ 'color', 'background' ],
},
{
key: 'gradient',
presetKey: 'gradient',
path: [ 'color', 'gradient' ],
},
].forEach( ( { key, path, presetKey } ) => {
if ( !! attributes[ key ] ) {
const fullPath = [ 'styles', 'blocks', blockName, ...path ];
set(
newUserConfig,
fullPath,
getCSSVarFromStyleValue(
`var:preset|${ presetKey }|${ attributes[ key ] }`
)
);
}
} );
return newUserConfig;
} );
}; |
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.
An investigation into #44361
The approach was to create a new context provider to manage block global styles for block supports.
I think maybe the first version should target the site editor only because a
GlobalStylesContextalready exists (to get and set current, merged global styles) and we can see the style updating dynamically. In the post editor, the functionality to update global styles in the DOM isn't available yet, and could therefore be a follow up.Assumed requirements (for now)
See further comments over at the issue: #44361 (comment)
TODO
GlobalStylesContextinstead for the site editorSite editor
2022-12-08.13.27.04.mp4