Follow up Review

- New class for square images
- Force to use square images when the square class is added

assets/src/block-templates/issues/template.js

@@ -22,11 +22,9 @@ const item = ['core/group', {
   },
 }, [
   ['core/image', {
-    className: 'force-no-lightbox force-no-caption my-0 w-40',
+    className: 'force-no-lightbox force-no-caption my-0 square-40',
     url: `${mainThemeUrl}/images/placeholders/placeholder-40x40.jpg`,
     alt: __('Enter text', 'planet4-blocks-backend'),
-    width: 40,
-    height: 40,
   }],
   ['core/heading', {
     level: 5,

assets/src/components/Image/ImageBlockEdit.js

@@ -12,7 +12,7 @@ export const ImageBlockEdit = (BlockEdit) => {
     }
 
     const { attributes, clientId } = props;
-    const { id, caption, className } = attributes;
+    const { id, caption, className = '' } = attributes;
 
     // Get image data
     const image = useSelect(select => id ? select('core').getMedia(id) : null);
@@ -24,11 +24,18 @@ export const ImageBlockEdit = (BlockEdit) => {
     const block_id = clientId ? `block-${clientId}` : null;
 
     // Update width and height when sized rounded styles are selected
-    if (className && className.includes('is-style-rounded-')) {
+    if (className.includes('is-style-rounded-')) {
       const classes = className.split(' ');
-      const size = classes.find(c => c.includes('is-style-rounded-')).replace('is-style-rounded-', '');
-      attributes.width = parseInt(size) || 180;
-      attributes.height = parseInt(size) || 180;
+      const size = classes.find(c => c.includes('is-style-rounded-')).replace('is-style-rounded-', '') || 180;
+      attributes.width = parseInt(size);
+      attributes.height = parseInt(size);
+    }
+
+    // Force to use square images when the class `square-*` is added
+    if (className.includes('square-')) {
+      const size = className.slice(className.search('square-') + 'square-'.length).split(' ')[0] || 180;
+      attributes.width = parseInt(size);
+      attributes.height = parseInt(size);
     }
 
     return (

assets/src/styles/blocks/core-overrides/Image.scss

@@ -11,6 +11,11 @@
   }
 }
 
+@mixin square-image($size) {
+  height: #{$size};
+  width: #{$size};
+}
+
 .wp-block-image {
   position: relative;
   width: auto;
@@ -34,8 +39,10 @@
     display: none !important;
   }
 
-  &.w-40 {
-    width: 40px !important;
+  &.square {
+    &-40 {
+      @include square-image(40px);
+    }
   }
 
   @include large-and-up {