test: added new dev mode button in the design library for exporting purposes

Author: [email protected]

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 }