Merge pull request #1595 from tomusborne/tweak/separate-style-replace…

…ments

Tweak: Separate style replacements

src/editor/index.js

@@ -4,6 +4,7 @@ import './stores.js';
 import './disable-blocks.js';
 import './toolbar-appenders.js';
 import './global-max-width.js';
+import './style-html-attribute.js';
 import './editor.scss';
 
 wpDomReady( () => {

src/editor/style-html-attribute.js

@@ -0,0 +1,31 @@
+import { addFilter } from '@wordpress/hooks';
+import { replaceTags } from '../dynamic-tags/utils';
+
+addFilter(
+	'generateblocks.editor.htmlAttributes.style',
+	'generateblocks/styleWithReplacements',
+	async( style, props ) => {
+		const { context } = props;
+
+		// Check if any replacements need to be made
+		if ( ! style.includes( '{{' ) ) {
+			return style;
+		}
+
+		const replacements = await replaceTags( style, context );
+
+		if ( ! replacements.length ) {
+			return style;
+		}
+
+		const withReplacements = replacements.reduce( ( acc, { original, replacement, fallback } ) => {
+			if ( ! replacement ) {
+				return acc.replaceAll( original, fallback );
+			}
+
+			return acc.replaceAll( original, replacement );
+		}, style );
+
+		return withReplacements ? withReplacements : style;
+	}
+);

src/hoc/withHtmlAttributes.js

@@ -1,11 +1,11 @@
 import { useEffect, useMemo, useState } from '@wordpress/element';
 import { InspectorAdvancedControls } from '@wordpress/block-editor';
 import { TextControl } from '@wordpress/components';
+import { applyFilters } from '@wordpress/hooks';
 
 import { useUpdateEffect } from 'react-use';
 
 import { convertInlineStyleStringToObject } from '@utils/convertInlineStyleStringToObject';
-import { replaceTags } from '../dynamic-tags/utils';
 
 export const booleanAttributes = [
 	'allowfullscreen',
@@ -74,37 +74,22 @@ export function withHtmlAttributes( WrappedComponent ) {
 			align,
 		} = attributes;
 
-		const [ styleWithReplacements, setStyleWithReplacements ] = useState( '' );
 		const { style = '', href, ...otherAttributes } = htmlAttributes;
+		const [ processedStyle, setProcessedStyle ] = useState( style );
 
 		useEffect( () => {
-			async function getReplacements() {
-			// Check if any replacements need to be made if not, do nothing.
-				if ( ! style.includes( '{{' ) ) {
-					setStyleWithReplacements( style );
-					return;
-				}
-
-				const replacements = await replaceTags( style, context );
-
-				if ( ! replacements.length ) {
-					setStyleWithReplacements( style );
-					return;
-				}
-
-				const withReplacements = replacements.reduce( ( acc, { original, replacement, fallback } ) => {
-					if ( ! replacement ) {
-						return acc.replaceAll( original, fallback );
-					}
-
-					return acc.replaceAll( original, replacement );
-				}, style );
+			async function fetchProcessedStyle() {
+				const styleValue = await applyFilters(
+					'generateblocks.editor.htmlAttributes.style',
+					style,
+					{ ...props }
+				);
 
-				setStyleWithReplacements( withReplacements ? withReplacements : style );
+				setProcessedStyle( styleValue );
 			}
 
-			getReplacements();
-		}, [ style, context ] );
+			fetchProcessedStyle();
+		}, [ style, props ] );
 
 		useUpdateEffect( () => {
 			const layoutClasses = [ 'alignwide', 'alignfull' ];
@@ -120,8 +105,8 @@ export function withHtmlAttributes( WrappedComponent ) {
 			setAttributes( { className: newClasses.join( ' ' ) } );
 		}, [ align ] );
 
-		const inlineStyleObject = typeof styleWithReplacements === 'string'
-			? convertInlineStyleStringToObject( styleWithReplacements )
+		const inlineStyleObject = typeof processedStyle === 'string'
+			? convertInlineStyleStringToObject( processedStyle )
 			: '';
 		const combinedAttributes = {
 			...otherAttributes,