Start Stackable compatibility

e2e/readme.md

@@ -135,7 +135,7 @@ Fail if a panel still shows `ProControl` / "Get Premium" while premium is mocked
 
 | Surface | Flow |
 |---------|------|
-| Design System | Sidebar opens; Preview; Color Schemes / Font pairs / Size presets / Icon Library are live controls |
+| Design System | Sidebar opens; Preview; Color Schemes / Font pairs / Size and shadow presets / Icon Library are live controls |
 | Global Block Styles | Save a named style from one Text block, apply it to a second; canvas uses the style, inspector stays at defaults and can override; rename and delete from Design System; updating a style applies the change to other blocks that use it |
 | Dynamic Content | Post title / meta / featured image resolve on the frontend; custom date format apply path (`e2e/tests/dynamic-content-custom-date.spec.ts`) |
 | Conditional display | Logged-in condition visible on frontend; logged-out condition hidden while logged in |

e2e/tests/admin.spec.ts

@@ -19,7 +19,7 @@
 
 	const welcome = page.getByText( 'Welcome to Stackable' )
 	const activateFree = page.getByRole( 'link', { name: 'Activate Free Version' } )
 	await expect( welcome.or( activateFree ) ).toBeVisible()
 
 	if ( await activateFree.isVisible().catch( () => false ) ) {
 		await activateFree.click()
@@ -93,7 +93,9 @@
 	await expect( page.getByText( 'Force Typography Styles' ) ).toBeVisible()
 
 	await page.getByRole( 'tab', { name: /Miscellaneous/ } ).click()
-	await expect( page.getByRole( 'heading', { name: 'Miscellaneous' } ) ).toBeVisible()
+	await expect( page.getByRole( 'heading', { name: 'Feature Flags' } ) ).toBeVisible()
+	await expect( page.getByRole( 'checkbox', { name: 'Enable Extended Block Style Inheritance' } ) ).toBeVisible()
+	await expect( page.getByRole( 'checkbox', { name: 'Use Border Radius Presets from theme.json' } ) ).toBeVisible()
 
 	await page.getByRole( 'tab', { name: 'Import/Export' } ).click()
 	await expect( page.getByRole( 'heading', { name: 'Import' } ) ).toBeVisible()

src/block-components/columns/edit.js

@@ -41,7 +41,7 @@ export const Controls = props => {
 	// TODO: Get global default value for placeholder
 	const [ , setColumnsUpdate ] = useState( 0 )
 	const deviceType = useDeviceType()
-	const { getPlaceholder } = useBlockLayoutDefaults()
+	const { getPlaceholder } = useBlockLayoutDefaults( props.defaultOverrides )
 	const { clientId } = useBlockEditContext()
 	const {
 		numInnerBlocks, innerBlocks,
@@ -259,7 +259,7 @@ export const Controls = props => {
 						defaultLocked={ true }
 						min={ [ 0, 0 ] }
 						sliderMax={ [ 200, 30 ] }
-						placeholder={ numInnerBlocks === 1 ? '0' : getPlaceholder( 'column-margin' ) }
+						placeholder={ numInnerBlocks === 1 ? '0' : getPlaceholder( 'column-margin', { device: deviceType.toLowerCase() } ) }
 						visualGuide={ {
 							selector: '.stk-%s-column > * > * > [data-type="stackable/column"] > * > .stk-column > .stk-inner-blocks',
 							highlight: 'column-spacing',
@@ -278,7 +278,7 @@ export const Controls = props => {
 						responsive="all"
 						min={ 0 }
 						sliderMax={ 100 }
-						placeholder={ getPlaceholder( 'columns-column-gap' ) }
+						placeholder={ getPlaceholder( 'columns-column-gap', { device: deviceType.toLowerCase() } ) }
 						visualGuide={ {
 							selector: '.stk-%s-column > * > *',
 							highlight: 'columns:column-gap',

src/block-components/typography/edit.js

@@ -23,7 +23,9 @@ import {
 	PanelAdvancedSettings,
 	ShadowControl,
 } from '~stackable/components'
-import { getAttributeName, getAttrNameFunction } from '~stackable/util'
+import {
+	getAttributeName, getAttrNameFunction, getFontFamily,
+} from '~stackable/util'
 import { escapeHTMLIfInvalid } from './util'
 
 /**
@@ -303,6 +305,8 @@ export const Controls = props => {
 					label={ __( 'Shadow / Outline', i18n ) }
 					attribute={ attributeName( 'textShadow' ) }
 					options={ TYPOGRAPHY_SHADOWS }
+					previewType="text"
+					previewFontFamily={ fontFamily ? getFontFamily( fontFamily ) : undefined }
 					placeholder=""
 					hover="all"
 					hasInset={ false }

src/block/column/edit.js

@@ -7,7 +7,9 @@ import blockStyles from './style'
  * External dependencies
  */
 import classnames from 'classnames'
-import { i18n, version as VERSION } from 'stackable'
+import {
+	i18n, settings, version as VERSION,
+} from 'stackable'
 import { useBlockLayoutDefaults, usePresetControls } from '~stackable/hooks'
 import {
 	AdvancedToggleControl,
@@ -123,6 +125,7 @@ const Edit = props => {
 			<InspectorControls
 				isOnlyBlock={ isOnlyBlock }
 				useZeroColumnSpacing={ useZeroColumnSpacing }
+				defaultOverrides={ parentBlock.name === 'stackable/columns' ? settings.stackable_column_spacing_defaults : undefined }
 				alignLastBlockToBottom={ props.attributes.alignLastBlockToBottom }
 				setAttributes={ props.setAttributes }
 			/>
@@ -164,7 +167,7 @@ const Edit = props => {
 // Inspector controls for the block, it's important that we only pass only the
 // props used by controls to prevent rerenders of all the inspector controls.
 const InspectorControls = memo( props => {
-	const { getPlaceholder } = useBlockLayoutDefaults()
+	const { getPlaceholder } = useBlockLayoutDefaults( props.defaultOverrides )
 	const presets = usePresetControls( 'spacingSizes' )
 		?.getPresetMarks( { addNonePreset: true } ) || null
 

src/block/columns/edit.js

@@ -6,7 +6,7 @@ import blockStyles from './style'
 /**
  * External dependencies
  */
-import { version as VERSION } from 'stackable'
+import { settings, version as VERSION } from 'stackable'
 import classnames from 'classnames'
 import {
 	ColumnInnerBlocks,
@@ -173,7 +173,7 @@ const InspectorControls = memo( () => {
 		<>
 			<InspectorTabs />
 
-			<Columns.InspectorControls />
+			<Columns.InspectorControls defaultOverrides={ settings.stackable_column_spacing_defaults } />
 			<InspectorLayoutControls>
 				<ControlSeparator />
 			</InspectorLayoutControls>

src/components/index.js

@@ -80,7 +80,9 @@ export { default as AdvancedFocalPointControl } from './advanced-focal-point-con
 export { default as AdvancedTokenField } from './advanced-token-field'
 export { default as ImageFilterControl } from './image-filter-control'
 export { default as GroupPlaceholder } from './group-placeholder'
-export { default as ShadowControl, getShadows } from './shadow-control'
+export {
+	default as ShadowControl, getGlobalShadowOptions, getShadows,
+} from './shadow-control'
 export { default as LinkControl } from './link-control'
 export { default as ColumnInserter } from './column-inserter'
 export { default as StyleControl } from './style-control'

src/components/shadow-control/__test__/index.test.js

@@ -0,0 +1,32 @@
+import { getShadowFilterValue } from '../'
+
+describe( 'getShadowFilterValue', () => {
+	it( 'resolves a selected preset to its raw shadow for advanced editing', () => {
+		const presets = [
+			{ shadow: 'none' },
+			{ shadow: '0 5px 5px 0 #123f5209' },
+		]
+
+		expect( getShadowFilterValue(
+			1,
+			presets,
+			'var(--stk--preset--shadow--shadow-3, 0 5px 5px 0 #123f5209)'
+		) ).toBe( '0 5px 5px 0 #123f5209' )
+	} )
+
+	it( 'keeps custom shadow values unchanged', () => {
+		expect( getShadowFilterValue(
+			'custom',
+			[],
+			'2px 4px 8px 0 #00000040'
+		) ).toBe( '2px 4px 8px 0 #00000040' )
+	} )
+
+	it( 'falls back to the stored value when a selected preset is unavailable', () => {
+		expect( getShadowFilterValue(
+			3,
+			[],
+			'2px 4px 8px 0 #00000040'
+		) ).toBe( '2px 4px 8px 0 #00000040' )
+	} )
+} )

src/components/shadow-control/editor.scss

@@ -11,3 +11,81 @@
 		align-items: center;
 	}
 }
+
+.stk-shadow-control__presets-button {
+	justify-content: flex-start;
+	width: 100%;
+
+	.stk-shadow-control__presets-icon {
+		margin-right: 8px;
+	}
+}
+
+.stk-shadow-control__preset-grid {
+	display: grid;
+	grid-template-columns: repeat(4, 44px);
+	justify-content: space-between;
+	row-gap: 16px;
+	padding-bottom: 8px;
+}
+
+.stk-shadow-control__preset {
+	appearance: none;
+	align-items: center;
+	background: #fff;
+	border: 1px solid #e0e0e0;
+	border-radius: 2px;
+	box-sizing: border-box;
+	color: #2f2f2f;
+	cursor: pointer;
+	display: inline-flex;
+	height: 44px;
+	justify-content: center;
+	padding: 0;
+	position: relative;
+	transform: scale(1);
+	width: 44px;
+
+	&:hover {
+		transform: scale(1.2);
+	}
+
+	&:focus-visible {
+		border: 2px solid #757575;
+		outline: none;
+	}
+
+	&.is-none {
+		background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+	}
+
+	.dashicon {
+		color: #2f2f2f;
+		font-size: 20px;
+		height: 20px;
+		width: 20px;
+	}
+}
+
+.stk-shadow-control__preset-text {
+	color: #2f2f2f;
+	font-size: 22px;
+	line-height: 1;
+	white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.stk-shadow-control__preset {
+		transition: transform 0.1s ease;
+	}
+}
+
+.stk-shadow-control__clear.components-button {
+	display: block;
+	margin: 18px 0 0 auto;
+}
+
+.block-editor-global-styles__shadow-popover-container .block-editor-global-styles__shadow-indicator {
+	height: 44px;
+	width: 44px;
+}