Crop and Gravity Gutenberg Capability

[gabrielcld2]

Approach

• Images delivered on both the editor and the front end via the image block should apply any transformations done to the image assets for the selected image size.
• This is achieved by:
  • parsing the size-* class from the image parent figure element
  • Saving & passing the corresponding size to the delivery so that the crop and gravity transformations are applied

QA notes

• Go to edit an image asset in the Media Library.
• Enable the Crop and Gravity feature.
• Set transformations to the thumbnail size.
• Go to the WordPress Editor, insert the asset.
• Using the settings of the Image block, select the thumbnail size.
• Save the changes on the editor and reload the page
• The transformation should still be applied
• View the page on the frontend to make sure it's applied there too
  • note: Gutenberg image block will take all the available space by default instead of the thumbnail size, this is the default behavior. In the editor the width and height of the image block can be manually set in the block settings if needed.