Skip to content

UI: Standardize button sizing to 40px across all experiments#730

Closed
i-anubhav-anand wants to merge 41 commits into
WordPress:trunkfrom
i-anubhav-anand:fix/button-next40px-default-size
Closed

UI: Standardize button sizing to 40px across all experiments#730
i-anubhav-anand wants to merge 41 commits into
WordPress:trunkfrom
i-anubhav-anand:fix/button-next40px-default-size

Conversation

@i-anubhav-anand

@i-anubhav-anand i-anubhav-anand commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

What?

Closes #701

Add the __next40pxDefaultSize prop to all Button components that were missing it, and enforce it going forward via an ESLint rule.

Why?

Several action buttons across the plugin were rendering at the deprecated 36px height while others were already at 40px, creating visible inconsistency. The Gutenberg component standard has designated 40px as the default and retired 36px (gutenberg#46734, gutenberg#46741).

How?

  • Added __next40pxDefaultSize to all primary/secondary/tertiary text Button components that were missing it across 13 component files:
    • src/experiments/content-resizing/components/ContentResizingToolbar.tsx
    • src/experiments/meta-description/components/MetaDescriptionPanel.tsx
    • src/experiments/meta-description/components/MetaDescriptionModal.tsx
    • src/experiments/editorial-updates/components/EditorialUpdatesPlugin.tsx
    • src/experiments/excerpt-generation/components/ExcerptGeneration.tsx
    • src/experiments/alt-text-generation/components/AltTextControls.tsx
    • src/experiments/alt-text-generation/components/MediaEditorAltTextControl.tsx
    • src/experiments/connector-approval/components/PendingRequestsCard.tsx
    • src/admin/ai-request-logs/components/SettingsPanel.tsx
    • src/features/image-generation/components/GenerateImageStandalone.tsx
    • src/features/image-generation/components/GenerateImageInlineModal.tsx
    • src/features/image-generation/components/MediaLibraryImageEditor.tsx
    • src/features/image-generation/components/shared/index.tsx
  • Icon-only buttons, size="compact", size="small", variant="link", and ToolbarButton instances are intentionally excluded per upstream convention.
  • Added '@wordpress/components-no-missing-40px-size-prop': 'error' to eslint.config.mjs to prevent regression.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): claude-sonnet-4-6
Used for: Implementation assistance; code reviewed and verified by me.

Testing Instructions

  1. Open a post in the editor.
  2. Check the Meta Description sidebar panel — "Generate Meta Description" should now render at 40px height.
  3. Check the "Apply Editorial Updates" button in the post status panel — same height as neighbouring buttons.
  4. Trigger the Alt Text generation controls on an image block — Apply/Dismiss/Generate buttons all 40px.
  5. Open the image generation feature — all action buttons (Save, Refine, Generate Another, Edit Prompt, Cancel) at 40px.
  6. Run npm run lint:js — should pass with no new violations.

Screenshots or screencast

Before After
Buttons inconsistently 36px / 40px All primary/secondary/tertiary buttons 40px

Changelog Entry

Fixed - UI: standardized button sizing to 40px across all experiments and features (Content Resizing, Meta Description, Editorial Updates, Excerpt Generation, Alt Text, Connector Approval, Request Logs, Image Generation). Added ESLint rule to prevent regression.

Open WordPress Playground Preview

dependabot Bot and others added 30 commits May 28, 2026 08:38
Developer - Bump `tmp` from 0.2.5 to 0.2.7

Co-authored-by: dkotter <dkotter@git.wordpress.org>
… Next/Previous in media modal (WordPress#631)

Fixed - Alt Text Generation button becomes unresponsive after using Next/Previous in the media modal.

Unlinked contributors: kohcsi.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Developer - Bump `codecov/codecov-action` from 6.0.0 to 6.0.1

Co-authored-by: dkotter <dkotter@git.wordpress.org>
…WordPress#635)

Developer - Bump `phpstan/php-8-stubs` from 0.4.34 to 0.4.35 and `phpstan/phpstan` from 2.1.54 to 2.1.55

Co-authored-by: dkotter <dkotter@git.wordpress.org>
…ess#605)

Changed - Ensure the Editorial Notes and Editorial Updates controls stay grouped together in the post editor sidebar

Co-authored-by: macayu17 <ayushhoff@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…lorer (WordPress#642)

Fixed - Added accessible labels to the provider and category filter dropdowns in the Abilities Explorer page.

Co-authored-by: Trushiv04 <trushiv@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…ss on alt text (WordPress#645)

Fixed - Lost focus when generating the alt text in image block inspector controls.

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Fixed - Lost focus when toggling the connector approval state.

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Fixed - Abilities Explorer schema validation.

Co-authored-by: ekamran <ekamran@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…rdPress#644)

Fixed - Lost focus after generating a title.

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…trix (WordPress#637)

Fixed - Add descriptive accessible labels to approval matrix toggle controls.

Co-authored-by: ishitaj34 <ishitaj34@git.wordpress.org>
Co-authored-by: Trushiv04 <trushiv@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…es Explorer (WordPress#649)

Fixed - Added an accessible label to the ability test payload textarea in the Abilities Explorer.

Co-authored-by: Trushiv04 <trushiv@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Fixed - Excerpt generation post context payload.

Co-authored-by: ekamran <ekamran@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Changed - Return a consistent decorative flag from alt text generation results

Co-authored-by: yusufhay <yusufmudagal@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Fixed - Clear out the meta description suggestion when the modal closes

Co-authored-by: ekamran <ekamran@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Developer - Bump `phpstan/phpstan` from 2.1.55 to 2.2.1

Co-authored-by: dkotter <dkotter@git.wordpress.org>
…29dac8d2bf9a1e8493865fc97cd1c3c87b to 5e92f5e3c80d06126f22e83e4bb21221fbbd3e7f in the github-actions-updates group (WordPress#673)

Developer - Bump `WordPress/action-wp-playground-pr-preview` to latest version

Co-authored-by: dkotter <dkotter@git.wordpress.org>
Changed - Use explicit UTF-8 encoding for generated meta description character counts.

Co-authored-by: yusufhay <yusufmudagal@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…ress#669)

Fixed - Column reordering and hiding in the AI Request Logs table now persists instead of resetting to the default.

Unlinked contributors: alexWinterjuice.

Co-authored-by: Trushiv04 <trushiv@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Fixed - UI inconsistency on AI Request Logs page.

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Developer - Add `@WordPress/ai-maintainers` team.

Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…ent in AI Request Logs (WordPress#671)

Fixed - Summary statistics showing zero for short time periods on non-UTC MySQL servers.

Unlinked contributors: alexWinterjuice.

Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…ess#647)

Fixed - Lost focus after generating images.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…(thoughtsTokenCount ignored) (WordPress#680)

Fixed - Ensuring thinking tokens are counted in request logs.

Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: riccardodicurti <riccardodicurti@git.wordpress.org>
Added - Manual refresh button to the AI Request Logs table header.

Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: pbearne <pbearne@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
… suggestions (WordPress#663)

Fixed - Lost focus after running content resizing actions.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…l in Alt_Text_Generation (WordPress#688)

Fixed - Ensure the Ability schemas and outputs are valid JSON Schema for strict REST and MCP consumers.

Co-authored-by: the-hercules <thehercules@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: WouterP0lman <wouterpolman@git.wordpress.org>
… template" off (normal editing mode), until reload (WordPress#694)

Fixed - Title generation button disappears after toggling "Show template" off.

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Developer - Clarify AI Connector provider setup.

Co-authored-by: ekamran <ekamran@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Fixed - Prevent accidental interactions and stale feedback in the Meta Description generation modal and improve focus handling.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Infinite-Null and others added 10 commits June 11, 2026 09:58
…ordPress#698)

Fixed - Ensure focus isn't lost after generating an excerpt inline.

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Changed - Show an error message immediately in the image generation UI when there's no AI Connector in place that supports image generation.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: mindctrl <mindctrl@git.wordpress.org>
…dPress#703)

Developer - Removes the `ready_for_review` pull request event from the Test and Plugin Check GitHub Actions workflows.

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…tions-updates group (WordPress#707)

Developer - Bump `actions/checkout` from 6.0.2 to 6.0.3

Co-authored-by: justlevine <justlevine@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…plicate declarations. (WordPress#713)

Fixed - Rename unforwarded `MaskCanvas` component function to `InnerMaskCanvas` to avoid duplicate declarations.

Co-authored-by: justlevine <justlevine@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…#705)

Fixed - AI Request Logs main header overlapping table header.

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Fixed - Allow users to clear an applied meta description while preventing whitespace-only descriptions.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Developer - Update NPM dev-deps.

Co-authored-by: justlevine <justlevine@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…atus widget (WordPress#720)

Changed - Use a neutral icon for disabled features and experiments in the AI Status widget.

Unlinked contributors: i-anubhav-anand.

Co-authored-by: ankitguptaindia <ankit-k-gupta@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
…experiments

Several Button components throughout the plugin were still rendering at the
deprecated 36px height instead of the 40px standard. This applies the
__next40pxDefaultSize prop to all primary/secondary/tertiary text buttons
that were missing it, and enforces the prop via ESLint so new code stays
consistent. Icon-only, compact, small, link, and toolbar buttons are
intentionally excluded per the upstream Gutenberg convention.

Fixes WordPress#701
@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: macayu17 <ayushhoff@git.wordpress.org>
Co-authored-by: Trushiv04 <trushiv@git.wordpress.org>
Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: ekamran <ekamran@git.wordpress.org>
Co-authored-by: ishitaj34 <ishitaj34@git.wordpress.org>
Co-authored-by: yusufhay <yusufmudagal@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: the-hercules <thehercules@git.wordpress.org>
Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: justlevine <justlevine@git.wordpress.org>
Co-authored-by: i-anubhav-anand <anubhav24@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

…nt rule

Pill accept/dismiss, title modal Regenerate/Insert, and image history nav
arrows in both MediaLibraryImageEditor and shared/ImageHistoryNav were
flagged by the @wordpress/components-no-missing-40px-size-prop rule added
in this branch but not yet updated.
@dkotter

dkotter commented Jun 15, 2026

Copy link
Copy Markdown
Collaborator

This PR is based against trunk which is not correct (should be develop). It also duplicates work already done in #702. Please don't open new PRs to solve an issue that already has a PR.

@dkotter dkotter closed this Jun 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.