Skip to content

Fix: Hide input popover when editing Math block as HTML #72902

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
ntsekouras merged 1 commit into from
Nov 3, 2025
Merged

Fix: Hide input popover when editing Math block as HTML #72902

ntsekouras merged 1 commit into from
Nov 3, 2025

Conversation

@sidharthpandita1
Copy link
Contributor

@sidharthpandita1 sidharthpandita1 commented Nov 1, 2025

What?

Closes #72899

Fixes the issue where the LaTeX input textarea appears in the upper left corner when switching to 'Edit as HTML' mode in the Math block.

Why?

When a user selects "Edit as HTML" from the Math block options, the LaTeX input popover (TextareaControl) continues to display because it only checks if the block is selected (isSelected), not whether it's in HTML editing mode. This causes the textarea to appear in an incorrect position (upper left corner) instead of being hidden during HTML editing.

How?

  • Added useSelect hook to check the block's editing mode using getBlockMode selector from blockEditorStore
  • Added clientId prop to the component to identify the current block
  • Updated the conditional rendering logic to hide the Popover when isEditingAsHTML is true
  • The popover now only displays when the block is selected AND not in HTML editing mode

Testing Instructions

  1. Open a post or page in the block editor
  2. Insert a Math block
  3. Enter a LaTeX formula (e.g., x^2 or \frac{a}{b})
  4. Click the three-dot menu (⋮) on the block toolbar
  5. Select "Edit as HTML" from the options
  6. ✅ Verify that the LaTeX input popover is hidden
  7. The HTML textarea should display the block markup without the LaTeX input appearing in the corner
  8. Click "Edit visually" to switch back
  9. ✅ Verify that the LaTeX input popover appears again when the block is selected

Testing Instructions for Keyboard

  1. Open a post or page in the block editor
  2. Insert a Math block using /math or the inserter
  3. Type a LaTeX formula (e.g., x^2)
  4. Press Shift + Alt + Z (Windows/Linux) or Ctrl + Option + Z (Mac) to open the block toolbar
  5. Use arrow keys to navigate to the options menu (⋮) and press Enter
  6. Use arrow keys to navigate to "Edit as HTML" and press Enter
  7. ✅ Verify that the LaTeX input popover is hidden and focus moves to the HTML textarea
  8. Press Shift + Alt + Z / Ctrl + Option + Z again and select "Edit visually"
  9. ✅ Verify that the LaTeX input popover appears again and is accessible via keyboard

Screenshots or screencast

Screen.Recording.2025-11-01.at.3.07.02.PM.mov

The LaTeX input popover is properly hidden when editing the block as HTML.|

@github-actions
Copy link

github-actions bot commented Nov 1, 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 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: shimotmk <[email protected]>

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

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Math labels Nov 3, 2025
ntsekouras
ntsekouras approved these changes Nov 3, 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.

LGTM, thanks!

packages/block-library/src/math/edit.js
useDispatch( blockEditorStore );

// Check if block is in HTML editing mode
const { isEditingAsHTML } = useSelect(
Copy link
Contributor

@ntsekouras ntsekouras Nov 3, 2025

Choose a reason for hiding this comment

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

Nit: we could return the boolean primitive and not an object.

@ntsekouras ntsekouras merged commit de58b89 into WordPress:trunk Nov 3, 2025
42 of 44 checks passed
@github-actions github-actions bot added this to the Gutenberg 22.1 milestone Nov 3, 2025
@SirLouen SirLouen mentioned this pull request Nov 3, 2025
Closed
6 tasks
@ntsekouras ntsekouras mentioned this pull request Nov 3, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ntsekouras ntsekouras ntsekouras 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

Assignees

No one assigned

Labels

[Block] Math [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 22.1

Development

Successfully merging this pull request may close these issues.

Math: When you select "Edit as HTML," the text area moves to the upper left corner of the editor.

3 participants

@sidharthpandita1 @ntsekouras @t-hamano