Merge branch 'develop' into fix/3500-sunset-block-defaults

# Conflicts:
#	e2e/tests/global-settings.spec.ts

Author: kaeizen

.prettierignore

@@ -0,0 +1,14 @@
+# Ignore JavaScript files to prevent conflicts with ESLint
+*.js
+*.jsx
+*.ts
+*.tsx
+
+# Ignore build files
+dist/
+build/
+node_modules/
+
+# Ignore other files that shouldn't be formatted
+*.min.js
+*.min.css 

.vscode/settings.json

@@ -1,14 +1,20 @@
 {
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true,
-		"source.fixAll.stylelint": true
+		"source.fixAll.eslint": "explicit",
+		"source.fixAll.stylelint": "explicit"
 	},
 	"editor.formatOnSave": false,
-	"eslint.validate": [
-		"javascript"
-	],
+	"editor.defaultFormatter": null,
+	"[javascript]": {
+		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
+		"editor.formatOnSave": false
+	},
+	"[javascriptreact]": {
+		"editor.defaultFormatter": "dbaeumer.vscode-eslint",
+		"editor.formatOnSave": false
+	},
 	"stylelint.validate": [
 		"css",
 		"scss"
 	]
-}
+}

e2e/tests/global-settings.spec.ts

@@ -20,7 +20,7 @@ test.describe( 'Global Settings', () => {
 		page,
 		editor,
 	} ) => {
-		await page.getByLabel( 'Stackable Settings' ).click()
+		await page.getByLabel( 'Stackable Design System' ).click()
 		await page.getByRole( 'button', { name: 'Global Color Palette' } ).click()
 
 		// Add a new Global Color
@@ -66,7 +66,7 @@ test.describe( 'Global Settings', () => {
 		await page.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
 
 		// Delete added Global Color
-		await page.getByLabel( 'Stackable Settings' ).click()
+		await page.getByLabel( 'Stackable Design System' ).click()
 
 		page.on( 'dialog', async dialog => await dialog.accept() )
 		const deleteRequest = page.waitForResponse( response => response.url().includes( 'wp/v2/settings' ) && response.request().method() === 'POST' )
@@ -82,7 +82,7 @@ test.describe( 'Global Settings', () => {
 		page,
 		editor,
 	} ) => {
-		await page.getByLabel( 'Stackable Settings' ).click()
+		await page.getByLabel( 'Stackable Design System' ).click()
 		await page.getByRole( 'button', { name: 'Global Typography' } ).click()
 
 		// Set Global Typography Styles of Heading 2 to have a text-transform uppercase
@@ -107,7 +107,7 @@ test.describe( 'Global Settings', () => {
 		await expect( editor.canvas.locator( '[data-type="stackable/heading"] > .stk-block-heading > h2[role="textbox"]' ) ).toHaveCSS( 'text-transform', 'uppercase' )
 
 		// Reset Global Typography Styles
-		await page.getByLabel( 'Stackable Settings' ).click()
+		await page.getByLabel( 'Stackable Design System' ).click()
 
 		const resetButton = page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).getByLabel( 'Reset' )
 		const deleteRequest = page.waitForResponse( response => response.url().includes( 'wp/v2/settings' ) && response.request().method() === 'POST' )

readme.txt

@@ -252,7 +252,7 @@ Add animations that will bring your site to life and make it more visually engag
 
 = Minimum Requirements =
 
-You'll need WordPress version 6.3 or higher for this to work.
+You'll need WordPress version 6.5.5 or higher for this to work.
 
 == Frequently Asked Questions ==
 
@@ -304,6 +304,10 @@ Nope. Stackable only works with Gutenberg, the new WordPress editor.
 
 == Changelog ==
 
+= 3.17.2 =
+* Fixed: If using non-English locale, Google Fonts may not load properly in the editor
+* Fixed: Do not create a new design library block if there already is one
+
 = 3.17.1 =
 * Fixed: Progress circle block - having a prefix/suffix with dynamic content now works #3499
 * Fixed: Image block - image becomes small when using a design library item then changing it to dynamic content #3522

src/block/design-library/edit.js

@@ -7,6 +7,7 @@ import {
 	srcUrl,
 	settings,
 	cdnUrl,
+	devMode,
 } from 'stackable'
 import {
 	Button,
@@ -163,9 +164,12 @@ const Edit = props => {
 
 				const customAttributes = block.attributes.customAttributes
 
-				const indexToDelete = customAttributes?.findIndex( attribute => attribute[ 0 ] === 'stk-design-library__bg-target' )
-				if ( customAttributes && indexToDelete !== -1 ) {
-					block.attributes.customAttributes.splice( indexToDelete, 1 )
+				const isDesignLibraryDevMode = devMode && localStorage.getItem( 'stk__design_library__dev_mode' ) === '1'
+				if ( ! isDesignLibraryDevMode ) {
+					const indexToDelete = customAttributes?.findIndex( attribute => attribute[ 0 ] === 'stk-design-library__bg-target' )
+					if ( customAttributes && indexToDelete !== -1 ) {
+						block.attributes.customAttributes.splice( indexToDelete, 1 )
+					}
 				}
 
 				for ( const attributeName in block.attributes ) {
@@ -189,30 +193,33 @@ const Edit = props => {
 		attributes = block[ 0 ].attributes
 		innerBlocks = block[ 0 ].innerBlocks
 
-		if ( category !== 'Header' ) {
-			if ( ! parentClientId && attributes.hasBackground ) {
-				attributes.blockMargin = {
-					top: '',
-					right: '',
-					bottom: '0',
-					left: '',
-				}
-			} else if ( ! parentClientId ) {
-				attributes.blockMargin = {
-					top: spacingSize,
-					right: '',
-					bottom: spacingSize,
-					left: '',
+		const isDesignLibraryDevMode = devMode && localStorage.getItem( 'stk__design_library__dev_mode' ) === '1'
+		if ( ! isDesignLibraryDevMode ) {
+			if ( category !== 'Header' ) {
+				if ( ! parentClientId && attributes.hasBackground ) {
+					attributes.blockMargin = {
+						top: '',
+						right: '',
+						bottom: '0',
+						left: '',
+					}
+				} else if ( ! parentClientId ) {
+					attributes.blockMargin = {
+						top: spacingSize,
+						right: '',
+						bottom: spacingSize,
+						left: '',
+					}
 				}
-			}
 
-			const blockLayouts = select( 'stackable/global-spacing-and-borders' ).getBlockLayouts()
-			if ( attributes.hasBackground && typeof blockLayouts === 'object' && ! blockLayouts[ 'block-background-padding' ] ) {
-				attributes.blockPadding = {
-					top: spacingSize,
-					right: spacingSize,
-					bottom: spacingSize,
-					left: spacingSize,
+				const blockLayouts = select( 'stackable/global-spacing-and-borders' ).getBlockLayouts()
+				if ( attributes.hasBackground && typeof blockLayouts === 'object' && ! blockLayouts[ 'block-background-padding' ] ) {
+					attributes.blockPadding = {
+						top: spacingSize,
+						right: spacingSize,
+						bottom: spacingSize,
+						left: spacingSize,
+					}
 				}
 			}
 		}

src/components/design-library-list/design-library-list-item.js

@@ -15,7 +15,7 @@ import {
  */
 import { createRoot } from '~stackable/util'
 import {
-	isPro, i18n, wpGlobalStylesInlineCss,
+	isPro, i18n, wpGlobalStylesInlineCss, devMode,
 } from 'stackable'
 import classnames from 'classnames'
 import { Tooltip } from '~stackable/components'
@@ -162,7 +162,9 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 	useEffect( () => {
 		const defaultValues = DEFAULT_CONTENT[ category ]
 		let _content = template
-		if ( defaultValues ) {
+
+		const isDesignLibraryDevMode = devMode && localStorage.getItem( 'stk__design_library__dev_mode' ) === '1'
+		if ( defaultValues && ! isDesignLibraryDevMode ) {
 			Object.keys( defaultValues ).forEach( key => {
 				_content = _content.replaceAll( key, defaultValues[ key ] )
 			} )

src/components/modal-design-library/editor.scss

@@ -319,7 +319,8 @@ div.ugb-modal-design-library__enable-background {
 	margin-bottom: 0 !important;
 	margin: 0 auto;
 
-	.components-base-control__field, .stk-control-label {
+	.components-base-control__field,
+	.stk-control-label {
 		margin: 0;
 	}
 	.components-button-group {
@@ -357,16 +358,16 @@ div.ugb-modal-design-library__enable-background {
 
 
 .ugb-modal-design-library__stk-color-scheme {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    outline: 1px solid #e0e0e0;
-    border-radius: 2px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	outline: 1px solid #e0e0e0;
+	border-radius: 2px;
 	margin-bottom: 8px;
 	padding: 0;
 	height: auto;
 	width: 100%;
-	&:hover  {
+	&:hover {
 		&.stk-color-scheme__toggle .stk-color-scheme__none,
 		.stk-global-color-scheme__preview {
 			color: initial;
@@ -377,7 +378,8 @@ div.ugb-modal-design-library__enable-background {
 	}
 
 	&.stk-color-scheme__selected {
-		&, &:active {
+		&,
+		&:active {
 			outline: 2px solid var(--wp-admin-theme-color, #f00069);
 			color: var(--wp-admin-theme-color, #f00069);
 		}
@@ -408,8 +410,12 @@ div.ugb-modal-design-library__enable-background {
 	display: flex;
 	gap: 10px;
 	align-items: center;
+	.components-toggle-control {
+		margin-bottom: 0;
+	}
 }
-.stk-design-library__plan-dropdown, .ugb-design-library__color-scheme-popover {
+.stk-design-library__plan-dropdown,
+.ugb-design-library__color-scheme-popover {
 	--wp-admin-theme-color: #f00069;
 	--wp-admin-theme-color-darker-10: #{ darken(#f00069, 10%) };
 	--wp-admin-theme-color-darker-20: #{ darken(#f00069, 20%) };
@@ -444,7 +450,7 @@ div.ugb-modal-design-library__enable-background {
 	max-width: 800px;
 	ul {
 		list-style: circle;
-    	margin-inline-start: 20px;
+		margin-inline-start: 20px;
 	}
 }
 
@@ -462,11 +468,11 @@ div.ugb-modal-design-library__enable-background {
 }
 
 .ugb-modal-design-library__stk-color-scheme-list-header {
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-    margin: 0 0 4px;
-    border-bottom: 1px solid #e0e0e0;
+	display: flex;
+	justify-content: space-between;
+	padding: 0;
+	margin: 0 0 4px;
+	border-bottom: 1px solid #e0e0e0;
 
 	p {
 		margin: 6px 6px 4px;

src/components/modal-design-library/modal.js

@@ -11,7 +11,9 @@ import { getDesigns, filterDesigns } from '~stackable/design-library'
 /**
  * External deprendencies
  */
-import { i18n, isPro } from 'stackable'
+import {
+	i18n, isPro, devMode,
+} from 'stackable'
 import classnames from 'classnames'
 import { useLocalStorage } from '~stackable/util'
 
@@ -155,6 +157,19 @@ export const ModalDesignLibrary = props => {
 					/> */ }
 
 					<div className="stk-design-library__header-settings">
+						{ devMode && (
+							<ToggleControl
+								label="Dev Mode"
+								checked={ !! localStorage.getItem( 'stk__design_library__dev_mode' ) || false }
+								onChange={ value => {
+									localStorage.setItem( 'stk__design_library__dev_mode', value ? '1' : '' )
+									setTimeout( () => {
+										document?.querySelector( '.ugb-insert-library-button__wrapper .ugb-insert-library-button' ).click()
+									}, 100 )
+									props.onClose()
+								} }
+							/>
+						) }
 						<Button
 							icon="image-rotate"
 							iconSize={ 14 }

src/plugins/design-library-button/design-library-button.js

@@ -17,6 +17,16 @@ const DesignLibraryButton = () => {
 	const { getEditorDom } = useSelect( 'stackable/editor-dom' )
 
 	const onClick = useCallback( () => {
+		// If there's a design library block already in the editor, just open it.
+		if ( getEditorDom()?.querySelector( '[data-type="stackable/design-library"]' ) ) {
+			const button = getEditorDom()?.querySelector( `[data-type="stackable/design-library"] button` )
+			// Open the design library.
+			if ( button ) {
+				button.click()
+			}
+			return
+		}
+
 		// Insert a design library block.
 		const block = createBlock( 'stackable/design-library' )
 

src/plugins/global-settings/index.js

@@ -65,7 +65,7 @@ const GlobalSettings = () => {
 			{ PluginSidebar && userCanManageOptions &&
 				<PluginSidebar
 					name="sidebar"
-					title={ __( 'Stackable Settings', i18n ) }
+					title={ __( 'Stackable Design System', i18n ) }
 					className="ugb-global-settings__inspector"
 					icon={ <SVGStackableIcon /> }
 				>