Skip to content

Commit 5d556fa

Browse files
MaggieCabreraclaude
MaggieCabrera
and
claude
committed
Global Styles: List elements without icons
Whether elements need icons is still open in #84074, so start without them and drop the formInput icon this PR added to @wordpress/icons. Also restore the icons changelog line this PR reformatted by accident. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
1 parent eb75cab commit 5d556fa

4 files changed

Lines changed: 14 additions & 73 deletions

File tree

‎packages/global-styles-ui/src/screen-block-list.tsx‎

Lines changed: 13 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -29,22 +29,7 @@ import {
2929
} from '@wordpress/block-editor';
3030
import { useDebounce } from '@wordpress/compose';
3131
import { speak } from '@wordpress/a11y';
32-
import {
33-
button,
34-
caption,
35-
chevronUpDown,
36-
formInput,
37-
funnel,
38-
heading,
39-
headingLevel1,
40-
headingLevel2,
41-
headingLevel3,
42-
headingLevel4,
43-
headingLevel5,
44-
headingLevel6,
45-
link,
46-
quote,
47-
} from '@wordpress/icons';
32+
import { funnel } from '@wordpress/icons';
4833
import { useBlockVariations } from './variations/variations-panel';
4934
import { ScreenHeader } from './screen-header';
5035
import { NavigationButtonAsItem } from './navigation-button';
@@ -64,48 +49,26 @@ const {
6449
searchItems,
6550
} = unlock( blockEditorPrivateApis );
6651

67-
interface ElementItem {
68-
/** The element's key under `styles.elements`. */
69-
name: ElementName;
70-
icon: any;
71-
}
72-
7352
/*
7453
* Elements are listed alongside blocks, grouped under subheadings, so that
7554
* anything styleable is one list away rather than behind its own drilldown.
7655
* Their labels are the titles of their screens, singular to match how blocks
7756
* are listed.
7857
*/
79-
const ELEMENT_GROUPS: { title: string; elements: ElementItem[] }[] = [
58+
const ELEMENT_GROUPS: { title: string; elements: ElementName[] }[] = [
8059
{
8160
title: __( 'Elements' ),
82-
elements: [
83-
{ name: 'link', icon: link },
84-
{ name: 'caption', icon: caption },
85-
{ name: 'cite', icon: quote },
86-
],
61+
elements: [ 'link', 'caption', 'cite' ],
8762
},
8863
{
8964
title: __( 'Headings' ),
90-
elements: [
91-
// `heading` styles every level at once; each level can then
92-
// override it. Themes set most of their heading styles here.
93-
{ name: 'heading', icon: heading },
94-
{ name: 'h1', icon: headingLevel1 },
95-
{ name: 'h2', icon: headingLevel2 },
96-
{ name: 'h3', icon: headingLevel3 },
97-
{ name: 'h4', icon: headingLevel4 },
98-
{ name: 'h5', icon: headingLevel5 },
99-
{ name: 'h6', icon: headingLevel6 },
100-
],
65+
// `heading` styles every level at once; each level can then override
66+
// it. Themes set most of their heading styles here.
67+
elements: [ 'heading', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
10168
},
10269
{
10370
title: __( 'Form controls' ),
104-
elements: [
105-
{ name: 'textInput', icon: formInput },
106-
{ name: 'select', icon: chevronUpDown },
107-
{ name: 'button', icon: button },
108-
],
71+
elements: [ 'textInput', 'select', 'button' ],
10972
},
11073
];
11174

@@ -227,16 +190,10 @@ function BlockMenuItem( { block }: BlockMenuItemProps ) {
227190
);
228191
}
229192

230-
function ElementMenuItem( { element }: { element: ElementItem } ) {
193+
function ElementMenuItem( { element }: { element: ElementName } ) {
231194
return (
232-
<NavigationButtonAsItem path={ '/blocks/elements/' + element.name }>
233-
<HStack justify="flex-start" spacing={ 2 }>
234-
<BlockIcon
235-
className="global-styles-ui-block-types-item__icon"
236-
icon={ element.icon }
237-
/>
238-
<FlexItem>{ ELEMENTS[ element.name ].title }</FlexItem>
239-
</HStack>
195+
<NavigationButtonAsItem path={ '/blocks/elements/' + element }>
196+
{ ELEMENTS[ element ].title }
240197
</NavigationButtonAsItem>
241198
);
242199
}
@@ -299,16 +256,12 @@ function getFilteredElementGroups(
299256
// The element's name and group title match too, so "h1" finds
300257
// Heading 1 and "form" lists the form controls.
301258
( ! search ||
302-
[
303-
ELEMENTS[ element.name ].title,
304-
element.name,
305-
group.title,
306-
]
259+
[ ELEMENTS[ element ].title, element, group.title ]
307260
.join( ' ' )
308261
.toLowerCase()
309262
.includes( search ) ) &&
310263
( styleFilter !== 'customized' ||
311-
customizedElementNames.has( element.name ) )
264+
customizedElementNames.has( element ) )
312265
),
313266
} ) ).filter( ( group ) => group.elements.length > 0 );
314267
}
@@ -422,7 +375,7 @@ function BlockAndElementList( { filterValue, styleFilter }: ListProps ) {
422375
<ItemGroup>
423376
{ group.elements.map( ( element ) => (
424377
<ElementMenuItem
425-
key={ element.name }
378+
key={ element }
426379
element={ element }
427380
/>
428381
) ) }

‎packages/icons/CHANGELOG.md‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@
1010

1111
- `manifest.json`: Add 18 popular admin menu icons to the `core-admin` collection ([#85072](https://github.com/WordPress/gutenberg/pull/85072)).
1212

13-
### New Features
14-
15-
- Add the `formInput` icon, used by the Global Styles form control screens ([#81645](https://github.com/WordPress/gutenberg/pull/81645)).
16-
1713
## 18.0.0 (2026-10-07)
1814

1915
### Breaking Changes
@@ -145,7 +141,7 @@
145141

146142
### Breaking Changes
147143

148-
- Rename Tabs-related icons: `tabs-menu` to `tab-list`, `tabs-menu-item` to `tab`, and `tab` to `tab-panel`. ([#77418](https://github.com/WordPress/gutenberg/pull/77418))
144+
- Rename Tabs-related icons: `tabs-menu` to `tab-list`, `tabs-menu-item` to `tab`, and `tab` to `tab-panel`. ([#77418](https://github.com/WordPress/gutenberg/pull/77418))
149145

150146
## 12.2.0 (2026-04-15)
151147

‎packages/icons/src/library/form-input.svg‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/icons/src/manifest.json‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -588,11 +588,6 @@
588588
"label": "Footer",
589589
"filePath": "library/footer.svg"
590590
},
591-
{
592-
"slug": "form-input",
593-
"label": "Form Input",
594-
"filePath": "library/form-input.svg"
595-
},
596591
{
597592
"slug": "format-bold",
598593
"label": "Format Bold",

0 commit comments

Comments
 (0)