Restore category search filter using Gutenberg components#80
Conversation
The Gutenberg modernization removed the category search/filter that existed in the old jQuery-based Press This. This restores it using native Gutenberg component primitives (SearchControl, CheckboxControl, TreeSelect) with hierarchical tree rendering and tree-aware filtering. Extracts category UI into a dedicated CategoryPanel component, reducing PressThisEditor.js by ~250 lines. Adds buildTermsTree and getFilterMatcher utilities ported from @wordpress/editor. Fixes #73
There was a problem hiding this comment.
Pull request overview
Restores the lost Press This category search/filter experience using Gutenberg component primitives by extracting category UI/logic into a dedicated React component and adding reusable term tree utilities + tests.
Changes:
- Added
CategoryPanelcomponent implementing hierarchical category rendering, filtering, and “Add New Category” UI. - Added pure
termsutilities for building/filtering a term tree (ported from Gutenberg), with accompanying unit tests. - Updated editor + styles and added direct dependencies for a11y announcements and HTML entity decoding.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/components/PressThisEditor.js |
Replaces inline categories UI/state with <CategoryPanel /> integration. |
src/components/CategoryPanel.js |
New hierarchical categories panel with search/filter, a11y speak, and add-category flow. |
src/utils/terms.js |
New pure utilities for term tree building, filtering, and HTML entity decoding. |
tests/utils/terms.test.js |
New unit tests covering term tree building/filtering and entity decoding. |
src/styles/main.scss |
Removes old inline category styles (intended to defer to CategoryPanel styling). |
src/styles/partials/_categories-panel.scss |
Updates styles for Gutenberg controls + hierarchical indentation. |
package.json |
Adds @wordpress/a11y and @wordpress/html-entities direct dependencies. |
package-lock.json |
Locks new direct dependencies and related WordPress package versions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Import _categories-panel.scss partial in main.scss so its styles are included in the built CSS. - Add @use "variables" to the partial, matching all other partials. - Derive filteredTermsTree via useMemo instead of state so filtered results stay in sync when categories change mid-filter.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Replace setFilter callback with a useEffect that announces screen reader results from the already-derived filteredTermsTree, avoiding redundant filtering on every keystroke. - Update JSDoc for onSelectionChange/onCategoriesChange to reflect that they are React setState dispatchers accepting updater functions.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Use the functional form of onSelectionChange so rapid toggles under React state batching compose correctly instead of reading a potentially stale selectedCategories from the closure.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 8 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
The fallback list in get_script_dependencies() was missing several handles (wp-a11y, wp-block-library, wp-dom-ready, wp-format-library, wp-html-entities, wp-primitives, react-jsx-runtime) and included wp-rich-text which is no longer a direct dependency. Synced with the authoritative build/press-this-editor.asset.php output. Also adds CLAUDE.md with a maintenance reminder to keep the fallback list in sync when @wordpress/* imports change.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 10 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary
@wordpress/componentsprimitives (SearchControl,CheckboxControl,TreeSelect)CategoryPanelcomponent, reducingPressThisEditor.jsby ~250 linesDetails
The old jQuery-based Press This had a
.categories-searchinput above the category list (assets/press-this.js:842-863). During the Gutenberg modernization (354ccf3), this was not ported to the new React-based editor.New files
src/utils/terms.js—buildTermsTree()andgetFilterMatcher()ported from@wordpress/editor(pure functions, no store dependencies)src/components/CategoryPanel.js— self-contained category panel componenttests/utils/terms.test.js— 16 tests covering tree building and filteringChanged files
src/components/PressThisEditor.js— inline category state/logic replaced with<CategoryPanel />src/styles/main.scss— removed duplicate inline category stylessrc/styles/partials/_categories-panel.scss— simplified forCheckboxControlmarkup and hierarchical indentationpackage.json— added@wordpress/a11yand@wordpress/html-entitiesas direct dependenciesBehavior
MIN_TERMS_COUNT_FOR_FILTER)speak()from@wordpress/a11yTreeSelectfor native hierarchy displayTest plan
npm run build)npm run lint)npm run test:js) — 16 new tests for term utilitiesFixes #73