Skip to content

Use flex for radio layout#11254

Open
joedolson wants to merge 1 commit intoWordPress:trunkfrom
joedolson:64816-flex
Open

Use flex for radio layout#11254
joedolson wants to merge 1 commit intoWordPress:trunkfrom
joedolson:64816-flex

Conversation

@joedolson
Copy link
Contributor

This PR extends the patch by @siliconforks to remove some additional CSS.

The class .tog is used only on the adim theme color switching and in the selector to set the front page between a page or a post. Removing these styles appears to have no impact. The line-height also appears to now be irrelevant.

Some additional cross-browser testing would probably be beneficial.

Trac ticket: https://core.trac.wordpress.org/ticket/64816

Use of AI Tools

None


This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

@github-actions
Copy link

github-actions bot commented Mar 14, 2026

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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props joedolson, siliconforks.

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

@github-actions
Copy link

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

@siliconforks
Copy link

The class .tog is used only on the adim theme color switching and in the selector to set the front page between a page or a post.

Should tog be removed from the HTML code too?

That class is extremely ancient and it doesn't currently seem to serve any purpose (if it ever did).

https://core.trac.wordpress.org/changeset/3581

@joedolson
Copy link
Contributor Author

I checked CSS, but i didn't check whether it was used in JS anywhere. It might be possible to remove; that will need a bit more checking. It's definitely very old!

margin-right: 0.25rem;
/* 10px not sure if still necessary, comes from the MP6 redesign in r26072 */
line-height: 0.71428571;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The alignment can still be slightly off at various window widths and zoom levels. Adding this seems to help:

Suggested change
}
align-items: center;
justify-content: center;
}

background-color: #fff;
/* 16px not sure if still necessary, comes from the MP6 redesign in r26072 */
line-height: 1.14285714;
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated to alignment, Windows High Contrast mode does not indicate checked radio buttons (for a long time). I was going to open a separate ticket, but this is already editing the same ruleset.

Suggested change
}
/* Only visible in Windows High Contrast mode */
outline: 4px solid transparent;
}

Screenshots using Chrome 145 and Windows 11's Aquatic theme:

Before With outline
radio buttons without outline checked radio buttons with outline

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.

3 participants