diff --git a/blocks/build/theme-image/index.asset.php b/blocks/build/theme-image/index.asset.php index 1bdc2a3..638f02b 100644 --- a/blocks/build/theme-image/index.asset.php +++ b/blocks/build/theme-image/index.asset.php @@ -1 +1 @@ - array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'f97d82e990dc108628c4'); + array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'a1b0f3dc503e13a66111'); diff --git a/blocks/build/theme-image/index.js b/blocks/build/theme-image/index.js index 884e7ee..528a365 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,i=JSON.parse('{"UU":"happyprime/theme-image"}');(0,t.registerBlockType)(i.UU,{edit:function({attributes:t,setAttributes:i}){const{themeImage:o,imageSize:r,imageStyle:p,inlineSVG:s,linkUrl:c,linkTarget:m,linkRel:h}=t,[g,u]=(0,n.useState)(null),[y,_]=(0,n.useState)(!1),d=happyprimeData?.images||[],b=happyprimeData?.styles||[],w=[{value:"",label:(0,a.__)("Select an image","happyprime")},...d.map(e=>({value:e.slug,label:e.label}))],k=d.find(e=>e.slug===o),v=[{value:"original",label:(0,a.__)("Original","happyprime")}];k&&k.variations&&Object.keys(k.variations).forEach(e=>{const t=e.charAt(0).toUpperCase()+e.slice(1);v.push({value:e,label:t})});let f=k?.value||"";k&&"original"!==r&&k.variations&&k.variations[r]&&(f=k.variations[r].path),(0,n.useEffect)(()=>{if(s&&f&&f.toLowerCase().endsWith(".svg")){const e=`${happyprimeData.themeUrl}/${f}`;fetch(e).then(e=>e.text()).then(e=>{const t=e.replace(/^<\?xml\s+.*?\?>\s*/s,"");u(t)}).catch(e=>{console.error("Failed to fetch SVG:",e),u(null)})}else u(null)},[s,f]);const S=(0,e.useBlockProps)({className:s?"has-inline-svg":""}),R=f&&happyprimeData?.themeUrl?`${happyprimeData.themeUrl}/${f}`:"",E=f&&f.toLowerCase().endsWith(".svg"),C=b.find(e=>e.slug===p),T=C?.width||"",U=C?.height||"";let I,$=null;if(s&&g){const e=[];T&&!T.includes(";")?e.push(`width: ${T}`):T||e.push("width: 100%"),U&&!U.includes(";")&&e.push(`height: ${U}`);const t=e.join("; "),l=g.match(/]*)>/);if(l){const e=l[1].match(/style="([^"]*)"/);if(e){const l=e[1];$=g.replace(/]*)>/,e=>e.replace(/style="[^"]*"/,`style="${l}; ${t}"`))}else $=g.replace(/]*)>/,``)}}if(R)if(s&&$)I=c?React.createElement("a",{href:c,target:m,rel:h,dangerouslySetInnerHTML:{__html:$}}):null;else{const e={};T&&!T.includes(";")&&(e.width=T),U&&!U.includes(";")&&(e.height=U);const t=React.createElement("img",{src:R,alt:k?.alt||(0,a.__)("Theme image preview","happyprime"),style:Object.keys(e).length>0?e:void 0});I=c?React.createElement("a",{href:c,target:m,rel:h},t):t}else I=React.createElement("div",{className:"theme-image-placeholder"},(0,a.__)("Select a theme image from the sidebar","happyprime"));const N=s&&$&&!c?{...S,dangerouslySetInnerHTML:{__html:$}}:S;return React.createElement(React.Fragment,null,R&&React.createElement(e.BlockControls,{group:"block"},React.createElement(l.ToolbarButton,{icon:"admin-links",label:(0,a.__)("Link","happyprime"),onClick:()=>_(!0),isActive:!!c}),c&&React.createElement(l.ToolbarButton,{icon:"editor-unlink",label:(0,a.__)("Unlink","happyprime"),onClick:()=>{i({linkUrl:"",linkTarget:"",linkRel:""})}})),y&&React.createElement(l.Popover,{position:"bottom center",onClose:()=>_(!1),anchor:document.querySelector(".wp-block-happyprime-theme-image")},React.createElement(e.__experimentalLinkControl,{value:{url:c,opensInNewTab:"_blank"===m,nofollow:h?.includes("nofollow")},onChange:e=>{const t=[];e?.opensInNewTab&&t.push("noopener","noreferrer"),e?.nofollow&&t.push("nofollow"),i({linkUrl:e?.url||"",linkTarget:e?.opensInNewTab?"_blank":"",linkRel:t.join(" ")})},onRemove:()=>{i({linkUrl:"",linkTarget:"",linkRel:""}),_(!1)},settings:[{id:"opensInNewTab",title:(0,a.__)("Open in new tab","happyprime")},{id:"nofollow",title:(0,a.__)("Mark as nofollow","happyprime")}]})),React.createElement(e.InspectorControls,null,React.createElement(l.PanelBody,{title:(0,a.__)("Settings","happyprime"),initialOpen:!0},React.createElement(l.SelectControl,{label:(0,a.__)("Theme Image","happyprime"),value:o,options:w,onChange:e=>{i({themeImage:e,imageSize:"original"})},help:(0,a.__)("Select an image from the theme directory.","happyprime")}),k&&k.variations&&Object.keys(k.variations).length>0&&React.createElement(l.SelectControl,{label:(0,a.__)("Size","happyprime"),value:r,options:v,onChange:e=>i({imageSize:e}),help:(0,a.__)("Select the image size variation.","happyprime")}),React.createElement(l.SelectControl,{label:(0,a.__)("Image Style","happyprime"),value:p,options:[{value:"",label:(0,a.__)("Default","happyprime")},...b.map(e=>({value:e.slug,label:e.name}))],onChange:e=>i({imageStyle:e}),help:(0,a.__)("Select a registered style to control image dimensions.","happyprime")}),E&&React.createElement(l.ToggleControl,{label:(0,a.__)("Inline SVG","happyprime"),checked:s,onChange:e=>i({inlineSVG:e}),help:(0,a.__)("Render SVG code inline for better styling control.","happyprime")}))),React.createElement("div",N,I))}})})(); \ 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,i=JSON.parse('{"UU":"happyprime/theme-image"}');(0,t.registerBlockType)(i.UU,{edit:function({attributes:t,setAttributes:i}){const{themeImage:o,imageSize:r,imageStyle:p,inlineSVG:s,linkUrl:c,linkTarget:m,linkRel:h}=t,[g,u]=(0,n.useState)(null),[y,_]=(0,n.useState)(!1),d=happyprimeData?.images||[],b=happyprimeData?.styles||[],w=[{value:"",label:(0,a.__)("Select an image","happyprime")},...d.map(e=>({value:e.slug,label:e.label}))],k=d.find(e=>e.slug===o),v=[{value:"original",label:(0,a.__)("Original","happyprime")}];k&&k.variations&&Object.keys(k.variations).forEach(e=>{const t=e.charAt(0).toUpperCase()+e.slice(1);v.push({value:e,label:t})});let f=k?.value||"";k&&"original"!==r&&k.variations&&k.variations[r]&&(f=k.variations[r].path),(0,n.useEffect)(()=>{if(s&&f&&f.toLowerCase().endsWith(".svg")){const e=`${happyprimeData.themeUrl}/${f}`;fetch(e).then(e=>e.text()).then(e=>{const t=e.replace(/^<\?xml\s+.*?\?>\s*/s,"");u(t)}).catch(e=>{console.error("Failed to fetch SVG:",e),u(null)})}else u(null)},[s,f]);const S=(0,e.useBlockProps)({className:s?"has-inline-svg":""}),R=f&&happyprimeData?.themeUrl?`${happyprimeData.themeUrl}/${f}`:"",E=f&&f.toLowerCase().endsWith(".svg"),C=b.find(e=>e.slug===p),T=C?.width||"",U=C?.height||"";let I,$=null;if(s&&g){const e=[];T&&!T.includes(";")?e.push(`width: ${T}`):T||e.push("width: 100%"),U&&!U.includes(";")&&e.push(`height: ${U}`);const t=e.join("; "),l=g.match(/]*)>/);if(l){const e=l[1].match(/style="([^"]*)"/);if(e){const l=e[1];$=g.replace(/]*)>/,e=>e.replace(/style="[^"]*"/,`style="${l}; ${t}"`))}else $=g.replace(/]*)>/,``)}}if(R)if(s&&$)I=c?React.createElement("a",{href:c,target:m,rel:h,dangerouslySetInnerHTML:{__html:$}}):null;else{const e={};T&&!T.includes(";")&&(e.width=T),U&&!U.includes(";")&&(e.height=U);const t=React.createElement("img",{src:R,alt:k?.alt||(0,a.__)("Theme image preview","happyprime"),style:Object.keys(e).length>0?e:void 0});I=c?React.createElement("a",{href:c,target:m,rel:h},t):t}else I=React.createElement("div",{className:"theme-image-placeholder"},(0,a.__)("Select a theme image from the sidebar","happyprime"));const N=s&&$&&!c?{...S,dangerouslySetInnerHTML:{__html:$}}:S;return React.createElement(React.Fragment,null,R&&React.createElement(e.BlockControls,{group:"block"},React.createElement(l.ToolbarButton,{icon:"admin-links",label:(0,a.__)("Link","happyprime"),onClick:()=>_(!0),isActive:!!c}),c&&React.createElement(l.ToolbarButton,{icon:"editor-unlink",label:(0,a.__)("Unlink","happyprime"),onClick:()=>{i({linkUrl:"",linkTarget:"",linkRel:""})}})),y&&React.createElement(l.Popover,{position:"bottom center",onClose:()=>_(!1),anchor:document.querySelector(".wp-block-happyprime-theme-image")},React.createElement(e.__experimentalLinkControl,{value:{url:c,opensInNewTab:"_blank"===m,nofollow:h?.includes("nofollow")},onChange:e=>{const t=[];e?.opensInNewTab&&t.push("noopener","noreferrer"),e?.nofollow&&t.push("nofollow"),i({linkUrl:e?.url||"",linkTarget:e?.opensInNewTab?"_blank":"",linkRel:t.join(" ")})},onRemove:()=>{i({linkUrl:"",linkTarget:"",linkRel:""}),_(!1)},settings:[{id:"opensInNewTab",title:(0,a.__)("Open in new tab","happyprime")},{id:"nofollow",title:(0,a.__)("Mark as nofollow","happyprime")}]})),React.createElement(e.InspectorControls,null,React.createElement(l.PanelBody,{title:(0,a.__)("Settings","happyprime"),initialOpen:!0},React.createElement(l.SelectControl,{label:(0,a.__)("Theme Image","happyprime"),value:o,options:w,onChange:e=>{i({themeImage:e,imageSize:"original"})},help:(0,a.__)("Select an image from the theme directory.","happyprime")}),k&&k.variations&&Object.keys(k.variations).length>0&&React.createElement(l.SelectControl,{label:(0,a.__)("Size","happyprime"),value:r,options:v,onChange:e=>i({imageSize:e}),help:(0,a.__)("Select the image size variation.","happyprime")}),React.createElement(l.SelectControl,{label:(0,a.__)("Image Style","happyprime"),value:p,options:[{value:"",label:(0,a.__)("Default","happyprime")},...b.map(e=>({value:e.slug,label:e.name}))],onChange:e=>i({imageStyle:e}),help:(0,a.__)("Select a registered style to control image dimensions.","happyprime")}),E&&React.createElement(l.ToggleControl,{label:(0,a.__)("Inline SVG","happyprime"),checked:s,onChange:e=>i({inlineSVG:e}),help:(0,a.__)("Render SVG code inline for better styling control.","happyprime")}))),React.createElement("figure",N,I))}})})(); \ No newline at end of file diff --git a/blocks/src/theme-image/index.js b/blocks/src/theme-image/index.js index 6400065..e4ff03a 100644 --- a/blocks/src/theme-image/index.js +++ b/blocks/src/theme-image/index.js @@ -171,7 +171,7 @@ function Edit({ attributes, setAttributes }) { } // Build content based on image type and link settings - // Structure matches server-side:
+ // Structure matches server-side:
let content; if (!imageUrl) { content = ( @@ -181,7 +181,7 @@ function Edit({ attributes, setAttributes }) { ); } else if (inlineSVG && processedSvg) { // For inline SVG, apply dangerouslySetInnerHTML to link or wrapper - // to match server-side structure without extra div wrapper + // to match server-side structure without extra figure wrapper if (linkUrl) { content = ( ); } else { - // Will be applied to wrapper div via blockProps below + // Will be applied to wrapper figure via blockProps below content = null; } } else { @@ -390,7 +390,7 @@ function Edit({ attributes, setAttributes }) { -
{content}
+
{content}
); } diff --git a/src/Block.php b/src/Block.php index 68e378a..c394634 100644 --- a/src/Block.php +++ b/src/Block.php @@ -193,7 +193,7 @@ public static function render( $attributes, $content ): string { $wrapper_attrs = array( 'class' => implode( ' ', $wrapper_classes ) ); return sprintf( - '
%s
', + '
%s
', get_block_wrapper_attributes( $wrapper_attrs ), $content );