Address a handful of open QA issues

blocks/build/theme-image/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '95ac8f679f8ef172d938');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '5e96b1561a816d0448de');

blocks/src/theme-image/block.json

@@ -9,12 +9,14 @@
 	"description": "Display an image from the theme's images directory.",
 	"supports": {
 		"anchor": true,
+		"align": true,
 		"color": {
-			"text": false,
-			"background": false
+			"text": true,
+			"background": true
 		},
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
 		}
 	},
 	"attributes": {
@@ -45,8 +47,25 @@
 		"linkRel": {
 			"type": "string",
 			"default": ""
+		},
+		"caption": {
+			"type": "string",
+			"default": ""
+		},
+		"showCaption": {
+			"type": "boolean",
+			"default": false
+		},
+		"altText": {
+			"type": "string",
+			"default": ""
+		},
+		"omitAltText": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"textdomain": "happyprime",
-	"editorScript": "file:../../build/theme-image/index.js"
+	"editorScript": "file:../../build/theme-image/index.js",
+	"style": "file:./style.css"
 }

blocks/src/theme-image/index.js

@@ -7,6 +7,7 @@ import {
 	BlockControls,
 	BlockIcon,
 	__experimentalLinkControl as LinkControl,
+	RichText,
 } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
 import {
@@ -16,10 +17,11 @@ import {
 	ToolbarButton,
 	Popover,
 	Placeholder,
+	TextControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
-import { image } from '@wordpress/icons';
+import { image, caption as captionIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -43,6 +45,10 @@ function Edit({ attributes, setAttributes }) {
 		linkUrl,
 		linkTarget,
 		linkRel,
+		caption,
+		showCaption,
+		altText,
+		omitAltText,
 	} = attributes;
 	const [svgContent, setSvgContent] = useState(null);
 	const [isEditingLink, setIsEditingLink] = useState(false);
@@ -214,7 +220,8 @@ function Edit({ attributes, setAttributes }) {
 			<img
 				src={imageUrl}
 				alt={
-					currentImage?.alt || __('Theme image preview', 'theme-image-block')
+					currentImage?.alt ||
+					__('Theme image preview', 'theme-image-block')
 				}
 				style={
 					Object.keys(imgStyles).length > 0 ? imgStyles : undefined
@@ -262,6 +269,12 @@ function Edit({ attributes, setAttributes }) {
 							}}
 						/>
 					)}
+					<ToolbarButton
+						icon={captionIcon}
+						label={__('Add caption', 'theme-image-block')}
+						onClick={() => setAttributes({ showCaption: !showCaption })}
+						isActive={showCaption}
+					/>
 				</BlockControls>
 			)}
 
@@ -309,11 +322,17 @@ function Edit({ attributes, setAttributes }) {
 						settings={[
 							{
 								id: 'opensInNewTab',
-								title: __('Open in new tab', 'theme-image-block'),
+								title: __(
+									'Open in new tab',
+									'theme-image-block'
+								),
 							},
 							{
 								id: 'nofollow',
-								title: __('Mark as nofollow', 'theme-image-block'),
+								title: __(
+									'Mark as nofollow',
+									'theme-image-block'
+								),
 							},
 						]}
 					/>
@@ -362,7 +381,10 @@ function Edit({ attributes, setAttributes }) {
 						label={__('Style', 'theme-image-block')}
 						value={imageStyle}
 						options={[
-							{ value: '', label: __('Default', 'theme-image-block') },
+							{
+								value: '',
+								label: __('Default', 'theme-image-block'),
+							},
 							...registeredStyles.map((style) => ({
 								value: style.slug,
 								label: style.name,
@@ -390,10 +412,55 @@ function Edit({ attributes, setAttributes }) {
 							)}
 						/>
 					)}
+
+					{!omitAltText && (
+						<TextControl
+							label={__('Alt Text', 'theme-image-block')}
+							value={altText}
+							onChange={(value) =>
+								setAttributes({ altText: value })
+							}
+							placeholder={currentImage?.alt || ''}
+							help={__(
+								'Alternative text for the image. Leave empty to use the registered default.',
+								'theme-image-block'
+							)}
+						/>
+					)}
+
+					<ToggleControl
+						label={__('Omit alt text', 'theme-image-block')}
+						checked={omitAltText}
+						onChange={(value) =>
+							setAttributes({ omitAltText: value })
+						}
+						help={__(
+							'Output empty alt text, even if a registered value exists.',
+							'theme-image-block'
+						)}
+					/>
 				</PanelBody>
 			</InspectorControls>
 
-			<figure {...wrapperProps}>{content}</figure>
+			<figure {...wrapperProps}>
+				{content}
+				{imageUrl && showCaption && (
+					<RichText
+						tagName="figcaption"
+						placeholder={
+							currentImage?.caption ||
+							__('Add caption…', 'theme-image-block')
+						}
+						value={caption}
+						onChange={(value) => setAttributes({ caption: value })}
+						allowedFormats={[
+							'core/bold',
+							'core/italic',
+							'core/link',
+						]}
+					/>
+				)}
+			</figure>
 		</>
 	);
 }

blocks/src/theme-image/style.css

@@ -0,0 +1,8 @@
+/**
+ * Default styles for the theme image block.
+ */
+.wp-block-happyprime-theme-image img,
+.wp-block-happyprime-theme-image svg {
+	max-width: 100%;
+	height: auto;
+}

src/Block.php

@@ -22,6 +22,10 @@ class Block {
 	 *     @type string $linkUrl     URL for wrapping the image in a link. Default empty string.
 	 *     @type string $linkTarget  Target attribute for the link (e.g., '_blank'). Default empty string.
 	 *     @type string $linkRel     Rel attribute for the link (e.g., 'nofollow'). Default empty string.
+	 *     @type string $caption     Caption text to display below the image. Default empty string.
+	 *     @type bool   $showCaption Whether to display the caption. Default false.
+	 *     @type string $altText     Custom alt text to override the registered default. Default empty string.
+	 *     @type bool   $omitAltText Whether to omit alt text entirely. Default false.
 	 * }
 	 * @param string                $content    Block content.
 	 *
@@ -41,7 +45,16 @@ public static function render( $attributes, $content ): string {
 			return '';
 		}
 
-		$alt         = esc_attr( $image_data['alt'] );
+		// Determine alt text based on omitAltText and altText attributes.
+		$omit_alt_text = isset( $attributes['omitAltText'] ) && $attributes['omitAltText'];
+		if ( $omit_alt_text ) {
+			$alt = '';
+		} elseif ( isset( $attributes['altText'] ) && ! empty( $attributes['altText'] ) ) {
+			$alt = esc_attr( $attributes['altText'] );
+		} else {
+			$alt = esc_attr( $image_data['alt'] );
+		}
+
 		$image_size  = isset( $attributes['imageSize'] ) ? sanitize_key( $attributes['imageSize'] ) : 'original';
 		$inline_svg  = isset( $attributes['inlineSVG'] ) && $attributes['inlineSVG'];
 		$link_url    = isset( $attributes['linkUrl'] ) ? esc_url( $attributes['linkUrl'] ) : '';
@@ -134,6 +147,12 @@ public static function render( $attributes, $content ): string {
 		if ( $height ) {
 			$inline_styles[] = 'height: ' . $height;
 		}
+		if ( ! empty( $image_data['max_width'] ) ) {
+			$inline_styles[] = 'max-width: ' . esc_attr( $image_data['max_width'] );
+		}
+		if ( ! empty( $image_data['max_height'] ) ) {
+			$inline_styles[] = 'max-height: ' . esc_attr( $image_data['max_height'] );
+		}
 
 		$wrapper_classes = array();
 
@@ -144,9 +163,11 @@ public static function render( $attributes, $content ): string {
 			$content           = SVG::get(
 				$image_path,
 				[
-					'alt'    => $alt,
-					'width'  => $width,
-					'height' => $height,
+					'alt'        => $alt,
+					'width'      => $width,
+					'height'     => $height,
+					'max_width'  => ! empty( $image_data['max_width'] ) ? esc_attr( $image_data['max_width'] ) : '',
+					'max_height' => ! empty( $image_data['max_height'] ) ? esc_attr( $image_data['max_height'] ) : '',
 				]
 			);
 		} else {
@@ -189,6 +210,13 @@ public static function render( $attributes, $content ): string {
 
 		$content = $html->get_updated_html();
 
+		// Add caption if showCaption is enabled and caption is provided.
+		$show_caption = isset( $attributes['showCaption'] ) && $attributes['showCaption'];
+		$caption      = isset( $attributes['caption'] ) ? wp_kses_post( $attributes['caption'] ) : '';
+		if ( $show_caption && ! empty( $caption ) ) {
+			$content .= sprintf( '<figcaption>%s</figcaption>', $caption );
+		}
+
 		$wrapper_attrs = array( 'class' => implode( ' ', $wrapper_classes ) );
 
 		return sprintf(