Add image block duotone

WordPress · Feb 26, 2021 · 912b7d0 · 912b7d0
1 parent 802581e
commit 912b7d0
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 1 deletion.
diff --git a/lib/blocks.php b/lib/blocks.php
@@ -26,7 +26,6 @@ function gutenberg_reregister_core_block_types() {
 				'group',
 				'heading',
 				'html',
-				'image',
 				'list',
 				'media-text',
 				'missing',
@@ -55,6 +54,7 @@ function gutenberg_reregister_core_block_types() {
 					'calendar.php'                  => 'core/calendar',
 					'categories.php'                => 'core/categories',
 					'cover.php'                     => 'core/cover',
+					'image.php'                     => 'core/image',
 					'latest-comments.php'           => 'core/latest-comments',
 					'latest-posts.php'              => 'core/latest-posts',
 					'navigation.php'                => 'core/navigation',

diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
@@ -68,6 +68,9 @@
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "target"
+		},
+		"duotone": {
+			"type": "object"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -91,6 +91,7 @@ export function ImageEdit( {
 		width,
 		height,
 		sizeSlug,
+		duotone,
 	} = attributes;
 
 	const altRef = useRef();
@@ -275,6 +276,7 @@ export function ImageEdit( {
 	);
 
 	const classes = classnames( className, {
+		[ duotone?.id ]: duotone,
 		'is-transient': isBlobURL( url ),
 		'is-resized': !! width || !! height,
 		'is-focused': isSelected,

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -29,6 +29,9 @@ import {
 	MediaReplaceFlow,
 	store as blockEditorStore,
 	BlockAlignmentControl,
+	__experimentalUseEditorFeature as useEditorFeature,
+	__experimentalDuotoneToolbar as DuotoneToolbar,
+	__experimentalDuotoneFilter as DuotoneFilter,
 } from '@wordpress/block-editor';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
@@ -78,6 +81,7 @@ export default function Image( {
 		height,
 		linkTarget,
 		sizeSlug,
+		duotone,
 	},
 	setAttributes,
 	isSelected,
@@ -270,6 +274,10 @@ export default function Image( {
 		} );
 	}
 
+	function onDuotoneChange( newDuotone ) {
+		setAttributes( { duotone: newDuotone } );
+	}
+
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
@@ -279,6 +287,10 @@ export default function Image( {
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
 	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
 
+	const duotonePalette = useEditorFeature( 'color.duotone' );
+
+	const colorPalette = useEditorFeature( 'color.palette' );
+
 	const controls = (
 		<>
 			<BlockControls>
@@ -306,6 +318,14 @@ export default function Image( {
 							label={ __( 'Crop' ) }
 						/>
 					) }
+					{ ! isEditingImage && (
+						<DuotoneToolbar
+							value={ duotone }
+							duotonePalette={ duotonePalette }
+							colorPalette={ colorPalette }
+							onChange={ onDuotoneChange }
+						/>
+					) }
 					{ externalBlob && (
 						<ToolbarButton
 							onClick={ uploadExternal }
@@ -552,6 +572,13 @@ export default function Image( {
 		>
 			{ controls }
 			{ img }
+			{ duotone && (
+				<DuotoneFilter
+					selector={ `.wp-block-image.${ duotone.id } img` }
+					id={ duotone.id }
+					values={ duotone.values }
+				/>
+			) }
 			{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 				<RichText
 					ref={ captionRef }

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * Server-side rendering of the `core/image` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Supports `duotone` attribute server side for `core/image`.
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content HTML content of the block.
+ *
+ * @return string Rendered HTML of the referenced block.
+ */
+function render_block_core_image( $attributes, $content ) {
+	if ( ! isset( $attributes['duotone'] ) ) {
+		return $content;
+	}
+
+	$id        = $attributes['duotone']['id'];
+	$values    = $attributes['duotone']['values'];
+	$selectors = array(
+		'div.wp-block-image .' . $id . ' img',
+		'figure.wp-block-image.' . $id . ' img',
+	);
+	$selector  = implode( ', ', $selectors );
+
+	$duotone = gutenberg_render_duotone_filter( $selector, $id, $values );
+
+	return $content . $duotone;
+}
+
+/**
+ * Registers the `core/image` block.
+ */
+function register_block_core_image() {
+	register_block_type_from_metadata(
+		__DIR__ . '/image',
+		array(
+			'render_callback' => 'render_block_core_image',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_image' );
diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
@@ -24,11 +24,13 @@ export default function save( { attributes } ) {
 		linkTarget,
 		sizeSlug,
 		title,
+		duotone,
 	} = attributes;
 
 	const newRel = isEmpty( rel ) ? undefined : rel;
 
 	const classes = classnames( {
+		[ duotone?.id ]: duotone,
 		[ `align${ align }` ]: align,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
 		'is-resized': width || height,