From 1eab123be35be9f3f76ffd03246d04a6b72ff83b Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 19 Feb 2026 13:50:07 +0000 Subject: [PATCH 1/3] Fix editor bugs: wrong variable name, textdomain mismatch, link corruption, alt text, popover anchor - Fix critical bug: `happyprimeData` references changed to correct `happyprime_themeimageblock_data` variable name (broke all editor previews) - Fix textdomain in block.json from `happyprime` to `theme-image-block` to match plugin Text Domain and enable proper i18n - Fix link processing in Block.php to only search for tags when a link URL is set, preventing corruption of SVGs containing elements - Fix editor alt text to respect altText and omitAltText attributes, matching the PHP render behavior - Fix Popover anchor using useRef instead of document.querySelector to target the correct block instance when multiple blocks exist - Remove forced width:100% on inline SVGs in editor that didn't match frontend rendering - Avoid passing empty class attribute to get_block_wrapper_attributes https://claude.ai/code/session_011559Dfm5rxu8GGfejrzy5c --- blocks/src/theme-image/block.json | 2 +- blocks/src/theme-image/index.js | 26 ++++++++++++-------------- src/Block.php | 27 +++++++++++++++------------ 3 files changed, 28 insertions(+), 27 deletions(-) diff --git a/blocks/src/theme-image/block.json b/blocks/src/theme-image/block.json index da1ddd6..c88fa7b 100644 --- a/blocks/src/theme-image/block.json +++ b/blocks/src/theme-image/block.json @@ -65,7 +65,7 @@ "default": false } }, - "textdomain": "happyprime", + "textdomain": "theme-image-block", "editorScript": "file:../../build/theme-image/index.js", "style": "file:./style.css" } diff --git a/blocks/src/theme-image/index.js b/blocks/src/theme-image/index.js index 642f760..525e68e 100644 --- a/blocks/src/theme-image/index.js +++ b/blocks/src/theme-image/index.js @@ -20,7 +20,7 @@ import { TextControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useState, useEffect } from '@wordpress/element'; +import { useState, useEffect, useRef } from '@wordpress/element'; import { image, caption as captionIcon } from '@wordpress/icons'; /** @@ -52,6 +52,7 @@ function Edit({ attributes, setAttributes }) { } = attributes; const [svgContent, setSvgContent] = useState(null); const [isEditingLink, setIsEditingLink] = useState(false); + const blockRef = useRef(); // Get registered theme images and styles from localized data. const registeredImages = happyprime_themeimageblock_data?.images || []; @@ -104,7 +105,7 @@ function Edit({ attributes, setAttributes }) { imagePath && imagePath.toLowerCase().endsWith('.svg') ) { - const svgUrl = `${happyprimeData.themeUrl}/${imagePath}`; + const svgUrl = `${happyprime_themeimageblock_data.themeUrl}/${imagePath}`; fetch(svgUrl) .then((response) => response.text()) .then((svg) => { @@ -120,12 +121,13 @@ function Edit({ attributes, setAttributes }) { }, [inlineSVG, imagePath]); const blockProps = useBlockProps({ + ref: blockRef, className: inlineSVG ? 'has-inline-svg' : '', }); const imageUrl = - imagePath && happyprimeData?.themeUrl - ? `${happyprimeData.themeUrl}/${imagePath}` + imagePath && happyprime_themeimageblock_data?.themeUrl + ? `${happyprime_themeimageblock_data.themeUrl}/${imagePath}` : ''; const isSVG = imagePath && imagePath.toLowerCase().endsWith('.svg'); @@ -143,9 +145,6 @@ function Edit({ attributes, setAttributes }) { const styles = []; if (width) { styles.push(`width: ${width}`); - } else if (!width) { - // Default width for editor preview when not specified. - styles.push('width: 100%'); } if (height) { styles.push(`height: ${height}`); @@ -216,13 +215,14 @@ function Edit({ attributes, setAttributes }) { imgStyles.height = height; } + const editorAlt = omitAltText + ? '' + : altText || currentImage?.alt || ''; + const img = ( { 0 ? imgStyles : undefined } @@ -282,9 +282,7 @@ function Edit({ attributes, setAttributes }) { setIsEditingLink(false)} - anchor={document.querySelector( - '.wp-block-happyprime-theme-image' - )} + anchor={blockRef.current} > '; - } - $html = new \WP_HTML_Tag_Processor( $content ); - if ( $html->next_tag( array( 'tag_name' => 'a' ) ) ) { - $html->set_attribute( 'href', $link_url ); - if ( $link_target ) { - $html->set_attribute( 'target', $link_target ); - } - if ( $link_rel ) { - $html->set_attribute( 'rel', $link_rel ); + $html = new \WP_HTML_Tag_Processor( $content ); + if ( $html->next_tag( array( 'tag_name' => 'a' ) ) ) { + $html->set_attribute( 'href', $link_url ); + if ( $link_target ) { + $html->set_attribute( 'target', $link_target ); + } + if ( $link_rel ) { + $html->set_attribute( 'rel', $link_rel ); + } } + + $content = $html->get_updated_html(); } - // This seems to be the best way to rewind and seek again? Seems strange. - $html = new \WP_HTML_Tag_Processor( $html->get_updated_html() ); + $html = new \WP_HTML_Tag_Processor( $content ); if ( $html->next_tag( array( 'tag_name' => 'img' ) ) ) { if ( ! empty( $inline_styles ) ) { @@ -217,7 +218,9 @@ public static function render( $attributes, $content ): string { $content .= sprintf( '
%s
', $caption ); } - $wrapper_attrs = array( 'class' => implode( ' ', $wrapper_classes ) ); + $wrapper_attrs = ! empty( $wrapper_classes ) + ? array( 'class' => implode( ' ', $wrapper_classes ) ) + : array(); return sprintf( '
%s
', From 65413771c6fa7b80efe73061b2ea2610cc5d7116 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 20 Feb 2026 17:41:31 +0000 Subject: [PATCH 2/3] Fix React error: dangerouslySetInnerHTML conflicting with children The
element had both dangerouslySetInnerHTML (for inline SVG without a link) and JSX children (content + caption RichText), which React forbids. Render the SVG inside a display:contents span instead, keeping it as a normal child of the figure. https://claude.ai/code/session_011559Dfm5rxu8GGfejrzy5c --- blocks/src/theme-image/index.js | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/blocks/src/theme-image/index.js b/blocks/src/theme-image/index.js index 525e68e..0033322 100644 --- a/blocks/src/theme-image/index.js +++ b/blocks/src/theme-image/index.js @@ -192,18 +192,20 @@ function Edit({ attributes, setAttributes }) { } else if (inlineSVG && processedSvg) { // For inline SVG, apply dangerouslySetInnerHTML to link or wrapper // to match server-side structure without extra figure wrapper. + const svgElement = ( + + ); if (linkUrl) { content = ( - + + {svgElement} + ); } else { - // Will be applied to wrapper figure via blockProps below. - content = null; + content = svgElement; } } else { // Build inline styles for img element. @@ -237,14 +239,7 @@ function Edit({ attributes, setAttributes }) { ); } - // For inline SVG without link, apply HTML directly to wrapper. - const wrapperProps = - inlineSVG && processedSvg && !linkUrl - ? { - ...blockProps, - dangerouslySetInnerHTML: { __html: processedSvg }, - } - : blockProps; + const wrapperProps = blockProps; return ( <> From 1be5ffbd5e2fc1c8b577b6929855796b9150e0ca Mon Sep 17 00:00:00 2001 From: jeremyfelt Date: Fri, 20 Feb 2026 09:45:09 -0800 Subject: [PATCH 3/3] Add built files --- blocks/build/theme-image/index.asset.php | 2 +- blocks/build/theme-image/index.js | 2 +- blocks/src/theme-image/index.js | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/blocks/build/theme-image/index.asset.php b/blocks/build/theme-image/index.asset.php index 9002d01..f6361b6 100644 --- a/blocks/build/theme-image/index.asset.php +++ b/blocks/build/theme-image/index.asset.php @@ -1 +1 @@ - array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'a084c1de89a76e2f384a'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'ce8aef2bed48bcc7572c'); diff --git a/blocks/build/theme-image/index.js b/blocks/build/theme-image/index.js index 645c436..235fb29 100644 --- a/blocks/build/theme-image/index.js +++ b/blocks/build/theme-image/index.js @@ -1 +1 @@ -(()=>{"use strict";const e=window.wp.blockEditor,t=window.wp.blocks,l=window.wp.components,a=window.wp.i18n,n=window.wp.element,o=window.wp.primitives,i=window.ReactJSXRuntime;var c=(0,i.jsx)(o.SVG,{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)(o.Path,{d:"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v8.4l-3-2.9c-.3-.3-.8-.3-1 0L11.9 14 9 12c-.3-.2-.6-.2-.8 0l-3.6 2.6V5c-.1-.3.1-.5.4-.5zm14 15H5c-.3 0-.5-.2-.5-.5v-2.4l4.1-3 3 1.9c.3.2.7.2.9-.1L16 12l3.5 3.4V19c0 .3-.2.5-.5.5z"})}),m=(0,i.jsx)(o.SVG,{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)(o.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M6 5.5h12a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5ZM4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm4 10h2v-1.5H8V16Zm5 0h-2v-1.5h2V16Zm1 0h2v-1.5h-2V16Z"})});const r=JSON.parse('{"UU":"happyprime/theme-image"}');(0,t.registerBlockType)(r.UU,{edit:function({attributes:t,setAttributes:o}){const{themeImage:i,imageSize:r,imageStyle:s,inlineSVG:h,linkUrl:g,linkTarget:p,linkRel:b,caption:k,showCaption:u,altText:_,omitAltText:d}=t,[v,w]=(0,n.useState)(null),[R,f]=(0,n.useState)(!1),S=happyprime_themeimageblock_data?.images||[],y=happyprime_themeimageblock_data?.styles||[],T=[{value:"",label:(0,a.__)("Select an image","theme-image-block")},...S.map(e=>({value:e.slug,label:e.label}))],C=S.find(e=>e.slug===i),E=[{value:"original",label:(0,a.__)("Original","theme-image-block")}];C&&C.variations&&Object.keys(C.variations).forEach(e=>{const t=C.variations[e];E.push({value:e,label:t.name||e})});let x=C?.value||"";C&&"original"!==r&&C.variations&&C.variations[r]&&(x=C.variations[r].path),(0,n.useEffect)(()=>{if(h&&x&&x.toLowerCase().endsWith(".svg")){const e=`${happyprimeData.themeUrl}/${x}`;fetch(e).then(e=>e.text()).then(e=>{w(e)}).catch(e=>{console.error("Failed to fetch SVG:",e),w(null)})}else w(null)},[h,x]);const V=(0,e.useBlockProps)({className:h?"has-inline-svg":""}),I=x&&happyprimeData?.themeUrl?`${happyprimeData.themeUrl}/${x}`:"",U=x&&x.toLowerCase().endsWith(".svg"),B=y.find(e=>e.slug===s),$=B?.width||"",j=B?.height||"";let A,L=null;if(h&&v){const e=[];$?e.push(`width: ${$}`):$||e.push("width: 100%"),j&&e.push(`height: ${j}`);const t=e.join("; "),l=v.match(/]*)>/);if(l){const e=l[1].match(/style="([^"]*)"/);if(e){const l=e[1];L=v.replace(/]*)>/,e=>e.replace(/style="[^"]*"/,`style="${l}; ${t}"`))}else L=v.replace(/]*)>/,``)}}if(I)if(h&&L)A=g?React.createElement("a",{href:g,target:p,rel:b,dangerouslySetInnerHTML:{__html:L}}):null;else{const e={};$&&(e.width=$),j&&(e.height=j);const t=React.createElement("img",{src:I,alt:C?.alt||(0,a.__)("Theme image preview","theme-image-block"),style:Object.keys(e).length>0?e:void 0});A=g?React.createElement("a",{href:g,target:p,rel:b},t):t}else A=React.createElement(l.Placeholder,{icon:React.createElement(e.BlockIcon,{icon:c}),label:(0,a.__)("Theme Image","theme-image-block"),instructions:(0,a.__)("Select an image from the block settings","theme-image-block")});const O=h&&L&&!g?{...V,dangerouslySetInnerHTML:{__html:L}}:V;return React.createElement(React.Fragment,null,I&&React.createElement(e.BlockControls,{group:"block"},React.createElement(l.ToolbarButton,{icon:"admin-links",label:(0,a.__)("Link","theme-image-block"),onClick:()=>f(!0),isActive:!!g}),g&&React.createElement(l.ToolbarButton,{icon:"editor-unlink",label:(0,a.__)("Unlink","theme-image-block"),onClick:()=>{o({linkUrl:"",linkTarget:"",linkRel:""})}}),React.createElement(l.ToolbarButton,{icon:m,label:(0,a.__)("Add caption","theme-image-block"),onClick:()=>o({showCaption:!u}),isActive:u})),R&&React.createElement(l.Popover,{position:"bottom center",onClose:()=>f(!1),anchor:document.querySelector(".wp-block-happyprime-theme-image")},React.createElement(e.__experimentalLinkControl,{value:{url:g,opensInNewTab:"_blank"===p,nofollow:b?.includes("nofollow")},onChange:e=>{const t=[];e?.opensInNewTab&&t.push("noopener","noreferrer"),e?.nofollow&&t.push("nofollow"),o({linkUrl:e?.url||"",linkTarget:e?.opensInNewTab?"_blank":"",linkRel:t.join(" ")})},onRemove:()=>{o({linkUrl:"",linkTarget:"",linkRel:""}),f(!1)},settings:[{id:"opensInNewTab",title:(0,a.__)("Open in new tab","theme-image-block")},{id:"nofollow",title:(0,a.__)("Mark as nofollow","theme-image-block")}]})),React.createElement(e.InspectorControls,null,React.createElement(l.PanelBody,{title:(0,a.__)("Settings","theme-image-block"),initialOpen:!0},React.createElement(l.SelectControl,{label:(0,a.__)("Theme Image","theme-image-block"),value:i,options:T,onChange:e=>{o({themeImage:e,imageSize:"original"})},help:(0,a.__)("Select a registered theme image.","theme-image-block")}),C&&C.variations&&Object.keys(C.variations).length>0&&React.createElement(l.SelectControl,{label:(0,a.__)("Variation","theme-image-block"),value:r,options:E,onChange:e=>o({imageSize:e}),help:(0,a.__)("Select the image variation.","theme-image-block")}),React.createElement(l.SelectControl,{label:(0,a.__)("Style","theme-image-block"),value:s,options:[{value:"",label:(0,a.__)("Default","theme-image-block")},...y.map(e=>({value:e.slug,label:e.name}))],onChange:e=>o({imageStyle:e}),help:(0,a.__)("Select a registered style to apply.","theme-image-block")}),U&&React.createElement(l.ToggleControl,{label:(0,a.__)("Inline SVG","theme-image-block"),checked:h,onChange:e=>o({inlineSVG:e}),help:(0,a.__)("Render SVG code inline.","theme-image-block")}),!d&&React.createElement(l.TextControl,{label:(0,a.__)("Alt Text","theme-image-block"),value:_,onChange:e=>o({altText:e}),placeholder:C?.alt||"",help:(0,a.__)("Alternative text for the image. Leave empty to use the registered default.","theme-image-block")}),React.createElement(l.ToggleControl,{label:(0,a.__)("Omit alt text","theme-image-block"),checked:d,onChange:e=>o({omitAltText:e}),help:(0,a.__)("Output empty alt text, even if a registered value exists.","theme-image-block")}))),React.createElement("figure",O,A,I&&u&&React.createElement(e.RichText,{tagName:"figcaption",placeholder:C?.caption||(0,a.__)("Add caption…","theme-image-block"),value:k,onChange:e=>o({caption:e}),allowedFormats:["core/bold","core/italic","core/link"]})))}})})(); \ No newline at end of file +(()=>{"use strict";const e=window.wp.blockEditor,t=window.wp.blocks,l=window.wp.components,a=window.wp.i18n,n=window.wp.element,o=window.wp.primitives,i=window.ReactJSXRuntime;var c=(0,i.jsx)(o.SVG,{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)(o.Path,{d:"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v8.4l-3-2.9c-.3-.3-.8-.3-1 0L11.9 14 9 12c-.3-.2-.6-.2-.8 0l-3.6 2.6V5c-.1-.3.1-.5.4-.5zm14 15H5c-.3 0-.5-.2-.5-.5v-2.4l4.1-3 3 1.9c.3.2.7.2.9-.1L16 12l3.5 3.4V19c0 .3-.2.5-.5.5z"})}),m=(0,i.jsx)(o.SVG,{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,i.jsx)(o.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M6 5.5h12a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5ZM4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm4 10h2v-1.5H8V16Zm5 0h-2v-1.5h2V16Zm1 0h2v-1.5h-2V16Z"})});const r=JSON.parse('{"UU":"happyprime/theme-image"}');(0,t.registerBlockType)(r.UU,{edit:function({attributes:t,setAttributes:o}){const{themeImage:i,imageSize:r,imageStyle:s,inlineSVG:h,linkUrl:g,linkTarget:p,linkRel:b,caption:k,showCaption:_,altText:u,omitAltText:d}=t,[v,w]=(0,n.useState)(null),[R,f]=(0,n.useState)(!1),y=(0,n.useRef)(),S=happyprime_themeimageblock_data?.images||[],E=happyprime_themeimageblock_data?.styles||[],C=[{value:"",label:(0,a.__)("Select an image","theme-image-block")},...S.map(e=>({value:e.slug,label:e.label}))],T=S.find(e=>e.slug===i),x=[{value:"original",label:(0,a.__)("Original","theme-image-block")}];T&&T.variations&&Object.keys(T.variations).forEach(e=>{const t=T.variations[e];x.push({value:e,label:t.name||e})});let V=T?.value||"";T&&"original"!==r&&T.variations&&T.variations[r]&&(V=T.variations[r].path),(0,n.useEffect)(()=>{if(h&&V&&V.toLowerCase().endsWith(".svg")){const e=`${happyprime_themeimageblock_data.themeUrl}/${V}`;fetch(e).then(e=>e.text()).then(e=>{w(e)}).catch(e=>{console.error("Failed to fetch SVG:",e),w(null)})}else w(null)},[h,V]);const I=(0,e.useBlockProps)({ref:y,className:h?"has-inline-svg":""}),U=V&&happyprime_themeimageblock_data?.themeUrl?`${happyprime_themeimageblock_data.themeUrl}/${V}`:"",B=V&&V.toLowerCase().endsWith(".svg"),$=E.find(e=>e.slug===s),j=$?.width||"",A=$?.height||"";let O,L=null;if(h&&v){const e=[];j&&e.push(`width: ${j}`),A&&e.push(`height: ${A}`);const t=e.join("; "),l=v.match(/]*)>/);if(l){const e=l[1].match(/style="([^"]*)"/);if(e){const l=e[1];L=v.replace(/]*)>/,e=>e.replace(/style="[^"]*"/,`style="${l}; ${t}"`))}else L=v.replace(/]*)>/,``)}}if(U)if(h&&L){const e=React.createElement("span",{dangerouslySetInnerHTML:{__html:L},style:{display:"contents"}});O=g?React.createElement("a",{href:g,target:p,rel:b},e):e}else{const e={};j&&(e.width=j),A&&(e.height=A);const t=d?"":u||T?.alt||"",l=React.createElement("img",{src:U,alt:t,style:Object.keys(e).length>0?e:void 0});O=g?React.createElement("a",{href:g,target:p,rel:b},l):l}else O=React.createElement(l.Placeholder,{icon:React.createElement(e.BlockIcon,{icon:c}),label:(0,a.__)("Theme Image","theme-image-block"),instructions:(0,a.__)("Select an image from the block settings","theme-image-block")});const G=I;return React.createElement(React.Fragment,null,U&&React.createElement(e.BlockControls,{group:"block"},React.createElement(l.ToolbarButton,{icon:"admin-links",label:(0,a.__)("Link","theme-image-block"),onClick:()=>f(!0),isActive:!!g}),g&&React.createElement(l.ToolbarButton,{icon:"editor-unlink",label:(0,a.__)("Unlink","theme-image-block"),onClick:()=>{o({linkUrl:"",linkTarget:"",linkRel:""})}}),React.createElement(l.ToolbarButton,{icon:m,label:(0,a.__)("Add caption","theme-image-block"),onClick:()=>o({showCaption:!_}),isActive:_})),R&&React.createElement(l.Popover,{position:"bottom center",onClose:()=>f(!1),anchor:y.current},React.createElement(e.__experimentalLinkControl,{value:{url:g,opensInNewTab:"_blank"===p,nofollow:b?.includes("nofollow")},onChange:e=>{const t=[];e?.opensInNewTab&&t.push("noopener","noreferrer"),e?.nofollow&&t.push("nofollow"),o({linkUrl:e?.url||"",linkTarget:e?.opensInNewTab?"_blank":"",linkRel:t.join(" ")})},onRemove:()=>{o({linkUrl:"",linkTarget:"",linkRel:""}),f(!1)},settings:[{id:"opensInNewTab",title:(0,a.__)("Open in new tab","theme-image-block")},{id:"nofollow",title:(0,a.__)("Mark as nofollow","theme-image-block")}]})),React.createElement(e.InspectorControls,null,React.createElement(l.PanelBody,{title:(0,a.__)("Settings","theme-image-block"),initialOpen:!0},React.createElement(l.SelectControl,{label:(0,a.__)("Theme Image","theme-image-block"),value:i,options:C,onChange:e=>{o({themeImage:e,imageSize:"original"})},help:(0,a.__)("Select a registered theme image.","theme-image-block")}),T&&T.variations&&Object.keys(T.variations).length>0&&React.createElement(l.SelectControl,{label:(0,a.__)("Variation","theme-image-block"),value:r,options:x,onChange:e=>o({imageSize:e}),help:(0,a.__)("Select the image variation.","theme-image-block")}),React.createElement(l.SelectControl,{label:(0,a.__)("Style","theme-image-block"),value:s,options:[{value:"",label:(0,a.__)("Default","theme-image-block")},...E.map(e=>({value:e.slug,label:e.name}))],onChange:e=>o({imageStyle:e}),help:(0,a.__)("Select a registered style to apply.","theme-image-block")}),B&&React.createElement(l.ToggleControl,{label:(0,a.__)("Inline SVG","theme-image-block"),checked:h,onChange:e=>o({inlineSVG:e}),help:(0,a.__)("Render SVG code inline.","theme-image-block")}),!d&&React.createElement(l.TextControl,{label:(0,a.__)("Alt Text","theme-image-block"),value:u,onChange:e=>o({altText:e}),placeholder:T?.alt||"",help:(0,a.__)("Alternative text for the image. Leave empty to use the registered default.","theme-image-block")}),React.createElement(l.ToggleControl,{label:(0,a.__)("Omit alt text","theme-image-block"),checked:d,onChange:e=>o({omitAltText:e}),help:(0,a.__)("Output empty alt text, even if a registered value exists.","theme-image-block")}))),React.createElement("figure",G,O,U&&_&&React.createElement(e.RichText,{tagName:"figcaption",placeholder:T?.caption||(0,a.__)("Add caption…","theme-image-block"),value:k,onChange:e=>o({caption:e}),allowedFormats:["core/bold","core/italic","core/link"]})))}})})(); \ No newline at end of file diff --git a/blocks/src/theme-image/index.js b/blocks/src/theme-image/index.js index 0033322..52570ed 100644 --- a/blocks/src/theme-image/index.js +++ b/blocks/src/theme-image/index.js @@ -217,9 +217,7 @@ function Edit({ attributes, setAttributes }) { imgStyles.height = height; } - const editorAlt = omitAltText - ? '' - : altText || currentImage?.alt || ''; + const editorAlt = omitAltText ? '' : altText || currentImage?.alt || ''; const img = ( setAttributes({ showCaption: !showCaption })} + onClick={() => + setAttributes({ showCaption: !showCaption }) + } isActive={showCaption} />