Refactor block settings

src/blocks/accordions/edit.js

@@ -1,16 +1,19 @@
-import { useEffect } from '@wordpress/element';
+import { useEffect, Platform } from '@wordpress/element';
 import {
+	ContrastChecker,
 	InnerBlocks,
 	PanelColorSettings,
 	InspectorControls,
 	RichText,
+	withColors,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	PanelRow,
 	BaseControl,
 	ToggleControl,
 } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
 import { applyFilters } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
@@ -62,18 +65,15 @@ const innerBlocksProps = {
  * @param {Object} [props] Properties passed from the editor.
  * @return {WPElement} Element to render.
  */
-export default function Edit( props ) {
+function Edit( props ) {
 	const {
-		attributes: {
-			title,
-			desc,
-			openFirst,
-			toggle,
-			fontColor,
-			backgroundColor,
-		},
+		attributes: { title, desc, openFirst, toggle },
 		setAttributes,
 		className,
+		fontColor,
+		setFontColor,
+		backgroundColor,
+		setBackgroundColor,
 	} = props;
 
 	const { showPreview, togglePreview, doubleClick } = usePreviewToggle();
@@ -95,21 +95,25 @@ export default function Edit( props ) {
 					colorSettings={ [
 						{
 							value: fontColor?.color,
-							onChange: ( colorValue ) => {
-								setAttributes( { fontColor: colorValue } );
-							},
+							onChange: setFontColor,
 							label: __( 'Text Color', 'wdsblocks' ),
 						},
 						{
 							value: backgroundColor?.color,
-							onChange: ( colorValue ) =>
-								setAttributes( {
-									backgroundColor: colorValue,
-								} ),
+							onChange: setBackgroundColor,
 							label: __( 'Background Color', 'wdsblocks' ),
 						},
 					] }
-				/>
+				>
+					{ 'web' === Platform.OS &&
+						!! fontColor?.color &&
+						!! backgroundColor?.color && (
+							<ContrastChecker
+								backgroundColor={ backgroundColor.color }
+								textColor={ fontColor.color }
+							/>
+						) }
+				</PanelColorSettings>
 				<PanelBody title={ __( 'Settings', 'wdsblocks' ) }>
 					<BaseControl
 						label={ __( 'Expand First Accordion', 'wdsblocks' ) }
@@ -160,7 +164,10 @@ export default function Edit( props ) {
 					className,
 					showPreview ? 'preview-mode' : 'edit-mode'
 				) }
-				style={ { color: fontColor, backgroundColor } }
+				style={ {
+					color: fontColor?.color,
+					backgroundColor: backgroundColor?.color,
+				} }
 				data-open-first={ openFirst }
 				data-toggle={ toggle }
 				onDoubleClick={ doubleClick }
@@ -220,3 +227,7 @@ export default function Edit( props ) {
 		</>
 	);
 }
+
+export default compose( [
+	withColors( { fontColor: 'color', backgroundColor: 'background-color' } ),
+] )( Edit );

src/blocks/accordions/index.js

@@ -54,10 +54,18 @@ registerBlockType( `wdsblocks/${ BLOCKNAME }`, {
 			type: 'string',
 			default: undefined,
 		},
+		customFontColor: {
+			type: 'string',
+			default: undefined,
+		},
 		backgroundColor: {
 			type: 'string',
 			default: undefined,
 		},
+		customBackgroundColor: {
+			type: 'string',
+			default: undefined,
+		},
 	},
 	example: {
 		innerBlocks: [

src/blocks/accordions/save.js

@@ -1,7 +1,9 @@
 import { InnerBlocks, RichText } from '@wordpress/block-editor';
 import { getBlockDefaultClassName } from '@wordpress/blocks';
-import classnames from 'classnames';
+import { compose } from '@wordpress/compose';
 import { PREFIX, CONTAINER_CLASS } from '../../utils/config';
+import withBackgroundColor from '../../utils/components/withBackgroundColor';
+import withFontColor from '../../utils/components/withFontColor';
 
 /**
  * The save function defines the way in which the different attributes should
@@ -21,24 +23,44 @@ export default function Save( props ) {
 			title,
 			desc,
 			fontColor,
+			customFontColor,
 			backgroundColor,
+			customBackgroundColor,
 			openFirst,
 			toggle,
 		},
 	} = props;
 
 	const className = getBlockDefaultClassName( `${ PREFIX }/accordions` );
 
+	// Define props for wrapping component.
+	const wrapProps = {
+		className,
+		'data-open-first': openFirst,
+		'data-toggle': toggle,
+	};
+
+	// Define HOCs to be composed.
+	const composeHOCs = [];
+
+	// Display accordion with custom font color.
+	if ( fontColor || customFontColor ) {
+		composeHOCs.push( withFontColor );
+		wrapProps.fontColor = fontColor;
+		wrapProps.customFontColor = customFontColor;
+	}
+
+	// Display accordion with custom background color.
+	if ( backgroundColor || customBackgroundColor ) {
+		composeHOCs.push( withBackgroundColor );
+		wrapProps.backgroundColor = backgroundColor;
+		wrapProps.customBackgroundColor = customBackgroundColor;
+	}
+
+	const AccordionComponent = compose( composeHOCs )( 'div' );
+
 	return (
-		<div
-			className={ classnames( className ) }
-			style={ {
-				color: fontColor,
-				backgroundColor,
-			} }
-			data-open-first={ openFirst }
-			data-toggle={ toggle }
-		>
+		<AccordionComponent { ...wrapProps }>
 			<div className={ CONTAINER_CLASS }>
 				{ title && title[ 0 ] && (
 					<RichText.Content
@@ -58,6 +80,6 @@ export default function Save( props ) {
 					<InnerBlocks.Content />
 				</div>
 			</div>
-		</div>
+		</AccordionComponent>
 	);
 }