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()
@@ -94,6 +94,7 @@
 
 	await page.getByRole( 'tab', { name: /Miscellaneous/ } ).click()
 	await expect( page.getByRole( 'heading', { name: 'Miscellaneous' } ) ).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/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/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;
+}