From 6fc2d4723cdcc3e0e5cb2a909b65ca233ce16816 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 12 Dec 2023 11:20:28 +0900
Subject: [PATCH] Change attribute name

---
 enable-responsive-image.php |  6 +++---
 src/block-edit-preview.tsx  | 12 +++++++++++-
 src/index.tsx               |  2 +-
 src/source-list.tsx         | 10 +++++-----
 src/types.ts                |  2 +-
 test/e2e/test.spec.js       |  4 ++--
 6 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/enable-responsive-image.php b/enable-responsive-image.php
index c7da5cf..4a49f1a 100644
--- a/enable-responsive-image.php
+++ b/enable-responsive-image.php
@@ -54,16 +54,16 @@ function enable_responsive_image_enqueue_block_editor_assets() {
 add_action( 'enqueue_block_editor_assets', 'enable_responsive_image_enqueue_block_editor_assets' );
 
 function enable_responsive_image_render_block_image( $block_content, $block ) {
-	if ( ! isset( $block['attrs']['sources'] ) ) {
+	if ( ! isset( $block['attrs']['enableResponsiveImageSources'] ) ) {
 		return $block_content;
 	}
 
-	if ( ! is_array( $block['attrs']['sources'] ) ) {
+	if ( ! is_array( $block['attrs']['enableResponsiveImageSources'] ) ) {
 		return $block_content;
 	}
 
 	$filtered_sources = array_filter(
-		$block['attrs']['sources'],
+		$block['attrs']['enableResponsiveImageSources'],
 		function ( $source ) {
 			return isset( $source['srcset'] ) && isset( $source['mediaType'] ) && isset( $source['mediaValue'] );
 		}
diff --git a/src/block-edit-preview.tsx b/src/block-edit-preview.tsx
index 056b943..7ccb34c 100644
--- a/src/block-edit-preview.tsx
+++ b/src/block-edit-preview.tsx
@@ -23,7 +23,17 @@ import type { BlockEditProps } from '@wordpress/blocks';
 import type { BlockAttributes } from './types';
 
 export default function BlockEditPreview( { attributes }: BlockEditProps< BlockAttributes > ) {
-	const { url, alt, caption, align, width, height, aspectRatio, scale, sources } = attributes;
+	const {
+		url,
+		alt,
+		caption,
+		align,
+		width,
+		height,
+		aspectRatio,
+		scale,
+		enableResponsiveImageSources: sources,
+	} = attributes;
 
 	const borderProps = getBorderClassesAndStyles( attributes );
 
diff --git a/src/index.tsx b/src/index.tsx
index 55b2039..4ff6c81 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -27,7 +27,7 @@ const addImageSourceAttributes = ( settings: { [ key: string ]: any } ) => {
 		...settings,
 		attributes: {
 			...settings.attributes,
-			sources: {
+			enableResponsiveImageSources: {
 				type: 'array',
 				items: {
 					type: 'number',
diff --git a/src/source-list.tsx b/src/source-list.tsx
index 61fb77f..42fc212 100644
--- a/src/source-list.tsx
+++ b/src/source-list.tsx
@@ -21,12 +21,12 @@ import { MAX_SOURCES } from './constants';
 
 export default function ImageList( props: BlockEditProps< BlockAttributes > ) {
 	const { attributes, setAttributes } = props;
-	const { sources } = attributes;
+	const { enableResponsiveImageSources: sources } = attributes;
 
 	function onChange( newSource: Source, index: number ) {
 		const newSources = [ ...sources ];
 		newSources[ index ] = newSource;
-		setAttributes( { sources: newSources } );
+		setAttributes( { enableResponsiveImageSources: newSources } );
 	}
 
 	function onAddSource() {
@@ -38,7 +38,7 @@ export default function ImageList( props: BlockEditProps< BlockAttributes > ) {
 			mediaType: undefined,
 			mediaValue: undefined,
 		} );
-		setAttributes( { sources: newSources } );
+		setAttributes( { enableResponsiveImageSources: newSources } );
 	}
 
 	function onChangeOrder( direction: number, index: number ) {
@@ -46,13 +46,13 @@ export default function ImageList( props: BlockEditProps< BlockAttributes > ) {
 		const newIndex = index + direction;
 		const movedSource = newSources.splice( index, 1 )[ 0 ];
 		newSources.splice( newIndex, 0, movedSource );
-		setAttributes( { sources: newSources } );
+		setAttributes( { enableResponsiveImageSources: newSources } );
 	}
 
 	function onRemoveSource( index: number ) {
 		const newSources = [ ...sources ];
 		newSources.splice( index, 1 );
-		setAttributes( { sources: newSources } );
+		setAttributes( { enableResponsiveImageSources: newSources } );
 	}
 
 	return (
diff --git a/src/types.ts b/src/types.ts
index fbda59f..05e333e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,5 @@
 export interface BlockAttributes {
-	sources: Source[];
+	enableResponsiveImageSources: Source[];
 	[ key: string ]: any;
 }
 
diff --git a/test/e2e/test.spec.js b/test/e2e/test.spec.js
index 643b16d..9f2c755 100644
--- a/test/e2e/test.spec.js
+++ b/test/e2e/test.spec.js
@@ -76,7 +76,7 @@ test.describe( 'Block', () => {
 			{
 				name: 'core/image',
 				attributes: {
-					sources: [
+					enableResponsiveImageSources: [
 						{
 							slug: 'medium',
 							mediaType: 'max-width',
@@ -92,7 +92,7 @@ test.describe( 'Block', () => {
 			},
 		] );
 
-		const sources = blocks[ 0 ].attributes.sources;
+		const sources = blocks[ 0 ].attributes.enableResponsiveImageSources;
 		expect( sources[ 0 ].srcset.includes( firstSourceFilename ) ).toBe( true );
 		expect( sources[ 1 ].srcset.includes( secondSourceFilename ) ).toBe( true );
 	} );