Skip to content

Add support for registered theme image sizes #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeremyfelt merged 1 commit into from
Nov 5, 2025
Merged

Add support for registered theme image sizes #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blocks/build/theme-image/index.asset.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '7a2b70d857e40af2cf1b');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'f97d82e990dc108628c4');
2 changes: 1 addition & 1 deletion blocks/build/theme-image/index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 4 additions & 8 deletions blocks/src/theme-image/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@
"type": "string",
"default": "original"
},
"imageStyle": {
"type": "string",
"default": ""
},
"inlineSVG": {
"type": "boolean",
"default": false
Expand All @@ -41,14 +45,6 @@
"linkRel": {
"type": "string",
"default": ""
},
"width": {
"type": "string",
"default": ""
},
"height": {
"type": "string",
"default": ""
}
},
"textdomain": "happyprime",
Expand Down
191 changes: 29 additions & 162 deletions blocks/src/theme-image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,9 @@ import { registerBlockType } from '@wordpress/blocks';
import {
PanelBody,
SelectControl,
TextControl,
ToggleControl,
Button,
ToolbarButton,
Popover,
__experimentalUnitControl as UnitControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';
Expand All @@ -38,34 +35,18 @@ function Edit({ attributes, setAttributes }) {
const {
themeImage,
imageSize,
imageStyle,
inlineSVG,
linkUrl,
linkTarget,
linkRel,
width,
height,
} = attributes;
const [isCustomWidth, setIsCustomWidth] = useState(false);
const [isCustomHeight, setIsCustomHeight] = useState(false);
const [svgContent, setSvgContent] = useState(null);
const [isEditingLink, setIsEditingLink] = useState(false);

// Check if width/height contains custom CSS functions
const hasCustomWidthCSS =
width &&
(width.includes('clamp') ||
width.includes('calc') ||
width.includes('min') ||
width.includes('max'));
const hasCustomHeightCSS =
height &&
(height.includes('clamp') ||
height.includes('calc') ||
height.includes('min') ||
height.includes('max'));

// Get registered theme images from localized data
// Get registered theme images and styles from localized data
const registeredImages = happyprimeData?.images || [];
const registeredStyles = happyprimeData?.styles || [];

// Build the options array for the SelectControl
const themeImages = [
Expand Down Expand Up @@ -139,10 +120,17 @@ function Edit({ attributes, setAttributes }) {
: '';
const isSVG = imagePath && imagePath.toLowerCase().endsWith('.svg');

// Get the selected style's dimensions
const currentStyle = registeredStyles.find(
(style) => style.slug === imageStyle
);
const width = currentStyle?.width || '';
const height = currentStyle?.height || '';

// Process inline SVG if needed
let processedSvg = null;
if (inlineSVG && svgContent) {
// Build styles array - use defaults if not specified for editor preview
// Build styles array for editor preview
// Validate to prevent CSS injection by rejecting values with semicolons
const styles = [];
if (width && !width.includes(';')) {
Expand Down Expand Up @@ -367,145 +355,24 @@ function Edit({ attributes, setAttributes }) {
/>
)}

{isCustomWidth || hasCustomWidthCSS ? (
<>
<TextControl
label={__('Width', 'happyprime')}
value={width}
onChange={(value) =>
setAttributes({ width: value })
}
help={
width && width.includes(';')
? __(
'Invalid value: semicolons are not allowed',
'happyprime'
)
: __(
'Enter any valid CSS value',
'happyprime'
)
}
placeholder="clamp(10rem, 50vw, 30rem)"
/>
<Button
variant="link"
onClick={() => {
setIsCustomWidth(false);
setAttributes({ width: '' });
}}
style={{
display: 'block',
marginTop: '-8px',
marginBottom: '16px',
}}
>
{__('Use preset units', 'happyprime')}
</Button>
</>
) : (
<>
<UnitControl
label={__('Width', 'happyprime')}
labelPosition="top"
__unstableInputWidth="80px"
value={width}
onChange={(value) =>
setAttributes({ width: value })
}
units={[
{ value: 'px', label: 'px', default: 0 },
{ value: '%', label: '%', default: 100 },
{ value: 'em', label: 'em', default: 0 },
{ value: 'rem', label: 'rem', default: 0 },
{ value: 'vw', label: 'vw', default: 0 },
{ value: 'vh', label: 'vh', default: 0 },
{ value: 'lh', label: 'lh', default: 1 },
]}
/>
<Button
variant="link"
onClick={() => setIsCustomWidth(true)}
style={{
display: 'block',
marginTop: '-8px',
marginBottom: '16px',
}}
>
{__('Use custom CSS', 'happyprime')}
</Button>
</>
)}

{isCustomHeight || hasCustomHeightCSS ? (
<>
<TextControl
label={__('Height', 'happyprime')}
value={height}
onChange={(value) =>
setAttributes({ height: value })
}
help={
height && height.includes(';')
? __(
'Invalid value: semicolons are not allowed',
'happyprime'
)
: __(
'Enter any valid CSS value',
'happyprime'
)
}
placeholder="clamp(10rem, 50vh, 30rem)"
/>
<Button
variant="link"
onClick={() => {
setIsCustomHeight(false);
setAttributes({ height: '' });
}}
style={{
display: 'block',
marginTop: '-8px',
marginBottom: '16px',
}}
>
{__('Use preset units', 'happyprime')}
</Button>
</>
) : (
<>
<UnitControl
label={__('Height', 'happyprime')}
labelPosition="top"
__unstableInputWidth="80px"
value={height}
onChange={(value) =>
setAttributes({ height: value })
}
units={[
{ value: 'px', label: 'px', default: 0 },
{ value: '%', label: '%', default: 100 },
{ value: 'em', label: 'em', default: 0 },
{ value: 'rem', label: 'rem', default: 0 },
{ value: 'vw', label: 'vw', default: 0 },
{ value: 'vh', label: 'vh', default: 0 },
{ value: 'lh', label: 'lh', default: 1 },
]}
/>
<Button
variant="link"
onClick={() => setIsCustomHeight(true)}
style={{
display: 'block',
marginTop: '-8px',
marginBottom: '16px',
}}
>
{__('Use custom CSS', 'happyprime')}
</Button>
</>
)}
<SelectControl
label={__('Image Style', 'happyprime')}
value={imageStyle}
options={[
{ value: '', label: __('Default', 'happyprime') },
...registeredStyles.map((style) => ({
value: style.slug,
label: style.name,
})),
]}
onChange={(value) =>
setAttributes({ imageStyle: value })
}
help={__(
'Select a registered style to control image dimensions.',
'happyprime'
)}
/>

{isSVG && (
<ToggleControl
Expand Down
Loading