fix borderWidth override

Author: kaeizen

src/block-components/block-div/style.js

@@ -14,7 +14,6 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 	addBorderStyles( blockStyleGenerator, {
 		...props,
 		attrNameTemplate: 'block%s',
-		borderTypeGlobalProperty: '--stk-block-background-border-style',
 	} )
 	addSizeStyles( blockStyleGenerator, {
 		...props,

src/block-components/button/style.js

@@ -210,7 +210,6 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		hoverSelector: borderHoverSelector,
 		borderRadiusSelector: selector,
 		attrNameTemplate,
-		borderTypeGlobalProperty: '--stk-button-border-style',
 	} )
 
 	Icon.addStyles( blockStyleGenerator, {

src/block-components/container-div/style.js

@@ -29,7 +29,6 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
 		attrNameTemplate: 'container%s',
 		selector: borderSelector,
 		hoverSelector: `${ borderSelector }:hover`,
-		borderTypeGlobalProperty: '--stk-container-border-style',
 	} )
 	addSizeStyles( blockStyleGenerator, {
 		...props,

src/block-components/helpers/borders/edit.js

@@ -14,7 +14,9 @@ import {
  */
 import { Fragment } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
-import { useAttributeEditHandlers, useBlockLayoutDefaults } from '~stackable/hooks'
+import {
+	useAttributeEditHandlers, useBlockLayoutDefaults, useBlockSetAttributesContext,
+} from '~stackable/hooks'
 import { applyFilters } from '@wordpress/hooks'
 
 export const BORDER_CONTROLS = [
@@ -62,11 +64,8 @@ export const BorderControls = props => {
 		updateAttributes,
 	} = useAttributeEditHandlers( props.attrNameTemplate )
 
-	const { getPlaceholder } = useBlockLayoutDefaults()
-
-	const borderTypeValue = getAttribute( 'borderType' ) || props.borderTypeValue
-
-	const hasBorderType = borderTypeValue !== '' && borderTypeValue !== 'none'
+	const setAttributes = useBlockSetAttributesContext()
+	const { blockLayouts, getPlaceholder } = useBlockLayoutDefaults()
 
 	const borderControls = getPlaceholder( `${ props.placeholderTemplate }-border-style` ) !== '' ? BORDER_CONTROLS_WITH_NONE_VALUE : BORDER_CONTROLS
 
@@ -86,7 +85,7 @@ export const BorderControls = props => {
 				/>
 			}
 
-			{ hasBorderType && props.hasBorderControls &&
+			{ props.hasBorderControls &&
 				<FourRangeControl
 					label={ __( 'Border Width', i18n ) }
 					attribute={ getAttrName( 'borderWidth' ) }
@@ -98,10 +97,21 @@ export const BorderControls = props => {
 					sliderMax={ 5 }
 					defaultLocked={ true }
 					placeholder={ props.borderWidthPlaceholder || getPlaceholder( `${ props.placeholderTemplate }-border-width` ) }
+					changeCallback={ value => {
+						const hasValue = value?.top || value?.right || value?.bottom || value?.left
+						const borderStyleProperty = `${ props.placeholderTemplate }-border-style`
+
+						// Set borderType to 'solid' if no borderType is selected and no global border settings is set
+						if ( hasValue && ! ( getAttribute( 'borderType' ) ) && ! blockLayouts?.[ borderStyleProperty ] ) {
+							setAttributes( { [ getAttrName( 'borderType' ) ]: 'solid' } )
+						}
+
+						return value
+					} }
 				/>
 			}
 
-			{ hasBorderType && props.hasBorderControls &&
+			{ props.hasBorderControls &&
 				<ColorPaletteControl
 					label={ __( 'Border Color', i18n ) }
 					attribute={ getAttrName( 'borderColor' ) }

src/block-components/helpers/borders/style.js

@@ -1,5 +1,3 @@
-import { getBlockLayoutDefault } from '~stackable/plugins/global-settings/utils'
-
 export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
@@ -13,19 +11,9 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrNameTemplate = '%s',
 		hoverSelector,
 		borderRadiusSelector,
-		// borderEnabledCallback = getAttribute => getAttribute( 'borderType' ) !== 'none',
+		// borderEnabledCallback = getAttribute => getAttribute( 'borderType' ) !== '',
 	} = props
 
-	const defaultBorderEnabledCallback = getAttribute => {
-		const defaultBorderType = props.borderTypeGlobalProperty ? getBlockLayoutDefault( props.borderTypeGlobalProperty ) : ''
-
-		const value = defaultBorderType !== '' ? 'none' : ''
-
-		return getAttribute( 'borderType' ) !== value
-	}
-
-	const borderEnabledCallback = props.borderEnabledCallback ?? defaultBorderEnabledCallback
-
 	// The style below is deprecated. We have to keep it because users who have
 	// updated will suddenly see that they have lost their border radius
 	blockStyleGenerator.addBlockStyles( 'borderRadius', [ {
@@ -165,7 +153,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrName: 'borderColor',
 		key: 'borderColor',
 		attrNameTemplate,
-		enabledCallback: borderEnabledCallback,
+		// enabledCallback: borderEnabledCallback,
 		hover: 'all',
 		hoverSelector,
 		dependencies: [ 'borderType' ],
@@ -182,7 +170,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		hover: 'all',
 		hoverSelector,
 		format: '%spx',
-		enabledCallback: borderEnabledCallback,
+		// enabledCallback: borderEnabledCallback,
 		valuePreCallback: value => value?.top,
 		dependencies: [ 'borderType' ],
 	}, {
@@ -196,7 +184,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		hover: 'all',
 		hoverSelector,
 		format: '%spx',
-		enabledCallback: borderEnabledCallback,
+		// enabledCallback: borderEnabledCallback,
 		valuePreCallback: value => value?.right,
 		dependencies: [ 'borderType' ],
 	}, {
@@ -210,7 +198,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		hover: 'all',
 		hoverSelector,
 		format: '%spx',
-		enabledCallback: borderEnabledCallback,
+		// enabledCallback: borderEnabledCallback,
 		valuePreCallback: value => value?.bottom,
 		dependencies: [ 'borderType' ],
 	}, {
@@ -224,7 +212,7 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		hover: 'all',
 		hoverSelector,
 		format: '%spx',
-		enabledCallback: borderEnabledCallback,
+		// enabledCallback: borderEnabledCallback,
 		valuePreCallback: value => value?.left,
 		dependencies: [ 'borderType' ],
 	} ] )

src/hooks/use-global-block-layout-defaults.js

@@ -51,6 +51,7 @@ export const useBlockLayoutDefaults = () => {
 	}
 
 	return {
+		blockLayouts,
 		getPlaceholder,
 		getDefaults,
 	}

src/plugins/global-settings/utils/block-layout-utils.js

@@ -1,6 +1,4 @@
 
-import { select } from '@wordpress/data'
-
 export const STATES = {
 	ALL: {
 		responsive: true, hover: true, unit: false,
@@ -44,22 +42,3 @@ export const getDefault = ( defaults, property, device ) => {
 		top: 0, right: 0, bottom: 0, left: 0,
 	} )
 }
-
-export const getBlockLayoutDefault = ( property, device = 'desktop' ) => {
-	const spacingAndBorders = select( 'stackable/global-spacing-and-borders' ).getBlockLayouts()
-	const buttonsAndIcons = select( 'stackable/global-buttons-and-icons' ).getBlockLayouts()
-
-	const blockLayouts = { ...spacingAndBorders, ...buttonsAndIcons }
-
-	let defaultValue = blockLayouts?.[ property ]?.[ device ]
-
-	if ( device === 'mobile' && ! defaultValue ) {
-		defaultValue = blockLayouts[ property ].tablet
-	}
-
-	if ( ( device === 'mobile' || device === 'tablet' ) && ! defaultValue ) {
-		defaultValue = blockLayouts[ property ].desktop
-	}
-
-	return defaultValue || ''
-}