Feat: Design Library Revamp

src/block/icon-list/substitute.js

@@ -1,14 +1,16 @@
 export const substitute = {
 	from: 'stackable/icon-list',
-	transform: () => {
+	transform: ( oldAttributes, innerBlocks ) => {
+		const newInnerBlocks = innerBlocks.reduce( ( newInnerBlocks, innerBlock ) => {
+			const attributes = innerBlock[ 1 ]
+
+			newInnerBlocks.push( [ 'core/list-item', { content: attributes.text } ] )
+			return newInnerBlocks
+		}, [] )
 		return [
 			'core/list',
 			{},
-			[
-				[ 'core/list-item', { content: 'First item list' } ],
-				[ 'core/list-item', { content: 'Second item list' } ],
-				[ 'core/list-item', { content: 'Third item list' } ],
-			],
+			newInnerBlocks,
 		]
 	},
 }

src/compatibility/tove/style.scss

@@ -0,0 +1,4 @@
+:where(.stk-has-block-style-inheritance.stk--is-tove-theme) :is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination):is(.is-style-plain) .stk-button {
+	border-width: 0;
+	box-shadow: none;
+}

src/components/color-scheme-preview/editor.scss

@@ -76,3 +76,15 @@
 .stk-scheme--is-disabled {
 	opacity: 0.1;
 }
+
+.stk-scheme--is-collapsed {
+	flex-direction: row;
+	gap: 4px;
+	align-items: center;
+	max-height: 30px;
+
+	.stk-global-color-scheme__preview__typography {
+		margin-bottom: 0;
+		font-size: 12px;
+	}
+}

src/components/color-scheme-preview/index.js

@@ -14,13 +14,18 @@ export const DEFAULT_COLOR_SCHEME_COLORS = {
 const NOOP = () => {}
 
 const ColorSchemePreview = ( {
-	colors, withWrapper = false, onClick = NOOP, isDisabled = false,
+	colors,
+	withWrapper = false,
+	onClick = NOOP,
+	isDisabled = false,
+	isCollapsed = false,
 } ) => {
 	const TagName = onClick === NOOP ? 'div' : Button
 	const additionalProps = onClick === NOOP ? {} : { onClick }
 
 	const classNames = classnames( 'stk-global-color-scheme__preview__background', {
 		'stk-scheme--is-disabled': isDisabled,
+		'stk-scheme--is-collapsed': isCollapsed,
 	} )
 
 	return (

src/components/color-schemes-help/index.js

@@ -4,8 +4,20 @@ import { Link } from '~stackable/components'
 import { __ } from '@wordpress/i18n'
 import { dispatch } from '@wordpress/data'
 
-export const ColorSchemesHelp = () => {
+export const ColorSchemesHelp = props => {
+	const {
+		customText, callback, className,
+	} = props
 	const onClick = () => {
+		let cancelOnClick = false
+		if ( callback ) {
+			cancelOnClick = callback()
+		}
+
+		if ( cancelOnClick ) {
+			return
+		}
+
 		// Open the global settings sidebar.
 		dispatch( 'core/edit-post' )?.openGeneralSidebar( 'stackable-global-settings/sidebar' ) // For Block Editor
 		dispatch( 'core/edit-site' )?.openGeneralSidebar( 'stackable-global-settings/sidebar' ) // For Site Editor
@@ -31,9 +43,10 @@ export const ColorSchemesHelp = () => {
 	}
 
 	return <>
-		<span>{ __( 'Change the color scheme.', i18n ) }</span>
-		&nbsp;
-		<Link onClick={ onClick }> { __( 'Manage your color schemes.', i18n ) } </Link>
+		{ customText || customText === '' ? customText
+			: <span>{ __( 'Change the color scheme.', i18n ) }</span> }
+		{ customText !== '' && <>&nbsp;</> }
+		<Link className={ className } onClick={ onClick }> { __( 'Manage your color schemes.', i18n ) } </Link>
 	</>
 }