Search input background

blockifywp · Nov 24, 2023 · de3794b · de3794b
1 parent 436f039
commit de3794b
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 18 deletions.
diff --git a/assets/js/editor.asset.php b/assets/js/editor.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => 'ef9b4ff8d9255b2758a3');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '26721c6dc7cf48bb87ba');
diff --git a/assets/js/editor.js b/assets/js/editor.js
diff --git a/includes/blocks/search.php b/includes/blocks/search.php
@@ -37,6 +37,7 @@ function render_search_block( string $html, array $block ): string {
 	$margin              = $block['attrs']['style']['spacing']['margin'] ?? [];
 	$background_color    = $block['attrs']['backgroundColor'] ?? '';
 	$background_custom   = $block['attrs']['style']['color']['background'] ?? '';
+	$input_background    = $block['attrs']['inputBackgroundColor'] ?? '';
 	$border              = $block['attrs']['style']['border'] ?? [];
 	$border_color        = $block['attrs']['style']['border']['color'] ?? $block['attrs']['borderColor'] ?? '';
 	$box_shadow          = $block['attrs']['style']['boxShadow'] ?? [];
@@ -114,6 +115,10 @@ function render_search_block( string $html, array $block ): string {
 		$input_styles['border-radius'] = format_custom_property( $border['radius'] ?? '' );
 	}
 
+	if ( $input_background ) {
+		$input_styles['background-color'] = format_custom_property( $input_background );
+	}
+
 	if ( $input_styles ) {
 		$input_styles['height'] = 'auto';
 

diff --git a/includes/common/styles.php b/includes/common/styles.php
@@ -157,7 +157,10 @@ function get_dynamic_custom_properties( string $css = '' ): string {
 	$styles = [
 		'--scroll'                              => '0',
 		'--breakpoint'                          => '782px', // Only used by JS.
-		'--wp--custom--border'                  => "$border_width $border_style $border_color",
+		'--wp--custom--border--width'           => $border_width,
+		'--wp--custom--border--style'           => $border_style,
+		'--wp--custom--border--color'           => $border_color,
+		'--wp--custom--border'                  => "var(--wp--custom--border--width,1px) var(--wp--custom--border--style,solid) var(--wp--custom--border--color,#ddd)",
 		'--wp--custom--transition'              => "$transition_property $transition_duration $transition_timing",
 		'--wp--custom--body--background'        => $body_background,
 		'--wp--custom--body--color'             => $body_color,

diff --git a/src/api/icon-store.tsx b/src/api/icon-store.tsx
@@ -1,6 +1,6 @@
 import { Reducer } from 'redux';
 import apiFetch from '@wordpress/api-fetch';
-import { createReduxStore, register } from '@wordpress/data';
+import { createReduxStore, register, select } from '@wordpress/data';
 
 export interface Icons {
 	[set: string]: {
@@ -80,15 +80,18 @@ const resolvers = {
 
 export const iconStoreName = 'blockify/icons';
 
-register(
-	createReduxStore(
-		iconStoreName,
-		{
-			reducer,
-			actions,
-			selectors,
-			controls,
-			resolvers,
-		}
-	)
-);
+if ( ! select( 'blockify/icons' )?.getIcons() ) {
+	register(
+		createReduxStore(
+			iconStoreName,
+			{
+				reducer,
+				actions,
+				selectors,
+				controls,
+				resolvers,
+			}
+		)
+	);
+}
+
diff --git a/src/block-extensions/search-input.tsx b/src/block-extensions/search-input.tsx
@@ -0,0 +1,162 @@
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import {
+	getColorSlugFromValue,
+	getColorValueFromSlug,
+} from '../utility/color.tsx';
+
+addFilter(
+	'blocks.registerBlockType',
+	'blockify/search-input-colors',
+	( settings, name ) => {
+		if ( name !== 'core/search' ) {
+			return settings;
+		}
+
+		settings.attributes = {
+			...settings.attributes,
+			inputBackgroundColor: {
+				type: 'string',
+			},
+		};
+
+		return settings;
+	}
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'blockify/search-input-colors',
+	createHigherOrderComponent(
+		( BlockEdit ) => {
+			return ( props: any ) => {
+				const defaultReturn = <BlockEdit { ...props } />;
+
+				const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+				if ( props.name !== 'core/search' ) {
+					return defaultReturn;
+				}
+
+				const {
+					attributes,
+					setAttributes,
+					clientId,
+				} = props;
+
+				const {
+					inputBackgroundColor,
+				} = attributes;
+
+				const settings = [ {
+					label: __( 'Input Background', 'blockify' ),
+					colorValue: ( typeof inputBackgroundColor === 'string' && inputBackgroundColor?.includes( '-' ) ) ? getColorValueFromSlug( inputBackgroundColor ) : inputBackgroundColor,
+					onColorChange: ( value: string ) => {
+						const slug = getColorSlugFromValue( value );
+
+						setAttributes( {
+							inputBackgroundColor: slug ? slug : value,
+						} );
+					},
+				} ];
+
+				return (
+					<>
+						<BlockEdit { ...props } />
+						<InspectorControls
+							group={ 'color' }
+						>
+							<ColorGradientSettingsDropdown
+								settings={ settings }
+								panelId={ clientId }
+								hasColorsOrGradients={ true }
+								disableCustomColors={ false }
+								__experimentalIsRenderedInSidebar
+								{ ...colorGradientSettings }
+							/>
+						</InspectorControls>
+					</>
+				);
+			};
+		},
+		'withSearchInputColors'
+	)
+);
+
+addFilter(
+	'editor.BlockListBlock',
+	'blockify/search-input-colors',
+	createHigherOrderComponent(
+		( BlockListBlock ) => {
+			return ( props: any ) => {
+				const defaultReturn = <BlockListBlock { ...props } />;
+
+				if ( props.name !== 'core/search' ) {
+					return defaultReturn;
+				}
+
+				const {
+					attributes,
+					wrapperProps = {},
+				} = props;
+
+				const {
+					inputBackgroundColor,
+					borderColor,
+				} = attributes;
+
+				if ( inputBackgroundColor ) {
+					const colorValue = inputBackgroundColor?.includes( '-' ) ? `var(--wp--preset--color--${ inputBackgroundColor })` : inputBackgroundColor;
+
+					wrapperProps.style = {
+						...wrapperProps.style,
+						'--wp--custom--input--background': colorValue,
+					};
+				}
+
+				if ( borderColor ) {
+					const colorValue = borderColor?.includes( '-' ) ? `var(--wp--preset--color--${ borderColor })` : borderColor;
+
+					wrapperProps.style = {
+						...wrapperProps.style,
+						'--wp--custom--input--border': `var(--wp--custom--border--width,1px) var(--wp--custom--border--style,solid) ${ colorValue }`,
+					};
+				}
+
+				return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+			};
+		},
+		'withSearchInputColors'
+	)
+);
+
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'blockify/search-input-colors',
+	( extraProps, blockType, attributes ) => {
+		if ( blockType.name !== 'core/search' ) {
+			return extraProps;
+		}
+
+		const {
+			inputBackgroundColor,
+		} = attributes;
+
+		if ( inputBackgroundColor ) {
+			const colorValue = inputBackgroundColor?.includes( '-' ) ? `var(--wp--preset--color--${ inputBackgroundColor })` : inputBackgroundColor;
+
+			extraProps.style = {
+				...extraProps.style,
+				'--wp--custom--input--background': colorValue,
+			};
+		}
+
+		return extraProps;
+	}
+);
diff --git a/src/index.tsx b/src/index.tsx
@@ -13,6 +13,7 @@ import './block-extensions/negative-margin.tsx';
 import './block-extensions/onclick.tsx';
 import './block-extensions/position.tsx';
 import './block-extensions/query-spacing.tsx';
+import './block-extensions/search-input.tsx';
 import './block-extensions/shadow.tsx';
 import './block-extensions/size.tsx';
 import './block-extensions/transform.tsx';

diff --git a/src/utility/color.tsx b/src/utility/color.tsx
@@ -0,0 +1,19 @@
+import { select } from '@wordpress/data';
+import { ColorPalette } from '@wordpress/components';
+import Color = ColorPalette.Color;
+
+export const getColorSlugFromValue = ( value: string ): string => {
+	const colors: Color[] = select( 'core/block-editor' )?.getSettings().colors ?? [];
+
+	const color = colors.find( ( color ) => color.color === value );
+
+	return color?.slug ?? '';
+};
+
+export const getColorValueFromSlug = ( slug: string ): string => {
+	const colors: Color[] = select( 'core/block-editor' )?.getSettings().colors ?? [];
+
+	const color = colors.find( ( color ) => color.slug === slug );
+
+	return color?.color ?? '';
+};
diff --git a/styles/dark.json b/styles/dark.json
@@ -88,12 +88,12 @@
         {
           "name": "Neutral 50",
           "slug": "neutral-50",
-          "color": "#141f2f"
+          "color": "#111827"
         },
         {
           "name": "Neutral 0",
           "slug": "neutral-0",
-          "color": "#111827"
+          "color": "#030712"
         },
         {
           "name": "Success 600",
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => 'ef9b4ff8d9255b2758a3');
		<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '26721c6dc7cf48bb87ba');