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

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: do not announce a result when the block list is empty 
An empty list renders its message as the wrapper's only child, so the
child count read for the announcement was 1 and a screen reader heard
"1 result found." alongside "You haven't customized any blocks yet."

Reachable on the filter's own path, where the list can be empty with no
search term, so count the children only when there are results.
  • Loading branch information
@ramonjd
ramonjd committed Aug 18, 2026
commit 818fff543a9f8ca05d46fd4ca539d36014903504
9 changes: 7 additions & 2 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 @@ -243,6 +243,7 @@ function BlockList( { filterValue, styleFilter }: BlockListProps ) {
const blockTypesListRef = useRef< HTMLDivElement >( null );

// Announce result count on change
const hasResults = filteredBlockTypes.length > 0;
useEffect( () => {
if ( ! filterValue && styleFilter === 'all' ) {
return;
Expand All @@ -255,14 +256,18 @@ function BlockList( { filterValue, styleFilter }: BlockListProps ) {
// fragile and depends on the number of rendered elements of `BlockMenuItem`,
// which is now one.
// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116
const count = blockTypesListRef.current?.childElementCount || 0;
// An empty list renders the empty state message as its only child, so
// only count the children when there are results to count.
const count = hasResults
? blockTypesListRef.current?.childElementCount || 0
: 0;
const resultsFoundMessage = sprintf(
/* translators: %d: number of results. */
_n( '%d result found.', '%d results found.', count ),
count
);
debouncedSpeak( resultsFoundMessage, 'polite' );
}, [ filterValue, styleFilter, debouncedSpeak ] );
}, [ filterValue, styleFilter, hasResults, debouncedSpeak ] );

return (
<div
Expand Down
Loading