diff --git a/blocks/build/theme-image/index.asset.php b/blocks/build/theme-image/index.asset.php index 314a43a..03c0d64 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' => '95ac8f679f8ef172d938'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '5e96b1561a816d0448de'); diff --git a/blocks/build/theme-image/index.js b/blocks/build/theme-image/index.js index 091ab2d..bf1755c 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=window.ReactJSXRuntime,o=window.wp.primitives;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"})});const r=JSON.parse('{"UU":"happyprime/theme-image"}');(0,t.registerBlockType)(r.UU,{edit:function({attributes:t,setAttributes:i}){const{themeImage:o,imageSize:r,imageStyle:m,inlineSVG:s,linkUrl:h,linkTarget:g,linkRel:p}=t,[k,b]=(0,n.useState)(null),[u,_]=(0,n.useState)(!1),w=happyprimeData?.images||[],v=happyprimeData?.styles||[],d=[{value:"",label:(0,a.__)("Select an image","theme-image-block")},...w.map(e=>({value:e.slug,label:e.label}))],S=w.find(e=>e.slug===o),R=[{value:"original",label:(0,a.__)("Original","theme-image-block")}];S&&S.variations&&Object.keys(S.variations).forEach(e=>{const t=S.variations[e];R.push({value:e,label:t.name||e})});let f=S?.value||"";S&&"original"!==r&&S.variations&&S.variations[r]&&(f=S.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=>{b(e)}).catch(e=>{console.error("Failed to fetch SVG:",e),b(null)})}else b(null)},[s,f]);const y=(0,e.useBlockProps)({className:s?"has-inline-svg":""}),E=f&&happyprimeData?.themeUrl?`${happyprimeData.themeUrl}/${f}`:"",C=f&&f.toLowerCase().endsWith(".svg"),T=v.find(e=>e.slug===m),I=T?.width||"",U=T?.height||"";let V,$=null;if(s&&k){const e=[];I?e.push(`width: ${I}`):I||e.push("width: 100%"),U&&e.push(`height: ${U}`);const t=e.join("; "),l=k.match(/]*)>/);if(l){const e=l[1].match(/style="([^"]*)"/);if(e){const l=e[1];$=k.replace(/]*)>/,e=>e.replace(/style="[^"]*"/,`style="${l}; ${t}"`))}else $=k.replace(/]*)>/,``)}}if(E)if(s&&$)V=h?React.createElement("a",{href:h,target:g,rel:p,dangerouslySetInnerHTML:{__html:$}}):null;else{const e={};I&&(e.width=I),U&&(e.height=U);const t=React.createElement("img",{src:E,alt:S?.alt||(0,a.__)("Theme image preview","theme-image-block"),style:Object.keys(e).length>0?e:void 0});V=h?React.createElement("a",{href:h,target:g,rel:p},t):t}else V=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 B=s&&$&&!h?{...y,dangerouslySetInnerHTML:{__html:$}}:y;return React.createElement(React.Fragment,null,E&&React.createElement(e.BlockControls,{group:"block"},React.createElement(l.ToolbarButton,{icon:"admin-links",label:(0,a.__)("Link","theme-image-block"),onClick:()=>_(!0),isActive:!!h}),h&&React.createElement(l.ToolbarButton,{icon:"editor-unlink",label:(0,a.__)("Unlink","theme-image-block"),onClick:()=>{i({linkUrl:"",linkTarget:"",linkRel:""})}})),u&&React.createElement(l.Popover,{position:"bottom center",onClose:()=>_(!1),anchor:document.querySelector(".wp-block-happyprime-theme-image")},React.createElement(e.__experimentalLinkControl,{value:{url:h,opensInNewTab:"_blank"===g,nofollow:p?.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","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:o,options:d,onChange:e=>{i({themeImage:e,imageSize:"original"})},help:(0,a.__)("Select a registered theme image.","theme-image-block")}),S&&S.variations&&Object.keys(S.variations).length>0&&React.createElement(l.SelectControl,{label:(0,a.__)("Variation","theme-image-block"),value:r,options:R,onChange:e=>i({imageSize:e}),help:(0,a.__)("Select the image variation.","theme-image-block")}),React.createElement(l.SelectControl,{label:(0,a.__)("Style","theme-image-block"),value:m,options:[{value:"",label:(0,a.__)("Default","theme-image-block")},...v.map(e=>({value:e.slug,label:e.name}))],onChange:e=>i({imageStyle:e}),help:(0,a.__)("Select a registered style to apply.","theme-image-block")}),C&&React.createElement(l.ToggleControl,{label:(0,a.__)("Inline SVG","theme-image-block"),checked:s,onChange:e=>i({inlineSVG:e}),help:(0,a.__)("Render SVG code inline.","theme-image-block")}))),React.createElement("figure",B,V))}})})(); \ 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.ReactJSXRuntime,i=window.wp.primitives;var c=(0,o.jsx)(i.SVG,{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,o.jsx)(i.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,o.jsx)(i.SVG,{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,o.jsx)(i.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:v}=t,[d,w]=(0,n.useState)(null),[R,f]=(0,n.useState)(!1),S=happyprimeData?.images||[],y=happyprimeData?.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&&d){const e=[];$?e.push(`width: ${$}`):$||e.push("width: 100%"),j&&e.push(`height: ${j}`);const t=e.join("; "),l=d.match(/]*)>/);if(l){const e=l[1].match(/style="([^"]*)"/);if(e){const l=e[1];L=d.replace(/]*)>/,e=>e.replace(/style="[^"]*"/,`style="${l}; ${t}"`))}else L=d.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")}),!v&&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:v,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 diff --git a/blocks/src/theme-image/block.json b/blocks/src/theme-image/block.json index 5925298..da1ddd6 100644 --- a/blocks/src/theme-image/block.json +++ b/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" } diff --git a/blocks/src/theme-image/index.js b/blocks/src/theme-image/index.js index 39179fb..02dc022 100644 --- a/blocks/src/theme-image/index.js +++ b/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 }) { { 0 ? imgStyles : undefined @@ -262,6 +269,12 @@ function Edit({ attributes, setAttributes }) { }} /> )} + setAttributes({ showCaption: !showCaption })} + isActive={showCaption} + /> )} @@ -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 && ( + + setAttributes({ altText: value }) + } + placeholder={currentImage?.alt || ''} + help={__( + 'Alternative text for the image. Leave empty to use the registered default.', + 'theme-image-block' + )} + /> + )} + + + setAttributes({ omitAltText: value }) + } + help={__( + 'Output empty alt text, even if a registered value exists.', + 'theme-image-block' + )} + /> -
{content}
+
+ {content} + {imageUrl && showCaption && ( + setAttributes({ caption: value })} + allowedFormats={[ + 'core/bold', + 'core/italic', + 'core/link', + ]} + /> + )} +
); } diff --git a/blocks/src/theme-image/style.css b/blocks/src/theme-image/style.css new file mode 100644 index 0000000..b60808c --- /dev/null +++ b/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; +} diff --git a/src/Block.php b/src/Block.php index 825c6f7..9bb33a5 100644 --- a/src/Block.php +++ b/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( '
%s
', $caption ); + } + $wrapper_attrs = array( 'class' => implode( ' ', $wrapper_classes ) ); return sprintf( diff --git a/src/Registry.php b/src/Registry.php index c7111db..f484b17 100644 --- a/src/Registry.php +++ b/src/Registry.php @@ -18,9 +18,12 @@ class Registry { * title: string, * description: string, * alt: string, + * caption: string, * path: string, * width: string, * height: string, + * max_width: string, + * max_height: string, * variations: array, * sizes: string * }> @@ -37,9 +40,12 @@ class Registry { * @type string $title Display title for the image (required). * @type string $description Description of the image (optional). * @type string $alt Default alt text for the image (optional). + * @type string $caption Default caption for the image (optional). * @type string $path Path to the image file relative to the theme directory (required). * @type string $width Default width value (optional). * @type string $height Default height value (optional). + * @type string $max_width Max width to apply to the image element (optional). + * @type string $max_height Max height to apply to the image element (optional). * @type array $variations Array of image variations for srcset (optional). * @type string $sizes Value for the sizes attribute (optional). * } @@ -78,9 +84,12 @@ public static function register( string $slug, array $args ): bool { 'title' => '', 'description' => '', 'alt' => '', + 'caption' => '', 'path' => '', 'width' => '', 'height' => '', + 'max_width' => '', + 'max_height' => '', 'variations' => array(), 'sizes' => '', ); @@ -92,9 +101,12 @@ public static function register( string $slug, array $args ): bool { 'title' => sanitize_text_field( $args['title'] ), 'description' => sanitize_text_field( $args['description'] ), 'alt' => sanitize_text_field( $args['alt'] ), + 'caption' => sanitize_text_field( $args['caption'] ), 'path' => sanitize_text_field( $args['path'] ), 'width' => sanitize_text_field( $args['width'] ), 'height' => sanitize_text_field( $args['height'] ), + 'max_width' => sanitize_text_field( $args['max_width'] ), + 'max_height' => sanitize_text_field( $args['max_height'] ), 'variations' => self::sanitize_variations( $args['variations'] ), 'sizes' => sanitize_text_field( $args['sizes'] ), ); @@ -109,9 +121,12 @@ public static function register( string $slug, array $args ): bool { * title: string, * description: string, * alt: string, + * caption: string, * path: string, * width: string, * height: string, + * max_width: string, + * max_height: string, * variations: array, * sizes: string * }> Registered images, keyed by image slug. @@ -129,9 +144,12 @@ public static function get_all(): array { * title: string, * description: string, * alt: string, + * caption: string, * path: string, * width: string, * height: string, + * max_width: string, + * max_height: string, * variations: array, * sizes: string * }|null Image data or null if not found. @@ -188,8 +206,11 @@ public static function get_for_editor(): array { 'label' => $data['title'], 'description' => $data['description'], 'alt' => $data['alt'], + 'caption' => $data['caption'], 'width' => $data['width'], 'height' => $data['height'], + 'max_width' => $data['max_width'], + 'max_height' => $data['max_height'], 'variations' => $data['variations'], 'sizes' => $data['sizes'], ); diff --git a/src/SVG.php b/src/SVG.php index 519dfac..fba9b17 100644 --- a/src/SVG.php +++ b/src/SVG.php @@ -26,9 +26,11 @@ public static function get( string $path, array $args = array() ): string { } $defaults = array( - 'alt' => '', - 'width' => '', - 'height' => '', + 'alt' => '', + 'width' => '', + 'height' => '', + 'max_width' => '', + 'max_height' => '', ); $args = wp_parse_args( $args, $defaults ); @@ -45,7 +47,7 @@ public static function get( string $path, array $args = array() ): string { $processor->set_attribute( 'focusable', 'false' ); - // Apply width/height to SVG if set. + // Apply width/height/max-width/max-height to SVG if set. $inline_styles = array(); if ( $args['width'] ) { $inline_styles[] = 'width: ' . $args['width']; @@ -53,6 +55,12 @@ public static function get( string $path, array $args = array() ): string { if ( $args['height'] ) { $inline_styles[] = 'height: ' . $args['height']; } + if ( $args['max_width'] ) { + $inline_styles[] = 'max-width: ' . $args['max_width']; + } + if ( $args['max_height'] ) { + $inline_styles[] = 'max-height: ' . $args['max_height']; + } if ( ! empty( $inline_styles ) ) { $processor->set_attribute( 'style', implode( '; ', $inline_styles ) ); }