fix bug (border width and border type)

Author: Gambit

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

@@ -14,6 +14,7 @@ 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,6 +210,7 @@ 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,6 +29,7 @@ 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/style.js

@@ -1,3 +1,5 @@
+import { getBlockLayoutDefault } from '~stackable/plugins/global-settings/utils'
+
 export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 	const propsToPass = {
 		...props,
@@ -11,9 +13,19 @@ export const addBorderStyles = ( blockStyleGenerator, props = {} ) => {
 		attrNameTemplate = '%s',
 		hoverSelector,
 		borderRadiusSelector,
-		borderEnabledCallback = getAttribute => getAttribute( 'borderType' ) !== '' && getAttribute( 'borderType' ) !== 'none',
+		// borderEnabledCallback = getAttribute => getAttribute( 'borderType' ) !== 'none',
 	} = 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', [ {

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

@@ -1,4 +1,6 @@
 
+import { select } from '@wordpress/data'
+
 export const STATES = {
 	ALL: {
 		responsive: true, hover: true, unit: false,
@@ -42,3 +44,22 @@ 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 || ''
+}