Feat: New Design Library Revamp (#3501)

* feat: size and spacing steps

* working range with steps

* fix: remove extra assignment

* feat: add markmode in four range control

* feat: apply preset controls to fontSize, padding, margin, height

* feat: generate global css for presets

* feat: size and spacing steps

* working range with steps

* fix: remove extra assignment

* feat: add markmode in four range control

* feat: apply preset controls to fontSize, padding, margin, height

* feat: generate global css for presets

* fix: apply generated css

* fix: make fontSizes string to store CSS variables

* fix: add default to prioritization

* feat: support for custom presets

* feat: dynamically add styles in editor

* feat: dynamically add styles in editor with editor loader

* fix: get current marked value, go to markmode

* fix: css generation should consider custom, by each preset, not by property

* fix: add additional functionalities to usePresetControls

* fix: allow AdvancedRangeControl to set custom onReset

* fix: do not add style for discarded presets

* fix: add comments, title in generated css

* fix: FourRangeControl markmode and initial value

* feat: add row and column gap

* feat: add blockHeight and borderRadius

* feat: add blockHeight and borderRadius loader

* fix: editorLoader merge

* feat: Use Global Typography sizes as preset

* feat: add vertical/horizontal to mark mode for four range

* fix: removing of unit picker according to four range mode

* fix: useTypographyAsPresets reactivity

* feat: initial init

* fix: separate none and custom, fix issue with setting to none

* fix: selecting font pair/type scale overwritting previous changes

* chore: move other functions to utils

* fix: only get the new style for onChange, since changeStyle now handles merging

* fix: set the value when changing from mark to custom

* fix: typography min and max slider for rem

* fix: use only "var" in detecting CSS variable

* fix: FourRangeControl synchronization of markmode; default markmode

* feat: add none presets to padding and margin similar to native

* fix: use extractNumbersAndUnits that can process clamp, min, etc.

* fix: add rem support to allow custom mode to have values when switching, convert from rem if only has px support

* feat: support mimic/clamping by using WP generated presets

* fix: global preset control title

* feat: apply body to html

* fix: add margin to apply html toggle

* fix: remove hasCSSVariableValue, always assume that marks has string value

* fix: get_option is never null

* fix: use wp_json_file_decode

* fix: remove JSON stringify since customPresets is just an array

* fix: separate loading of presets in another function

* fix: use wp_style_engine_get_stylesheet_from_css_rules to generate styles

* fix: translate only the words

* fix: move updating presets with typography to editor loader

* fix: add typography deprecation for font size

* fix: add block height deprecations

* fix: add row and column gaps deprecations

* fix: add row and column gaps deprecations

* tweaked premium notice wording

* fix: still match previous value even the custom values changes

* fix: implement presets in the design system; fix issues with reactivity, variable type, units, etc.

* fix: typography font size steps

* fix: sync mark mode

* fix: sync state when succeeding call to change styles

* fixed value preview

* fix: error in getting css var name

* feat: add use size preset by default option

* added more descriptive text

* temporarily skip since the test breaks now

* fix: two-way value conversion between preset and custom mode

* version bump to 3.16.0 for the default option to kick in

* version bump to 3.16.0 for the default option to kick in

* prevent errors if upgrading and value is a number

* optimized to prevent repetitive calls

* fix: update markmode when changing device type

* fix: move use size presets by default to editor settings

* fix: saving of new typography

* fix: only cofirm when font family is changed

* fix: clean style object for comparison

* update test for global typography

* fix: remove unused hasCSSVariableValue

* fix: add inner column spacing presets

* fix: add inner column > inner column spacing presets

* fix: also clean typography style for consistency

* fix: consider unit conversion during two-way value conversion between preset and custom mode

* fix: consider unit conversion during two-way value conversion between preset and custom mode

* fix: remove placeholder for custom css in number input

* fix: add fallback tooltip for theme.json data with no name like blocksy

* fix: bug fixes

* fix: bug fix

* fix: four range reactivity

* init

* fix: do not actually change value when switching mode

* remove error

* fix render of preview

* updates

- modal for adding designs with disabled blocks
- fix icon list substitution
- fix style options spacing
- hide design library modal header tabs
- fix php error if download fails

* fix preview of designs

* updates

- add default placeholder
- fix adding background scheme
- fix adding margins on root

* update placeholder defaults

* fix fatal error

* fix issues from user testing

- modify disabled blocks tooltip
- fix block style inheritance not being applied
- change 'add color scheme' to 'manage color scheme'
- add style option tooltips

* updates

- remove "Stackable" from design labels
- update tooltip for style options
- update checking of image if it's already in media library

* add fixes

- fix footer size when there are no designs
- fix designs not showing up unless a category is selected

* fix color schemes not being applied

* add other categories, add background to category

* fix spinner when fetching from cloud

* add confirm dialog when going to color schemes

* add plain button compatibility for tove

* add default placeholders for testimonials

* update blocklist

* fix issues

- modify color schemes dropdown
- fix paddings disappearing when global settings have value

* fix remaining issues

* apply fixes

- remove margin bottom
- remove plan dropdown
- fix warning

* add fixes

- grayed toggle for premium
- fix pro note

* update placeholders

* fix scale for selected designs when switching categories

* fix error handling for image download/upload

* update placeholders, fix design render

* remove designs for v2

* update designs

* inherit text color for subtitle

---------

Co-authored-by: [email protected] <>
Co-authored-by: Alquen Sarmiento <[email protected]>

Author: kaeizen

src/block/design-library/edit.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/block/icon-list/substitute.js

@@ -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/compatibility/tove/style.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/editor.scss

@@ -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-scheme-preview/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>
 	</>
 }