Change attribute name

t-hamano · Dec 12, 2023 · 6fc2d47 · 6fc2d47
1 parent 929c01a
commit 6fc2d47
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,21 +38,21 @@ export default function ImageList( props: BlockEditProps< BlockAttributes > ) {
 			mediaType: undefined,
 			mediaValue: undefined,
 		} );
-		setAttributes( { sources: newSources } );
+		setAttributes( { enableResponsiveImageSources: newSources } );
 	}
 
 	function onChangeOrder( direction: number, index: number ) {
 		const newSources = [ ...sources ];
 		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
@@ -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
@@ -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 );
 	} );