Fix images hidden by default in Product grid blocks (#6599)

Author: Aljullu

assets/js/editor-components/grid-content-control/index.js

@@ -14,12 +14,15 @@ import { ToggleControl } from '@wordpress/components';
  */
 const GridContentControl = ( { onChange, settings } ) => {
 	const { image, button, price, rating, title } = settings;
+	// If `image` is undefined, that might be because it's a block that was
+	// created before the `image` attribute existed, so we default to true.
+	const imageIsVisible = image !== false;
 	return (
 		<>
 			<ToggleControl
 				label={ __( 'Product image', 'woo-gutenberg-products-block' ) }
 				help={
-					image
+					imageIsVisible
 						? __(
 								'Product image is visible.',
 								'woo-gutenberg-products-block'
@@ -29,8 +32,10 @@ const GridContentControl = ( { onChange, settings } ) => {
 								'woo-gutenberg-products-block'
 						  )
 				}
-				checked={ image }
-				onChange={ () => onChange( { ...settings, image: ! image } ) }
+				checked={ imageIsVisible }
+				onChange={ () =>
+					onChange( { ...settings, image: ! imageIsVisible } )
+				}
 			/>
 			<ToggleControl
 				label={ __( 'Product title', 'woo-gutenberg-products-block' ) }

src/BlockTypes/AbstractProductGrid.php

@@ -519,7 +519,7 @@ protected function render_product( $product ) {
 	 * @return string
 	 */
 	protected function get_image_html( $product ) {
-		if ( empty( $this->attributes['contentVisibility']['image'] ) ) {
+		if ( array_key_exists( 'image', $this->attributes['contentVisibility'] ) && false === $this->attributes['contentVisibility']['image'] ) {
 			return '';
 		}