Skip to content

Global Styles: filter and indicate blocks that have custom styles #81373

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 15 commits into from
Aug 18, 2026
Merged

Global Styles: filter and indicate blocks that have custom styles #81373

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c247330
Global Styles: add predicate for blocks with user styles
ramonjd Aug 10, 2026
6b3bc56
Global Styles: indicate blocks that have user styles
ramonjd Aug 10, 2026
fd1c32d
Global Styles: import VisuallyHidden from @wordpress/ui
ramonjd Aug 10, 2026
3cee8ef
Global Styles: add filter for blocks with user styles
ramonjd Aug 10, 2026
fad9022
Global Styles: remove filter tests that asserted a copy of the logic
ramonjd Aug 10, 2026
b60cf21
Global Styles: add changelog entry for block list filter
ramonjd Aug 10, 2026
186331b
Global Styles: tell apart the two empty states in the block list
ramonjd Aug 11, 2026
1da774e
Global Styles: summarize what changed on each block in the block list
ramonjd Aug 11, 2026
692af90
Tests: match the Heading row by prefix in push-to-global-styles
ramonjd Aug 11, 2026
e93ecc9
Global Styles: drop the "Changed:" prefix from the block summary
ramonjd Aug 11, 2026
b2519a2
Global Styles: say "No blocks found" when a search comes up empty
ramonjd Aug 17, 2026
b582168
Global Styles: mark customized blocks with a dot rather than a summary
ramonjd Aug 17, 2026
ea85b2f
Global Styles: match the block list empty state class to its markup
ramonjd Aug 17, 2026
818fff5
Global Styles: do not announce a result when the block list is empty
ramonjd Aug 18, 2026
06a1b96
Remove block types item BEM styles
ramonjd Aug 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
Global Styles: tell apart the two empty states in the block list 
When the list came back empty it always said "No blocks found.", which
reads as a search result even when the search box is empty and the
Customized filter is what emptied the list.

Split the message so a filtered-but-empty list says the user has not
customized anything yet, and move the search row's spacing onto the
grid-unit scale.
  • Loading branch information
@ramonjd
ramonjd committed Aug 18, 2026
commit 186331ba2c39a8c6e2db8f3ad94261b3275c8321
22 changes: 18 additions & 4 deletions packages/global-styles-ui/src/screen-block-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,22 @@ function BlockMenuItem( { block, isCustomized }: BlockMenuItemProps ) {
);
}

function EmptyBlockList( { styleFilter }: { styleFilter: StyleFilter } ) {
const label =
'customized' === styleFilter
? __( "You haven't customized any blocks yet." )
: __( 'No blocks found.' );
Comment thread
ramonjd marked this conversation as resolved.
Outdated
return (
<WCText
align="center"
as="p"
className="global-styles-ui-block-types-item-list__no-results"
>
{ label }
</WCText>
);
}

interface BlockListProps {
filterValue: string;
styleFilter: StyleFilter;
Expand All @@ -182,7 +198,6 @@ function BlockList( { filterValue, styleFilter }: BlockListProps ) {
const sortedBlockTypes = useSortedBlockTypes();
const debouncedSpeak = useDebounce( speak, 500 );
const { isMatchingSearchTerm } = useSelect( blocksStore );

const { user } = useContext( GlobalStylesContext );

// Computed once for the whole list rather than per row, so the list does
Expand Down Expand Up @@ -246,9 +261,7 @@ function BlockList( { filterValue, styleFilter }: BlockListProps ) {
role="list"
>
{ filteredBlockTypes.length === 0 ? (
<WCText align="center" as="p">
{ __( 'No blocks found.' ) }
</WCText>
<EmptyBlockList styleFilter={ styleFilter } />
) : (
filteredBlockTypes.map( ( block ) => (
<BlockMenuItem
Expand Down Expand Up @@ -288,6 +301,7 @@ function ScreenBlockList() {
value={ filterValue }
label={ __( 'Search' ) }
placeholder={ __( 'Search' ) }
size="compact"
/>
<Menu>
<Menu.TriggerButton
Expand Down
8 changes: 6 additions & 2 deletions packages/global-styles-ui/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
}

.global-styles-ui-block-types-filter {
margin-bottom: 10px;
padding: 0 16px;
margin-bottom: variables.$grid-unit-15;
padding: 0 variables.$grid-unit-20;
}

.global-styles-ui-block-types-search {
Expand All @@ -67,6 +67,10 @@
width: 6px;
}

.global-styles-ui-block-types-item-list__no-results {
padding-top: variables.$grid-unit-20;
}

.global-styles-ui-screen-typography__font-variants-count {
color: colors.$gray-700;
}
Expand Down