Math: Fixing Edit as HTML feature and code editor sync (#72910)

* Math: Fixing Edit as HTML feature and code editor sync

* fix: More syntantical uniformity

* fix: Add support indication for core/math block in documentation

Co-authored-by: SirLouen <sirlouen@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: shimotmk <shimotomoki@git.wordpress.org>

Author: 5 people

docs/reference-guides/core-blocks.md

@@ -495,6 +495,7 @@ Display mathematical notation using LaTeX. ([Source](https://github.com/WordPres
 
 -	**Name:** core/math
 -	**Category:** text
+-	**Supports:** ~~html~~
 -	**Attributes:** latex, mathML
 
 ## Media & Text

packages/block-library/src/math/block.json

@@ -7,6 +7,9 @@
 	"description": "Display mathematical notation using LaTeX.",
 	"keywords": [ "equation", "formula", "latex", "mathematics" ],
 	"textdomain": "default",
+	"supports": {
+		"html": false
+	},
 	"attributes": {
 		"latex": {
 			"type": "string",

packages/block-library/src/math/edit.js

@@ -13,7 +13,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -22,31 +22,15 @@ import { unlock } from '../lock-unlock';
 
 const { Badge } = unlock( componentsPrivateApis );
 
-export default function MathEdit( {
-	attributes,
-	setAttributes,
-	isSelected,
-	clientId,
-} ) {
-	const { latex } = attributes;
+export default function MathEdit( { attributes, setAttributes, isSelected } ) {
+	const { latex, mathML } = attributes;
 	const [ blockRef, setBlockRef ] = useState();
 	const [ error, setError ] = useState( null );
 	const [ latexToMathML, setLatexToMathML ] = useState();
-	const initialLatex = useRef( attributes.latex );
+	const initialLatex = useRef( latex );
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	// Check if block is in HTML editing mode
-	const { isEditingAsHTML } = useSelect(
-		( select ) => {
-			const { getBlockMode } = select( blockEditorStore );
-			return {
-				isEditingAsHTML: getBlockMode( clientId ) === 'html',
-			};
-		},
-		[ clientId ]
-	);
-
 	useEffect( () => {
 		import( '@wordpress/latex-to-mathml' ).then( ( module ) => {
 			setLatexToMathML( () => module.default );
@@ -72,18 +56,18 @@ export default function MathEdit( {
 
 	return (
 		<div { ...blockProps }>
-			{ attributes.mathML ? (
+			{ mathML ? (
 				<math
 					// We can't spread block props on the math element because
 					// it only supports a limited amount of global attributes.
 					// For example, draggable will have no effect.
 					display="block"
-					dangerouslySetInnerHTML={ { __html: attributes.mathML } }
+					dangerouslySetInnerHTML={ { __html: mathML } }
 				/>
 			) : (
 				'\u200B'
 			) }
-			{ isSelected && ! isEditingAsHTML && (
+			{ isSelected && (
 				<Popover
 					placement="bottom-start"
 					offset={ 8 }
@@ -104,17 +88,17 @@ export default function MathEdit( {
 										setAttributes( { latex: newLatex } );
 										return;
 									}
-									let mathML = '';
+									let newMathML = '';
 									try {
-										mathML = latexToMathML( newLatex, {
+										newMathML = latexToMathML( newLatex, {
 											displayMode: true,
 										} );
 										setError( null );
 									} catch ( err ) {
 										setError( err.message );
 									}
 									setAttributes( {
-										mathML,
+										mathML: newMathML,
 										latex: newLatex,
 									} );
 								} }