LaTeX Block: Switch to MathML and add styling support

projects/plugins/jetpack/_inc/lib/core-api/wpcom-endpoints/class-wpcom-rest-api-v2-endpoint-block-editor-assets.php

@@ -65,6 +65,7 @@ class WPCOM_REST_API_V2_Endpoint_Block_Editor_Assets extends WP_REST_Controller
 		'jetpack/google-calendar',
 		'jetpack/image-compare',
 		'jetpack/instagram-gallery',
+		'jetpack/math',
 		'jetpack/like',
 		'jetpack/mailchimp',
 		'jetpack/map',

projects/plugins/jetpack/changelog/move-latex-block-to-mathml

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+It's a beta block.

projects/plugins/jetpack/extensions/blocks/math/block.json

@@ -0,0 +1,49 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "jetpack/math",
+	"version": "0.1.0",
+	"title": "Math",
+	"keywords": [ "math", "formula", "equation", "mathml", "latex" ],
+	"category": "formatting",
+	"description": "Create and display math formulas with live preview and easy editing.",
+	"example": {
+		"attributes": {
+			"source": "\\frac{a}{b}"
+		}
+	},
+	"attributes": {
+		"source": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"supports": {
+		"html": true,
+		"color": {
+			"gradients": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true
+		},
+		"align": [ "wide", "full" ],
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		}
+	},
+	"textdomain": "jetpack",
+	"style": "file:./view.css"
+}

projects/plugins/jetpack/extensions/blocks/math/edit.js

@@ -0,0 +1,103 @@
+import { useBlockProps } from '@wordpress/block-editor';
+import {
+	Button,
+	TextareaControl,
+	/* eslint-disable @wordpress/no-unsafe-wp-apis */
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+	/* eslint-enable @wordpress/no-unsafe-wp-apis */
+	Placeholder,
+} from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { icon } from './icon';
+import 'katex/dist/katex.min.css';
+import './editor.scss';
+import { renderMath } from './utils';
+
+const LatexPlaceholder = () => {
+	return (
+		<span className="jetpack-math-rendered-placeholder">{ __( 'Write math…', 'jetpack' ) }</span>
+	);
+};
+
+export default function Edit( { attributes, setAttributes, isSelected } ) {
+	const { source = '' } = attributes;
+	const textareaRef = useRef();
+	const [ renderAreaRef, setRenderAreaRef ] = useState( null );
+	const dispatch = useDispatch();
+	const blockProps = useBlockProps();
+	const { style, ...props } = blockProps;
+
+	useEffect( () => {
+		if ( renderAreaRef ) {
+			renderAreaRef.innerHTML = renderMath( source );
+		}
+	}, [ source, renderAreaRef ] );
+
+	if ( isSelected ) {
+		return (
+			<div { ...props }>
+				<Placeholder label={ __( 'Math', 'jetpack' ) } icon={ icon }>
+					<VStack
+						className="jetpack-math-textarea-container"
+						gap={ 4 }
+						justify="flex-start"
+						align="stretch"
+					>
+						<TextareaControl
+							label={ __( 'Math code (Tex or MathML)', 'jetpack' ) }
+							className="jetpack-math-textarea"
+							ref={ textareaRef }
+							value={ source }
+							onChange={ value => setAttributes( { source: value } ) }
+							rows={ 4 }
+							help={ __( 'To render MathML your code must be wrapped in <math> tags.', 'jetpack' ) }
+						/>
+						<Text upperCase>{ __( 'Preview', 'jetpack' ) }</Text>
+						{ source.trim() && (
+							<div
+								className="jetpack-math-rendered"
+								style={ style }
+								ref={ r => r !== renderAreaRef && setRenderAreaRef( r ) }
+							/>
+						) }
+					</VStack>
+					<HStack justify="flex-end">
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							onClick={ () => {
+								setAttributes( { source } );
+								dispatch( 'core/block-editor' ).clearSelectedBlock();
+							} }
+						>
+							{ __( 'Done', 'jetpack' ) }
+						</Button>
+					</HStack>
+				</Placeholder>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			{ ...blockProps }
+			tabIndex={ 0 }
+			role="button"
+			aria-label={ __( 'Edit math', 'jetpack' ) }
+			data-source={ source }
+		>
+			{ source.trim() ? (
+				<div
+					className="jetpack-math-rendered"
+					ref={ r => r !== renderAreaRef && setRenderAreaRef( r ) }
+				/>
+			) : (
+				<LatexPlaceholder />
+			) }
+		</div>
+	);
+}

projects/plugins/jetpack/extensions/blocks/latex/editor.js → projects/plugins/jetpack/extensions/blocks/math/editor.js

@@ -12,5 +12,6 @@ registerJetpackBlockFromMetadata(
 	{
 		edit,
 		save,
+		supports: metadata.supports,
 	}
 );