fix #808

inc2734 · Jul 5, 2024 · da46f8b · da46f8b
1 parent afd74f8
commit da46f8b
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 20 deletions.
diff --git a/src/blocks/btn/style.scss b/src/blocks/btn/style.scss
@@ -1,7 +1,12 @@
 @import '../../css/core/block';
 
 // The style of the global style link (0.1.0) needs to be adjusted in the level of detail as it will be loaded later.
-:is(a, span, div).smb-btn {
+.smb-btn:not(:root) {
+	color: var(--smb-btn--color);
+	text-decoration: none;
+}
+
+.smb-btn {
 	--smb-btn--background-color: var(--wp--preset--color--black);
 	--smb-btn--background-image: initial;
 	--smb-btn--border: none;
@@ -21,10 +26,8 @@
 	background-image: var(--smb-btn--background-image);
 	border: var(--smb-btn--border);
 	border-radius: var(--smb-btn--border-radius);
-	color: var(--smb-btn--color);
 	padding: var(--smb-btn--padding-vertical) var(--smb-btn--padding-horizontal);
 	max-width: 100%;
-	text-decoration: none;
 	white-space: nowrap;
 	@include _transition(all);
 

diff --git a/src/blocks/items/item/block-link/block.json b/src/blocks/items/item/block-link/block.json
@@ -116,7 +116,13 @@
 		}
 	},
 	"supports": {
-		"html": false
+		"html": false,
+		"color": {
+			"__experimentalSkipSerialization": true,
+			"background": true,
+			"text": true,
+			"link": true
+		}
 	},
 	"editorScript": "file:./index.js"
 }
diff --git a/src/blocks/items/item/block-link/edit.js b/src/blocks/items/item/block-link/edit.js
@@ -22,6 +22,7 @@ import {
 	__experimentalLinkControl as LinkControl,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalBorderRadiusControl as BorderRadiusControl,
+	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
 
 import { useState, useRef } from '@wordpress/element';
@@ -68,6 +69,8 @@ export default function ( {
 		btnWrap,
 	} = attributes;
 
+	const colorProps = useColorProps( attributes );
+
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const isURLSet = !! url;
 	const opensInNewTab = target === '_blank';
@@ -451,7 +454,14 @@ export default function ( {
 			</InspectorControls>
 
 			<div { ...blockProps }>
-				<div className="smb-items__item smb-items__item--block-link">
+				<div
+					className={ classnames(
+						'smb-items__item',
+						'smb-items__item--block-link',
+						colorProps?.className
+					) }
+					style={ { ...colorProps?.style } }
+				>
 					{ displayImage && (
 						<div className="smb-items__item__figure">
 							<Figure

diff --git a/src/blocks/items/item/block-link/save.js b/src/blocks/items/item/block-link/save.js
@@ -1,6 +1,10 @@
 import classnames from 'classnames';
 
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
 
 export default function ( { attributes, className } ) {
 	const {
@@ -26,6 +30,8 @@ export default function ( { attributes, className } ) {
 		btnWrap,
 	} = attributes;
 
+	const colorProps = getColorClassesAndStyles( attributes );
+
 	const classes = classnames( 'c-row__col', className );
 
 	const btnClasses = classnames( 'smb-items__item__btn', 'smb-btn', {
@@ -45,7 +51,12 @@ export default function ( { attributes, className } ) {
 	return (
 		<div { ...useBlockProps.save( { className: classes } ) }>
 			<a
-				className="smb-items__item smb-items__item--block-link"
+				className={ classnames(
+					'smb-items__item',
+					'smb-items__item--block-link',
+					colorProps?.className
+				) }
+				style={ { ...colorProps?.style } }
 				href={ url }
 				target={ '_self' === target ? undefined : target }
 				rel={ '_self' === target ? undefined : 'noopener noreferrer' }

diff --git a/src/blocks/items/item/free/block.json b/src/blocks/items/item/free/block.json
@@ -15,6 +15,16 @@
 	},
 	"supports": {
 		"html": false,
+		"color": {
+			"__experimentalSkipSerialization": true,
+			"background": true,
+			"text": true,
+			"link": true
+		},
+		"spacing": {
+			"__experimentalSkipSerialization": true,
+			"padding": true
+		},
 		"layout": {
 			"allowSwitching": false,
 			"allowEditing": false,

diff --git a/src/blocks/items/item/free/edit.js b/src/blocks/items/item/free/edit.js
@@ -4,13 +4,18 @@ import {
 	InnerBlocks,
 	useBlockProps,
 	useInnerBlocksProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 } from '@wordpress/block-editor';
 
 import { useSelect } from '@wordpress/data';
 
 export default function ( { attributes, className, clientId } ) {
 	const { templateLock } = attributes;
 
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+
 	const hasInnerBlocks = useSelect(
 		( select ) =>
 			!! select( 'core/block-editor' ).getBlock( clientId )?.innerBlocks
@@ -22,7 +27,9 @@ export default function ( { attributes, className, clientId } ) {
 
 	const itemClasses = classnames(
 		'smb-items__item',
-		'smb-items__item--free'
+		'smb-items__item--free',
+		colorProps?.className,
+		spacingProps?.className
 	);
 
 	const blockProps = useBlockProps( {
@@ -32,6 +39,10 @@ export default function ( { attributes, className, clientId } ) {
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'smb-items__item__body',
+			style: {
+				...colorProps?.style,
+				...spacingProps?.style,
+			},
 		},
 		{
 			templateLock,

diff --git a/src/blocks/items/item/free/save.js b/src/blocks/items/item/free/save.js
@@ -1,13 +1,23 @@
 import classnames from 'classnames';
 
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+} from '@wordpress/block-editor';
+
+export default function ( { attributes, className } ) {
+	const colorProps = getColorClassesAndStyles( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
 
-export default function ( { className } ) {
 	const classes = classnames( 'c-row__col', className );
 
 	const itemClasses = classnames(
 		'smb-items__item',
-		'smb-items__item--free'
+		'smb-items__item--free',
+		colorProps?.className,
+		spacingProps?.className
 	);
 
 	return (
@@ -16,6 +26,10 @@ export default function ( { className } ) {
 				<div
 					{ ...useInnerBlocksProps.save( {
 						className: 'smb-items__item__body',
+						style: {
+							...colorProps?.style,
+							...spacingProps?.style,
+						},
 					} ) }
 				/>
 			</div>

diff --git a/src/blocks/items/item/standard/block.json b/src/blocks/items/item/standard/block.json
@@ -116,7 +116,13 @@
 		}
 	},
 	"supports": {
-		"html": false
+		"html": false,
+		"color": {
+			"__experimentalSkipSerialization": true,
+			"background": true,
+			"text": true,
+			"link": true
+		}
 	},
 	"editorScript": "file:./index.js"
 }
diff --git a/src/blocks/items/item/standard/edit.js b/src/blocks/items/item/standard/edit.js
@@ -22,6 +22,7 @@ import {
 	__experimentalLinkControl as LinkControl,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalBorderRadiusControl as BorderRadiusControl,
+	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
 
 import { useState, useRef } from '@wordpress/element';
@@ -68,6 +69,8 @@ export default function ( {
 		btnWrap,
 	} = attributes;
 
+	const colorProps = useColorProps( attributes );
+
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const isURLSet = !! url;
 	const opensInNewTab = target === '_blank';
@@ -450,7 +453,13 @@ export default function ( {
 			</InspectorControls>
 
 			<div { ...blockProps }>
-				<div className="smb-items__item">
+				<div
+					className={ classnames(
+						'smb-items__item',
+						colorProps?.className
+					) }
+					style={ { ...colorProps?.style } }
+				>
 					{ displayImage && (
 						<div className="smb-items__item__figure">
 							<Figure

diff --git a/src/blocks/items/item/standard/save.js b/src/blocks/items/item/standard/save.js
@@ -1,6 +1,10 @@
 import classnames from 'classnames';
 
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
 
 export default function ( { attributes, className } ) {
 	const {
@@ -26,6 +30,8 @@ export default function ( { attributes, className } ) {
 		btnWrap,
 	} = attributes;
 
+	const colorProps = getColorClassesAndStyles( attributes );
+
 	const classes = classnames( 'c-row__col', className );
 
 	const btnClasses = classnames( 'smb-items__item__btn', 'smb-btn', {
@@ -44,7 +50,13 @@ export default function ( { attributes, className } ) {
 
 	return (
 		<div { ...useBlockProps.save( { className: classes } ) }>
-			<div className="smb-items__item">
+			<div
+				className={ classnames(
+					'smb-items__item',
+					colorProps?.className
+				) }
+				style={ { ...colorProps?.style } }
+			>
 				{ displayImage && (
 					<div className="smb-items__item__figure">
 						<img

diff --git a/src/blocks/items/style.scss b/src/blocks/items/style.scss
@@ -68,6 +68,18 @@
 		display: block;
 		position: relative;
 
+		&.has-background {
+			padding: 0;
+
+			> .smb-items__item__figure {
+				margin-bottom: 0;
+			}
+
+			> .smb-items__item__body {
+				padding: var(--_padding1);
+			}
+		}
+
 		&__figure {
 			text-align: center;
 		}
@@ -119,11 +131,8 @@
 		}
 
 		&--free {
-			.smb-items__item__body {
-				> * {
-					margin-top: 0;
-					margin-bottom: 0;
-				}
+			&.has-background > .smb-items__item__body {
+				padding: 0;
 			}
 		}
 	}

diff --git a/src/css/blocks-editor-wrapper.scss b/src/css/blocks-editor-wrapper.scss
@@ -1,5 +1,11 @@
 @import 'core/block';
 
+.components-tools-panel {
+	> .block-editor-contrast-checker {
+		grid-column: 1 / -1;
+	}
+}
+
 .smb-list-icon-selector {
 	.components-button {
 		margin: 1px;