Editor Performance Rework

[bfintal]

This PR is a refactor of how the block styles are generated. There are the major changes in this PR:

1. The BlockCss component will be deprecated, instead of using a ReactJS Component to generate styles, we will now have a single class / object that should be able to generate CSS styles faster. This requires a rewrite of all BlockCss components into function calls.
2. CSS style generation from the save.js will be removed so that there is zero CSS computations performed during block saving. Instead, CSS style generation will only be done in edit.js when attributes are being changed.
3. We refactored some usage of useBlockContext (our own hook) and replaced it with useSelect using
   getBlockRootClientId and getBlockOrder
4. Removed the minifyCSS call when saving CSS
5. Some instances of useAttributeEditHandlers is replaced with getAttributeNameFunc to prevent rerenders
6. Memo the alignment block toolbar button

Block Changes

These changes will need to be applied across all Stackable blocks:

edit.js

1. Remove useGeneratedCss( props.attributes )
2. Remove the <BlockStyles /> component, and replace with a hook that generates the editor css:

// Generate the CSS styles for the block.
const blockCss = useBlockCssGenerator( {
	attributes: props.attributes,
	blockStyles,
	clientId: props.clientId,
	context: props.context,
	setAttributes: props.setAttributes,
	blockState: props.blockState,
	version: VERSION,
} )

// In the rendered edit component:
{ blockCss && <style key="block-css">{ blockCss }</style> }

3. Separate the inspector controls into a separated memoed component to prevent rerenders

const Edit = props => {
 	return (
- 		<>
-			<InspectorTabs />
-			<InspectorLayoutControls prop1={ props.attributes.prop1 } />
-			// ... 
- 		</>
+		<InspectorControls prop1={ props.attributes.prop1 } />
	)
}

+ const InspectorControls = memo( props => {
+ 	return (
+ 		<>
+ 			<InspectorTabs />
+ 			<InspectorLayoutControls prop1={ props.prop1 } />
+ 			// ...
+ 		</>
+ 	)
+ } )

save.js

1. Remove all CSS generation, instead just display the attribute generatedCss:

{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }

style.js

1. Rewrite all <BlockCss /> components to BlockStyleGenerator object

- const propsToPass = {
- 	...props,
- 	version: props.version,
- 	versionAdded: '3.0.0',
- 	versionDeprecated: '',
- }
-
- <BlockCss
- 	{ ...propsToPass }
- 	selector=".%s-container"
- 	styleRule="marginTop"
- 	attrName="columnSpacing"
- 	key="columnSpacing-top"
- 	responsive="all"
- 	hasUnits="px"
- 	valuePreCallback={ callbacks.marginTop.valuePreCallback }
- />

+ export const blockStyles = new BlockStyleGenerator( {
+ 	versionAdded: '3.0.0',
+ 	versionDeprecated: '',
+ } )
+ 
+ blockStyles.addBlockStyles( 'columnSpacing', [ {
+ 	selector: '.%s-container',
+ 	styleRule: 'marginTop',
+ 	attrName: 'columnSpacing',
+ 	key: 'columnSpacing-top',
+ 	responsive: 'all',
+ 	hasUnits: 'px',
+ 	valuePreCallback: callbacks.marginTop.valuePreCallback,
+ } ] )

2. Remove memos and replace components with the new BlockStyleGenerator methods:

- <Advanced.Style { ...props } />
+ Advanced.Style.addStyles( blockStyles )

This is assuming we're built Advanced.Style.addStyles

5. Remove the whole BlockStyles.Content

Block Component Changes

1. We need to replace all <BlockCss /> components to BlockStyleGenerator object

Other Optimizations Implemented

AdvancedRangeControl:

• Changed updating of internal value - removed useEffect
• Removed useEffect and useLayoutEffect for computing dynamic placeholder values

⚠️ Pending things

• See if we can remove useBlockContext
• Remove the useGeneratedCss hook in src/block-components/style/use-generated-css.js
• Remove all instances of <BlockCss /> component
• One room for improvement is the useBlockCssGenerator, we have 2 hooks one for edit and one for save, maybe we can share the process somehow so as not to compute things twice. e.g. do not minify the saved css (maybe leave that to PHP instead, or don't) so that we can improve performance

⚠️ Optimization Issues found

• When you have an Inner Column block, if you drag left/right rapidly the Column Spacing control, it stalls.

Screen.Recording.2024-08-15.at.8.30.44.AM.mov

fixes #3261

[github-actions]

🤖 Pull request artifacts

file	commit
pr3290-stackable-3290-merge.zip	e8777a3

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3290-stackable-3290-merge.zip"}}]}