Skip to content

Math Block: Add inline editing and visual styling options #73101

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
Open
sidharthpandita1 wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Math Block: Add inline editing and visual styling options #73101

sidharthpandita1 wants to merge 1 commit into from
+286 −70

Conversation

@sidharthpandita1
Copy link
Contributor

@sidharthpandita1 sidharthpandita1 commented Nov 7, 2025 •
edited
Loading

What?

Closes #73035
Enhances the Math block with inline editing capabilities and comprehensive visual styling options.

Why?

Current Issues:

  1. Math block editing happens in a popover, requiring extra clicks and breaking the inline editing flow
  2. Limited styling options make it difficult to emphasize or style mathematical expressions for presentations, educational content, or design purposes

How?

Inline Editing:

  • Removed popover interface for editing LaTeX
  • LaTeX input now appears directly on the canvas when the block is selected
  • Click on rendered math preview to enter edit mode
  • Automatically converts to preview on blur
  • Auto-focuses textarea for better UX

Visual Styling Options:

Added comprehensive styling controls in the Inspector panel:

  • Font Size: Range control (12-120px) for scaling mathematical expressions
  • Text Color: Standard WordPress color picker
  • Background Color: Standard WordPress color picker
  • Border: Width, style, and color controls
  • Border Radius: Rounded corners with multiple units (px, %, em)
  • Padding: Spacing control with multiple units (px, em, rem)

All styles are properly saved and rendered on the frontend.

Testing Instructions

Styling:

  1. Add a Math block with content (e.g., x^2 + y^2 = r^2)
  2. Open the Appearance panel in the inspector
  3. Adjust font size - math should scale accordingly
  4. Add background color and verify padding is auto-applied
  5. Add border and border radius
  6. Change text color
  7. Save the post and verify styles persist on frontend

Screenshots/Screencast

Screen.Recording.2025-11-08.at.3.34.47.AM.mov

Checklist

  • My code is tested and works locally
  • My code follows the WordPress coding standards

@sidharthpandita1
Math Block: Add inline editing and visual styling options
8777f89 
- Replace popover editing with inline canvas editing
- Add font size control (12-120px range)
- Add text and background color controls
- Add border controls (width, style, color)
- Add border radius control
- Add padding control with multiple units
- Improve UX by allowing direct LaTeX editing on click
- Auto-convert to preview on blur
@github-actions
Copy link

github-actions bot commented Nov 7, 2025

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

1 similar comment
@github-actions
Copy link

github-actions bot commented Nov 7, 2025

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions
Copy link

github-actions bot commented Nov 7, 2025

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: sidharthpandita1 <sidharthpandita@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

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

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

Reviewers

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

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

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Math inline format: if you make a selection of latex first, use that

1 participant

@sidharthpandita1