Skip to content

Math Block: Use monospaced font for LaTeX input #72557

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

Jump to bottom
Merged
t-hamano merged 5 commits into from
Oct 24, 2025
Merged

Math Block: Use monospaced font for LaTeX input #72557

t-hamano merged 5 commits into from
Oct 24, 2025

Conversation

@ItsRoy69
Copy link
Contributor

@ItsRoy69 ItsRoy69 commented Oct 22, 2025

What?

Adds a monospaced font to the LaTeX input field in the Math block.

Closes #72542

Why?

LaTeX syntax uses special characters, brackets, and precise spacing that are easier to read and edit in a monospaced font (similar to code editors). This improves the user experience when writing mathematical expressions.

How?

Added style={ { fontFamily: 'monospace' } } prop to the TextareaControl component in the Math block's edit component.

Testing Instructions

  1. Create or edit a Math block
  2. Click on the block to open the LaTeX input popover
  3. Verify that the input field now displays text in a monospaced font
  4. Type some LaTeX syntax (e.g., \frac{a}{b}, x^2 + y^2 = r^2) and confirm it's more readable

Checklist

  • My code is tested
  • My code follows the WordPress code style
  • My code has proper inline documentation
  • I've included developer documentation if appropriate

@github-actions
Copy link

github-actions bot commented Oct 22, 2025 •
edited
Loading

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: ItsRoy69 <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 22, 2025
@github-actions
Copy link

github-actions bot commented Oct 22, 2025

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @ItsRoy69! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@t-hamano t-hamano added [Block] Math [Type] Enhancement A suggestion for improvement. labels Oct 22, 2025
@github-project-automation github-project-automation bot moved this to 🔎 Needs Review in WordPress 6.9 Editor Tasks Oct 22, 2025
ellatrix
ellatrix reviewed Oct 22, 2025
View reviewed changes
@ItsRoy69 ItsRoy69 requested a review from ellatrix October 23, 2025 02:47
ntsekouras
ntsekouras reviewed Oct 24, 2025
View reviewed changes
ntsekouras
ntsekouras reviewed Oct 24, 2025
View reviewed changes
Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Besides my comment, this looks good to me. Thank you!

t-hamano
t-hamano reviewed Oct 24, 2025
View reviewed changes
t-hamano
t-hamano approved these changes Oct 24, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM! If you are interested, you might be able to apply similar improvements not only to the Math "blocks" but also to the Math "formatting" as a separate PR.

gutenberg/packages/format-library/src/math/index.js

Lines 82 to 91 in efb328b

<TextControl
__nextHasNoMarginBottom
__next40pxDefaultSize
hideLabelFromVision
label={ __( 'LaTeX math syntax' ) }
value={ latex }
onChange={ handleLatexChange }
placeholder={ __( 'e.g., x^2, \\frac{a}{b}' ) }
autoComplete="off"
/>

@t-hamano
Copy link
Contributor

t-hamano commented Oct 24, 2025

This pull request is an enhancement, but it's a very small change, and I believe it's worth backporting to 6.9.

@t-hamano t-hamano added the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 24, 2025
@t-hamano t-hamano merged commit 9ad9971 into WordPress:trunk Oct 24, 2025
42 of 43 checks passed
@github-project-automation github-project-automation bot moved this from 🔎 Needs Review to ✅ Done in WordPress 6.9 Editor Tasks Oct 24, 2025
@github-actions github-actions bot added this to the Gutenberg 22.0 milestone Oct 24, 2025
gutenbergplugin pushed a commit that referenced this pull request Oct 24, 2025
@ItsRoy69 @ellatrix
@ntsekouras @Mamaduka @t-hamano @gutenbergplugin
Math Block: Use monospaced font for LaTeX input (#72557)
287c60b 
* Use monospaced font for LaTeX input

Signed-off-by: ItsRoy69 <[email protected]>

* fix the font declaration

Signed-off-by: ItsRoy69 <[email protected]>

* fix the font declaration

Signed-off-by: ItsRoy69 <[email protected]>

* fixed by removing selectors

Signed-off-by: ItsRoy69 <[email protected]>

---------

Co-authored-by: ItsRoy69 <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: t-hamano <[email protected]>
@github-actions github-actions bot added Backported to WP Core Pull request that has been successfully merged into WP Core and removed Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Oct 24, 2025
@github-actions
Copy link

github-actions bot commented Oct 24, 2025

I just cherry-picked this PR to the wp/6.9 branch to get it included in the next release: 287c60b

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Mamaduka Mamaduka Mamaduka left review comments

@t-hamano t-hamano t-hamano approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

@ellatrix ellatrix Awaiting requested review from ellatrix

@ntsekouras ntsekouras Awaiting requested review from ntsekouras

Assignees

No one assigned

Labels

Backported to WP Core Pull request that has been successfully merged into WP Core [Block] Math First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Enhancement A suggestion for improvement.

Projects

WordPress 6.9 Editor Tasks
Status: ✅ Done

Milestone

Gutenberg 22.0

Development

Successfully merging this pull request may close these issues.

Math block: use a monospaced font for LaTeX input

5 participants

@ItsRoy69 @t-hamano @Mamaduka @ellatrix @ntsekouras