Description
The block for displaying Images with an option to add Figure and Fig Caption elements.
Toolbar
The Image block has the following toolbar options.
Block Settings
Image
Choose an Image from the media library or display an image dynamically with a Dynamic Tag.
Link
Attach a static or dynamic link to the Image.
Size
Choose from one of the available WordPress attachment sizes.
The list of sizes is in the drop down are defined by WordPress. By default they include Full, Large, Medium & Thumbnail.
Additional plugins may also add other sizes to the list. To modify the list requires the image_size_names_choose filter hook:
Width & Height
The Width and Height fields are shortcut fields to the Style > Sizing > Width & Height Properties. You will see these values in the Style > Sizing properties. In addition to Sizing > Width & Height the Max Width is set to 100%, this stops the image from overflowing a parent container if a Width value is set.
Default Width & Height
By default the Width is left Empty and the Height is set to auto. These settings will maintain the intrinsic size and aspect ratio of the image. There is no requirement to change these settings.
If left as default the image will automatically size itself based on the Size of the attachment and available space to it.
Resizing Images
Setting an explicit Width & Height of an image will force resize the image if space permits. This sometimes can distort an image. This happens if the new values alter the original aspect ratio. To stop this from happening the Image block has a default Style > Media > Object Fit of Cover. If for some reason you want to distort an image then you can set the Object Fit to Default.
Aspect Ratio
In addition to setting Width & Height Properties, you can set one value eg. Width and in Styles > Sizing set an Aspect Ratio. For example setting the Width to 100% will force the image to fill its parent container, and an Aspect Ratio of 1/1 will trim it to a square size.
Alt Text
The Alt Text field will automatically populate when attaching an image from the Media Library that has a completed Alt Tag field. By default the Alt Tag written as static text un the image blocks HTML, editing a Media Attachments ALT tag from the Media Library will not update images that have already been added to the post content.
Figure and Caption
Choosing the Add Caption from the blocks toolbar will add a Text block, with a HTML tag of <figcaption>, below the image and wrap both blocks in a Container block with <figure> HTML Tag.
Each of the blocks can be edited in the same way as there normal counterparts.