change request part 1

Author: Gambit

src/block-components/columns/edit.js

@@ -36,6 +36,7 @@ import { useBlockEditContext } from '@wordpress/block-editor'
 import { useState } from '@wordpress/element'
 
 export const Controls = props => {
+	// TODO: Get global default value for placeholder
 	const [ , setColumnsUpdate ] = useState( 0 )
 	const deviceType = useDeviceType()
 	const { clientId } = useBlockEditContext()

src/components/base-control2/hover-state-toggle.js

@@ -51,7 +51,7 @@ const _ALL_HOVER = [ 'normal', 'hover', 'parent-hover', 'collapsed' ]
 const ALL_HOVER_ATTRIBUTE_SUFFIX = ALL_HOVER.map( s => upperFirst( camelCase( s ) ) )
 
 const HoverStateToggle = props => {
-	const [ currentHoverState, _blockHoverClass, hasParentHoverState, hasCollapsedState, isCollapsedBlock ] = useBlockHoverState( { globalControl: props.globalControl } )
+	const [ currentHoverState, _blockHoverClass, hasParentHoverState, hasCollapsedState, isCollapsedBlock ] = useBlockHoverState( { forceUpdateHoverState: props.forceUpdateHoverState } )
 	const deviceType = useDeviceType()
 
 	// These are all of the attributes for all states.
@@ -77,12 +77,12 @@ const HoverStateToggle = props => {
 		return hover.includes( value )
 	} )
 
-	const displayTooltip = props.globalControl ? false : ! hasParentHoverState
+	const displayTooltip = props.forceUpdateHoverState ? false : ! hasParentHoverState
 
 	const stateOptions = _stateOptions.map( state => {
 		if ( state.value === 'parent-hover' ) {
 			return {
-				disabled: props.globalControl ? false : ! hasParentHoverState,
+				disabled: props.forceUpdateHoverState ? false : ! hasParentHoverState,
 				tooltip: displayTooltip
 					? <span className="stk-tooltip__text">
 						{ sprintf( '%s - %s', __( 'Parent Hovered', i18n ), __( 'Add a Container Background to a parent block to enable this state.', i18n ) ) }
@@ -117,7 +117,7 @@ HoverStateToggle.defaultProps = {
 	hover: false,
 	attribute: '',
 	hasResponsive: false, // Wether the attribute has responsive attributes (where we have hover states per device type)
-	globalControl: false,
+	forceUpdateHoverState: false,
 }
 
 export default memo( HoverStateToggle )

src/components/base-control2/index.js

@@ -87,7 +87,7 @@ export const BaseControl = props => {
 								hover={ props.hover }
 								attribute={ props.attribute }
 								hasResponsive={ hasResponsive }
-								globalControl={ props.globalControl }
+								forceUpdateHoverState={ props.forceUpdateHoverState }
 							/>
 						) }
 					</div>
@@ -140,7 +140,7 @@ BaseControl.defaultProps = {
 	visualGuide: EMPTY_OBJ, // If supplied, displays a highlight on the block.
 	helpTooltip: EMPTY_OBJ, // If supplied, displays a help tooltip when hovering on the label.
 
-	globalControl: false,
+	forceUpdateHoverState: false,
 }
 
 const AdvancedControl = props => {
@@ -194,7 +194,7 @@ AdvancedControl.defaultProps = {
 	visualGuide: EMPTY_OBJ, // If supplied, displays a highlight on the block.
 	helpTooltip: EMPTY_OBJ, // If supplied, displays a help tooltip when hovering on the label.
 
-	globalControl: false,
+	forceUpdateHoverState: false,
 }
 
 export default AdvancedControl

src/components/shadow-control/index.js

@@ -254,7 +254,7 @@ const ShadowControl = memo( props => {
 	const [ _value, onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, valueCallback, changeCallback )
 	const value = typeof props.value === 'undefined' ? _value : props.value
 
-	const [ propsToPass ] = extractControlProps( _props )
+	const [ propsToPass, controlProps ] = extractControlProps( _props )
 
 	useEffect( () => {
 		const clickOutsideListener = event => {
@@ -282,6 +282,7 @@ const ShadowControl = memo( props => {
 		<>
 			<AdvancedRangeControl
 				{ ...propsToPass }
+				{ ...controlProps }
 				attribute={ props.attribute }
 				label={ label }
 				value={ value }
@@ -304,10 +305,10 @@ const ShadowControl = memo( props => {
 						icon={ <Dashicon icon="admin-generic" /> }
 					/>
 				) }
-				globalControl={ props.globalControl }
 			/>
 			{ isPopoverOpen && (
 				<ShadowFilterControl
+					{ ...controlProps }
 					anchorRect={ buttonRef.current?.getBoundingClientRect() }
 					attribute={ props.attribute }
 					responsive={ props.responsive }
@@ -316,7 +317,6 @@ const ShadowControl = memo( props => {
 					hasInset={ props.hasInset }
 					isFilter={ props.isFilter }
 					onEscape={ () => setIsPopoverOpen( false ) }
-					globalControl={ props.globalControl }
 					value={ props.shadowFilterValue }
 					onChange={ props.shadowFilterOnChange }
 				/>

src/hooks/use-block-hover-state.js

@@ -113,7 +113,7 @@ register( createReduxStore( 'stackable/hover-state', {
 	selectors: STORE_SELECTORS,
 } ) )
 
-export const useBlockHoverState = ( { globalControl = false } = {} ) => {
+export const useBlockHoverState = ( { forceUpdateHoverState = false } = {} ) => {
 	const { clientId } = useBlockEditContext()
 	const clientIds = useSelect( select => select( 'core/block-editor' ).getMultiSelectedBlockClientIds() )
 
@@ -191,7 +191,7 @@ export const useBlockHoverState = ( { globalControl = false } = {} ) => {
 			}
 		}
 
-		if ( globalControl ) {
+		if ( forceUpdateHoverState ) {
 			currentHoverState = hoverState
 		}
 

src/plugins/global-settings/block-layouts/editor-loader.js

@@ -109,14 +109,14 @@ export const GlobalBlockLayoutStyles = () => {
 		SelectedHoverChildren: select( 'stackable/hover-state' ).getSelectedHoverChildren(),
 	} ), [] )
 
-	const [ currentHoverState ] = useBlockHoverState( { globalControl: true } )
+	const [ currentHoverState ] = useBlockHoverState( { forceUpdateHoverState: true } )
 	const [ styles, setStyles ] = useState( '' )
 
 	useEffect( () => {
 		if ( blockLayouts && typeof blockLayouts === 'object' ) {
 			renderGlobalStyles( blockLayouts, setStyles, currentHoverState, selectedBlockUniqueId, SelectedParentHoverBlock )
 		}
-	}, [ JSON.stringify( blockLayouts ), currentHoverState, SelectedParentHoverBlock ] )
+	}, [ blockLayouts, currentHoverState, SelectedParentHoverBlock ] )
 
 	return styles
 }