Skip to content

Icon Block: Move default width rule to theme.json instead of block.json #75653

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
ramonjd merged 4 commits into from
Feb 18, 2026
Merged

Icon Block: Move default width rule to theme.json instead of block.json #75653

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cd2708c
Icon Block: Move default width rule to theme.json instead of block.json
andrewserong Feb 18, 2026
233faf4
Update fixture
andrewserong Feb 18, 2026
c04d914
Add simpler placeholder component that's just an SVG so it inherits w…
andrewserong Feb 18, 2026
5b03b7c
Move import
andrewserong Feb 18, 2026
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
Prev Previous commit
Next Next commit
Add simpler placeholder component that's just an SVG so it inherits w… 
…idth and height as expected
  • Loading branch information
@andrewserong @ramonjd
andrewserong authored and ramonjd committed Feb 18, 2026
commit c04d91466849b675bb709bb2037fccff9831a5d5
28 changes: 24 additions & 4 deletions packages/block-library/src/icon/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
ToolbarGroup,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
Placeholder,
} from '@wordpress/components';
import {
BlockControls,
Expand All @@ -33,11 +32,33 @@ import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import { SVG, Rect, Path } from '@wordpress/primitives';

import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
import HtmlRenderer from '../utils/html-renderer';
import { CustomInserterModal } from './components';
import { unlock } from '../lock-unlock';

const IconPlaceholder = ( { className, style } ) => (
<SVG
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 60 60"
preserveAspectRatio="none"
fill="none"
aria-hidden="true"
className={ clsx( 'wp-block-icon__placeholder', className ) }
style={ style }
>
<Rect width="60" height="60" fill="currentColor" fillOpacity={ 0.1 } />
<Path
vectorEffect="non-scaling-stroke"
stroke="currentColor"
strokeOpacity={ 0.25 }
d="M60 60 0 0"
/>
</SVG>
);

export function Edit( { attributes, setAttributes } ) {
const { icon, ariaLabel } = attributes;

Expand Down Expand Up @@ -165,8 +186,7 @@ export function Edit( { attributes, setAttributes } ) {
} }
/>
) : (
<Placeholder
withIllustration
<IconPlaceholder
className={ clsx(
borderProps.className,
spacingProps.className,
Expand All @@ -176,7 +196,7 @@ export function Edit( { attributes, setAttributes } ) {
...borderProps.style,
...spacingProps.style,
...dimensionsProps.style,
aspectRatio: '1',
height: 'auto',
Comment on lines 188 to 198
Copy link
Member

@ramonjd ramonjd Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

Looking at packages/components/src/placeholder/index.tsx I don't see any benefit <Placeholder /> has given the props passed to it.

Kapture.2026-02-18.at.16.37.28.mp4

Copy link
Contributor Author

@andrewserong andrewserong Feb 18, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, my gut feeling is that the generalised Placeholder is a good component for more complex use cases than this block. But I imagine we can also iterate on the placeholder state further in follow-ups if need be.

} }
/>
) }
Expand Down
10 changes: 2 additions & 8 deletions packages/block-library/src/icon/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,6 @@
width: 250px;
}

// Provide special styling for the placeholder.
// @todo this particular minimal style of placeholder could be componentized further.
.wp-block-icon .components-placeholder {
padding: 0;
min-height: $grid-unit-30;
min-width: $grid-unit-30;
height: 100%;
width: 100%;
.wp-block-icon__placeholder {
backdrop-filter: blur(100px);
}