Repository navigation
Icons: Add new form based icons. - #84074
Conversation
🤖 PR meta 🤖🎉 PropsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. Updated as activity occurs, without notifying anyone named here. Add the ⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information. Regression: updating a specific option will only change its value and will not corrupt others in
|
|
Noting here that I deliberately created a different icon for "Form button" rather than reusing the existing "Button" icon, to denote that they are different. One is a decorative block, the other is literally the |
|
Converting to draft as there are some questions on whether we want to land these or not. |
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>
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>
* Global Styles: Add Forms section * Global Styles: Add Elements section * Global Styles: Give elements their own home and the full control set Blocks and elements are listed together under one item in the main Styles menu, so there is a single place to style anything on the site. Inputs, selects and buttons are grouped under Form controls. Elements now offer the background, spacing, border, shadow and custom CSS controls that theme.json already accepts and the styles engine already emits, instead of typography and colour alone. Sizing, block gap, text alignment and duotone stay out: the first three belong to the block that contains an element, and the engine emits nothing for the last two. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * Global Styles: Preview elements with the site's own styles An element was previewed as a letter specimen built from a handful of properties copied across by hand, so it could not react to the border, shadow, spacing or background controls elements now have. Each element is previewed instead as a sample of the markup its selector applies to, rendered in the editor iframe with the generated stylesheet. The sample picks up the cascade, the theme's fonts and every panel without a list of properties to keep in sync. Text color and background color are left to the Typography and Background panels, where they were relocated in #77279, rather than shown a second time in a Colors panel. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * Global Styles: List elements in one flat list with blocks Elements sit in the same list as blocks under Elements, Headings and Form controls subheadings, with no drilldowns between them, so everything that can be styled is one screen away and easy to find alongside blocks. Each heading level is its own row, and the button element is labelled to tell it apart from the Button block further down the list. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * Global Styles: Resolve an element's styles once per screen The typography panel had its own wrapper that read the element's styles and settings a second time, separately from the panels beside it. One component now resolves them and renders every panel. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * Global Styles: Share border handling and the CSS capability check The block and element screens each carried their own copy of the border reconciliation and of the check for whether custom CSS may be edited. Both now use one shared version. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * Global Styles: Restore the Text and All headings entries and fix CI Bring back the root Text screen under Typography, which the style variations tests depend on, and list "All headings" at the top of the Headings group so the shared `elements.heading` node themes style can still be edited. Update the unit expectations for the widened element supports, the e2e labels for the renamed "Blocks & Elements" screen, and add the PR links the changelog check requires. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * Global Styles: Reformat for the wp-prettier upgrade on trunk Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> * Icons: Move the formInput changelog entry to Unreleased The rebase left the entry under the published 17.0.0 section, which fails the changelog checks. Also restore the formatting of an older entry the branch had touched without reason. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Mention elements in the Blocks & Elements description Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Blocks: Keep text alignment for elements in Global Styles Text alignment was added to elements in #73854, and the element screens should keep offering it alongside the new panels. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Offer states on the link and button element screens Moving the element colors out of the Colors screen dropped the only control for link hover color. The link and button element screens now offer the states the package already defines for them, and follow the setting that turns off state editing for blocks. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Show the default background size on element screens An element's background image with no size renders with cover, as a block's does, so the element screens now show the same defaults as the block screen. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Use one route for the element screens The block list's elements now open through a single path with the element name as a parameter, instead of one route per element. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Share element titles between the list and their screens The Blocks & Elements list now reads each element's label from the element screen's table, so the two cannot drift apart. The Button element's screen is titled "Button (element)" to match its row and tell it apart from the Button block. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Restore trunk's formatting of a media query Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Drop the deprecated spacer from the element screen The preview's own class now sets its side margin, and no longer shrinks inside the screen's scrolling flex column. This removes the element screen's use-recommended-components suppression. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Keep trunk's Text row under Typography Restore trunk's Typography element list with only the Text row, instead of rebuilding it inline. The row keeps its sample in the site's font, and the other elements stay in the Blocks & Elements list. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Move this PR's changelog entries back under Unreleased Trunk published new releases, so the rebase left the entries under published versions. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Drop the custom styles dot from element rows Trunk removed the dot from block rows in #84657. Element rows follow, and the customized filter keeps working for both. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Keep the border helper in the block screen Trunk's fallback helpers stay where they were, and the border handling the element screen shares becomes an exported function next to them, instead of a new file. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Inline the customized check for elements The element list calls the existing value check directly instead of a separate exported wrapper. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Check that searching lists matching elements Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Style Book: Show the Text category on element screens Element screens moved under the Blocks & Elements path, so the Style Book showed every block for them instead of the Text category it showed when they lived under Typography. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Global Styles: Match element names and group titles in search Searching "h1" now finds Heading 1, and "form" lists the form controls. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Fix the formatting of the heading styles end-to-end test Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Update the ESLint suppressions after rebasing on trunk Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Blocks: Leave the layout widths out of element styles Elements started from the root supports, so they kept contentSize and wideSize. The element screen never renders the width controls, but the Dimensions panel still counted them and showed up empty on themes that set layout widths without padding or margin. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * 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> * Update packages/editor/src/components/global-styles/block-link.js Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
f9edf00 to
03c438d
Compare
03c438d to
08c60b4
Compare
ramonjd
left a comment
There was a problem hiding this comment.
I rebased and tested on storybook
Noting here that I deliberately created a different icon for "Form button" rather than reusing the existing "Button" icon, to denote that they are different.
@jasmussen just to confirm there are only two icons in this PR and the form button will just used "button"?
That was my understanding from #81645 (comment) 👍 |
|
Just adding the backport to WP 7.2 Beta label as this will be a pre-requisite for polishing #81645 which will be in 7.2. |
|
There was a conflict while trying to cherry-pick the commit to the wp/7.2 branch. Please resolve the conflict manually and create a PR to the wp/7.2 branch. PRs to wp/7.2 are similar to PRs to trunk, but you should base your PR on the wp/7.2 branch instead of trunk. |
1 similar comment
|
There was a conflict while trying to cherry-pick the commit to the wp/7.2 branch. Please resolve the conflict manually and create a PR to the wp/7.2 branch. PRs to wp/7.2 are similar to PRs to trunk, but you should base your PR on the wp/7.2 branch instead of trunk. |
|
Looks like the changelog has a merge conflict when trying to get it into the 7.2 branch. I'll throw up a quick PR to cherry pick this one into the release branch. |
|
Cherry pick PR: #85360 |
|
There was a conflict while trying to cherry-pick the commit to the wp/7.2 branch. Please resolve the conflict manually and create a PR to the wp/7.2 branch. PRs to wp/7.2 are similar to PRs to trunk, but you should base your PR on the wp/7.2 branch instead of trunk. |
|
Ignore the above comment: the cherry pick PR has been merged (#85360) |
What?
Related to #81645 (comment). Adds 2 new form based icons:
For "form button" we reuse the existing Button icon.
This is because all three get styleable as elements soon.
Testing Instructions
npm run storybook:dev
Use of AI Tools
Opus 5 for normalisation.