feat: block styles

Author: kaeizen

plugin.php

@@ -238,6 +238,7 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/deprecated/index.php' );  // We need to add this so the filter for deprecation gets applied.
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/preset-controls/index.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/block-styles/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/custom-block-styles.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );

src/block-components/block-div/attributes.js

@@ -23,6 +23,14 @@ export const addAttributes = attrObject => {
 				type: 'string',
 				default: '',
 			},
+			blockStyle: {
+				type: 'string',
+				default: '',
+			},
+			modifiedBlockStyle: {
+				type: 'boolean',
+				default: false,
+			},
 		},
 		versionAdded: '3.0.0',
 		versionDeprecated: '',

src/block-components/block-div/index.js

@@ -56,6 +56,7 @@ export const BlockDiv = memo( props => {
 			'stk-block',
 			blockHoverClass,
 			attributes.className, // Custom CSS classes.
+			attributes.blockStyle,
 			{
 				[ uniqueBlockClass ]: withUniqueClass,
 				'stk-block-background': attributes.hasBackground,
@@ -133,6 +134,7 @@ BlockDiv.Content = props => {
 			className,
 			'stk-block',
 			uniqueBlockClass,
+			attributes.blockStyle,
 			{
 				'stk-block-background': attributes.hasBackground,
 				[ `stk--background-scheme--${ attributes.backgroundColorScheme }` ]: attributes.hasBackground && attributes.backgroundColorScheme,

src/components/block-attributes-get-button/button.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { startCase } from 'lodash'
-import { applyBlockDesign } from '~stackable/util'
+import { applyBlockDesign, getCleanAttributes } from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -29,7 +29,6 @@ const GetBlockAttributesButton = ( {
 			blockName: clientId && getBlockName( clientId ) ? getBlockName( clientId ).replace( /^\w+\//g, '' ) : '',
 			getJSONBlockAttributes: () => {
 				const { getBlockName } = select( 'core/block-editor' )
-				const { getBlockType } = select( 'core/blocks' )
 
 				if ( ! clientId ) {
 					return {}
@@ -39,13 +38,7 @@ const GetBlockAttributesButton = ( {
 				const blockName = getBlockName( clientId ).replace( /^\w+\//g, '' )
 
 				// Remove attributes which remain as the default.
-				const defaultAttributes = getBlockType( getBlockName( clientId ) ).attributes
-				const cleanedAttributes = Object.keys( blockAttributes ).reduce( ( attrs, attrName ) => {
-					if ( blockAttributes[ attrName ] !== ( defaultAttributes[ attrName ] ? defaultAttributes[ attrName ].default : '' ) ) {
-						attrs[ attrName ] = blockAttributes[ attrName ]
-					}
-					return attrs
-				}, {} )
+				const cleanedAttributes = getCleanAttributes( blockAttributes, getBlockName( clientId ) )
 
 				// Remove the unique class. Since this is generated by the block.
 				cleanedAttributes.uniqueClass = undefined
@@ -99,7 +92,7 @@ const GetBlockAttributesButton = ( {
 						setOpenPopover( false )
 					 } }
 				>
-					<p>{ 'Copy or modify the attributes of the block directly. Use only double quotes "' }</p>
+					<p>Copy or modify the attributes of the block directly. Use only double quotes &quot;</p>
 					<textarea onChange={ () => setChanged( true ) }>{ getJSONBlockAttributes() }</textarea>
 				</Modal>
 			}

src/components/block-css/use-block-style-generator.js

@@ -1,8 +1,10 @@
-import { useQueryLoopInstanceId } from '~stackable/util'
+import { useQueryLoopInstanceId, isBlockStyleAttributesModified } from '~stackable/util'
 import { useMemo, useRef } from '@wordpress/element'
 import { useRafEffect } from '~stackable/hooks'
 import CssSaveCompiler from './css-save-compiler'
 
+import { select } from '@wordpress/data'
+
 export const useBlockCssGenerator = props => {
 	const {
 		blockStyles,
@@ -13,6 +15,8 @@ export const useBlockCssGenerator = props => {
 		blockState,
 	} = props
 
+	const blockName = select( 'core/block-editor' ).getBlock( clientId )?.name
+
 	// Keep the filtered block styles that we will update.
 	const blockStyleDefsRef = useRef( [] )
 
@@ -25,11 +29,20 @@ export const useBlockCssGenerator = props => {
 	// Keep the generated CSS for editor and return it when only the text attribute has changed.
 	const oldCss = useRef( null )
 
+	const generateCssStyles = useMemo( () => isBlockStyleAttributesModified( blockName, attributes.blockStyle, attributes ),
+		[ clientId, attributes ] )
+
 	const editCss = useMemo( () => {
 		if ( oldText.current !== attributes.text ) {
 			oldText.current = attributes.text
 			return oldCss.current
 		}
+
+		if ( ! generateCssStyles ) {
+			oldCss.current = ''
+			return ''
+		}
+
 		// Gather only the attributes that have values and all their
 		// corresponding block style definitions.
 		const attrNamesWithValues = blockStyles.getAttributesWithValues( attributes )

src/components/block-styles-control/editor.scss

@@ -0,0 +1,119 @@
+.ugb-block-styles-controls {
+	padding: 8px 16px;
+	&.components-panel__body {
+		border-top: none;
+		margin-bottom: 1px;
+	}
+
+	.ugb-block-styles-controls__label {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 6px;
+	}
+
+	.components-base-control__field {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		row-gap: 4px;
+		position: relative;
+		padding-right: 28px;
+
+		> .components-base-control__label {
+			margin-bottom: 0;
+			align-self: center;
+		}
+
+		> div:nth-child(2) {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			:where(.ugb-button-component:has(.dashicons-update-alt)) {
+				background: #fff;
+			}
+		}
+
+		> .ugb-block-styles__select-control {
+			grid-column: 1/3;
+			> .ugb-button-component {
+				background: white;
+				width: 100%;
+				border: 1px solid #00000070;
+				padding: 0px 8px;
+				height: 32px;
+				border-radius: 2px;
+
+				&:focus:not(:disabled) {
+					box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+				}
+
+				> .ugb-block-styles__dropdown-icon {
+					margin-right: 0;
+					margin-left: auto;
+					display: inline-flex;
+					gap: 4px;
+				}
+			}
+		}
+
+		> .stk-control__reset-button {
+			right: unset;
+			top: unset;
+			bottom: 4px;
+			color: var(--stk-skin-error);
+		}
+	}
+
+	.ugb-button-component.has-icon:hover {
+		box-shadow: inset 0 0 0 1px var(--stk-skin-dark);
+		background-color: var(--stk-skin-bg-secondary);
+		color: var(--stk-skin-dark);
+	}
+}
+
+.ugb-block-styles__new-style-modal {
+	min-width: max(350px, 35%);
+}
+.ugb-block-styles__new-style-description {
+	color: #1e1e1e;
+	margin-top: 0;
+}
+.ugb-block-styles__new-style-form {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+
+	.ugb-button-component {
+		margin-right: 0;
+		margin-left: auto;
+		&.has-icon {
+			gap: 8px;
+		}
+	}
+}
+
+.ugb-block-styles__update-style-form {
+	display: flex;
+	gap: 8px;
+	justify-content: flex-end;
+}
+
+.ugb-block-styles-control__popover {
+	.components-popover__content {
+		width: 205px;
+		padding: 0;
+	}
+
+	.ugb-button-component {
+		display: flex;
+		padding: 8px;
+		height: 32px;
+		width: 100%;
+		align-items: center;
+    	justify-content: space-between;
+
+		&:hover {
+			color: var(--wp-components-color-foreground,#1e1e1e);
+			background: #0000001a;
+		}
+	}
+}