Feature/styles indicator

.eslintrc.json

@@ -64,7 +64,7 @@
 		"no-alert": "error",
 		"no-bitwise": "error",
 		"no-caller": "error",
-		"no-console": "error",
+		"no-console": "warn",
 		"no-const-assign": "error",
 		"no-debugger": "error",
 		"no-dupe-args": "error",

src/blocks/button/edit.js

@@ -2,7 +2,7 @@ import BlockControls from './components/BlockControls';
 import InspectorAdvancedControls from './components/InspectorAdvancedControls';
 import ComponentCSS from './components/ComponentCSS';
 import GoogleFontLink from '../../components/google-font-link';
-import { Fragment, useRef, useState, useEffect } from '@wordpress/element';
+import { Fragment, useRef, useEffect } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withButtonLegacyMigration, withDeviceType, withUniqueId } from '../../hoc';
 import withDynamicContent from '../../extend/dynamic-content/hoc/withDynamicContent';
@@ -38,21 +38,12 @@ const ButtonEdit = ( props ) => {
 	} = attributes;
 
 	const ref = useRef( null );
-	const [ computedStyles, setComputedStyles ] = useState( {} );
 	const deviceType = getDeviceType();
 	const {
 		getBlockParents,
 		getBlocksByClientId,
 	} = useSelect( ( select ) => select( 'core/block-editor' ), [] );
 
-	useEffect( () => {
-		const computedButtonStyles = getComputedStyle( ref.current );
-
-		setComputedStyles( {
-			fontSize: parseInt( computedButtonStyles.fontSize ) || '',
-		} );
-	}, [] );
-
 	useEffect( () => {
 		const parentBlockId = getBlockParents( clientId, true );
 
@@ -85,7 +76,6 @@ const ButtonEdit = ( props ) => {
 			<GenerateBlocksInspectorControls
 				attributes={ attributes }
 				setAttributes={ setAttributes }
-				computedStyles={ computedStyles }
 			>
 				{ applyFilters( 'generateblocks.editor.settingsPanel', undefined, { ...props, device: deviceType } ) }
 			</GenerateBlocksInspectorControls>

src/blocks/headline/edit.js

@@ -1,7 +1,7 @@
 import './markformat';
 import { applyFilters } from '@wordpress/hooks';
 import BlockControls from './components/BlockControls';
-import { Fragment, useEffect, useRef, useState } from '@wordpress/element';
+import { Fragment, useEffect, useRef } from '@wordpress/element';
 import InspectorAdvancedControls from './components/InspectorAdvancedControls';
 import GoogleFontLink from '../../components/google-font-link';
 import ComponentCSS from './components/ComponentCSS';
@@ -50,12 +50,10 @@ const HeadlineEdit = ( props ) => {
 		googleFontVariants,
 		icon,
 		hasIcon,
-		element,
 		isBlockPreview = false,
 	} = attributes;
 
 	const ref = useRef( null );
-	const [ computedStyles, setComputedStyles ] = useState( {} );
 	const deviceType = getDeviceType();
 
 	useEffect( () => {
@@ -64,16 +62,6 @@ const HeadlineEdit = ( props ) => {
 		}
 	}, [] );
 
-	useEffect( () => {
-		const computedHeadlineStyles = getComputedStyle( ref.current );
-
-		setComputedStyles( {
-			marginTop: parseInt( computedHeadlineStyles.marginTop ) || '',
-			marginBottom: parseInt( computedHeadlineStyles.marginBottom ) || '',
-			fontSize: parseInt( computedHeadlineStyles.fontSize ) || '',
-		} );
-	}, [ element ] );
-
 	return (
 		<Fragment>
 			<BlockControls
@@ -85,7 +73,6 @@ const HeadlineEdit = ( props ) => {
 			<GenerateBlocksInspectorControls
 				attributes={ attributes }
 				setAttributes={ setAttributes }
-				computedStyles={ computedStyles }
 			>
 				{ applyFilters( 'generateblocks.editor.settingsPanel', undefined, { ...props, device: deviceType } ) }
 			</GenerateBlocksInspectorControls>

src/components/apply-filters/index.js

@@ -3,28 +3,19 @@
  */
 import {
 	applyFilters,
+	doAction,
 } from '@wordpress/hooks';
 
-import {
-	Component,
-} from '@wordpress/element';
+export default function ApplyFilters( props ) {
+	const { name, children } = props;
+	doAction( 'generateblocks.editor.panel.beforeFilters', props );
 
-/**
- * Component Class
- */
-export default class ApplyFilters extends Component {
-	render() {
-		const {
+	return (
+		applyFilters(
 			name,
-			children,
-		} = this.props;
-
-		return (
-			applyFilters(
-				name,
-				children || '',
-				this.props,
-			)
-		);
-	}
+			children || '',
+			props,
+		)
+	);
 }
+

src/components/panel-area/index.js

@@ -1,19 +1,24 @@
-import ApplyFilters from '../apply-filters/';
-import objectIsEmpty from '../../utils/object-is-empty';
 import { PanelBody } from '@wordpress/components';
 import { applyFilters } from '@wordpress/hooks';
+import { forwardRef, useContext } from '@wordpress/element';
+import ApplyFilters from '../apply-filters/';
+import objectIsEmpty from '../../utils/object-is-empty';
 import useLocalStorageState from 'use-local-storage-state';
+import ControlsContext from '../../block-context';
+import classnames from 'classnames';
 
-export default function PanelArea( props ) {
+const PanelArea = forwardRef( function PanelArea( props, ref ) {
+	const { blockName } = useContext( ControlsContext );
 	const {
-		title = false,
-		initialOpen = false,
 		icon,
 		className,
 		id,
 		state,
-		showPanel = true,
 		children,
+		title = false,
+		initialOpen = false,
+		showPanel = true,
+		hasGlobalStyle = false,
 	} = props;
 
 	const [ panels, setPanels ] = useLocalStorageState(
@@ -34,41 +39,56 @@ export default function PanelArea( props ) {
 	}
 
 	return (
-		<ApplyFilters name={ 'generateblocks.panel.' + id } props={ props } state={ state }>
-			{ title ? (
-				<PanelBody
-					title={ title }
-					initialOpen={
-						'undefined' !== typeof panels[ id ]
-							? panels[ id ]
-							: initialOpen
-					}
-					icon={ icon }
-					className={ className }
-					onToggle={ () => {
-						const isOpen = panels[ id ] ||
+		<ApplyFilters
+			name="generateblocks.editor.panel"
+			blockName={ blockName }
+			state={ state }
+			panelRef={ ref }
+			{ ...props }
+		>
+			<ApplyFilters
+				name={ 'generateblocks.panel.' + id }
+				props={ props }
+				state={ state }
+			>
+				{ title ? (
+					<PanelBody
+						ref={ ref }
+						title={ title }
+						initialOpen={
+							'undefined' !== typeof panels[ id ]
+								? panels[ id ]
+								: initialOpen
+						}
+						icon={ icon }
+						className={ classnames( className, hasGlobalStyle && 'has-global-style' ) }
+						onToggle={ () => {
+							const isOpen = panels[ id ] ||
 							(
 								'undefined' === typeof panels[ id ] &&
 								initialOpen
 							);
 
-						setPanels( {
-							...panels,
-							[ id ]: ! isOpen,
-						} );
-					} }
-				>
-					{
-						applyFilters( 'generateblocks.editor.panelContents', children, id, props )
-					}
-				</PanelBody>
-			) : (
-				<PanelBody>
-					{
-						applyFilters( 'generateblocks.editor.panelContents', children, id, props )
-					}
-				</PanelBody>
-			) }
+							setPanels( {
+								...panels,
+								[ id ]: ! isOpen,
+							} );
+						} }
+					>
+						{
+							applyFilters( 'generateblocks.editor.panelContents', children, id, props )
+						}
+					</PanelBody>
+				) : (
+					<PanelBody>
+						{
+							applyFilters( 'generateblocks.editor.panelContents', children, id, props )
+						}
+					</PanelBody>
+				) }
+			</ApplyFilters>
 		</ApplyFilters>
 	);
-}
+} );
+
+export default PanelArea;

src/components/unit-control/index.js

@@ -85,7 +85,7 @@ export default function UnitControl( props ) {
 		}
 
 		setPlaceholders();
-	}, [ value, overrideValue ] );
+	}, [ value, overrideValue, placeholder ] );
 
 	useEffect( () => {
 		// Don't run this on first render.
@@ -112,7 +112,7 @@ export default function UnitControl( props ) {
 		if ( ! hasOverride && fullValue !== value ) {
 			onChange( fullValue );
 		}
-	}, [ numericValue, unitValue ] );
+	}, [ numericValue, unitValue, placeholder ] );
 
 	useEffect( () => {
 		if ( focusOnMount && inputRef?.current ) {