diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 38ad3e2e11bd1..0d951862f0ec6 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -317,6 +317,15 @@ A submission button for forms. ([Source](https://github.com/WordPress/gutenberg/ - **Supports:** - **Attributes:** +## Formula + +Render mathematical formulæ. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/formula)) + +- **Name:** core/formula +- **Category:** text +- **Supports:** align, anchor, spacing (blockGap, margin, padding), ~~html~~ +- **Attributes:** alt, formulaSource + ## Classic Use the classic WordPress editor. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/freeform)) diff --git a/lib/blocks.php b/lib/blocks.php index e1d4622a0f23d..eb2e29b289b5b 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -22,6 +22,7 @@ function gutenberg_reregister_core_block_types() { 'column', 'columns', 'details', + 'formula', 'form-input', 'form-submit-button', 'group', diff --git a/packages/block-library/src/formula/block.json b/packages/block-library/src/formula/block.json new file mode 100644 index 0000000000000..7e058bca03a02 --- /dev/null +++ b/packages/block-library/src/formula/block.json @@ -0,0 +1,39 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "core/formula", + "title": "Formula", + "category": "text", + "description": "Render mathematical formulæ.", + "textdomain": "default", + "attributes": { + "formulaSource": { + "type": "string", + "selector": "img", + "source": "attribute", + "attribute": "data-formula" + }, + "alt": { + "type": "string", + "selector": "img", + "source": "attribute", + "attribute": "alt" + } + }, + "supports": { + "anchor": true, + "align": true, + "html": false, + "spacing": { + "padding": true, + "margin": [ "top", "bottom" ], + "blockGap": true, + "__experimentalDefaultControls": { + "padding": true, + "blockGap": true + } + } + }, + "editorStyle": "wp-block-formula", + "style": "wp-block-formula" +} diff --git a/packages/block-library/src/formula/edit.js b/packages/block-library/src/formula/edit.js new file mode 100644 index 0000000000000..f1170dfd864f9 --- /dev/null +++ b/packages/block-library/src/formula/edit.js @@ -0,0 +1,97 @@ +/** + * WordPress dependencies + */ +import { useBlockProps, PlainText } from '@wordpress/block-editor'; + +let loading = false; + +const requireMathJaxScript = () => { + if ( loading ) { + return; + } + + loading = true; + const script = document.createElement( 'script' ); + script.id = 'MathJax-script'; + script.setAttribute( 'async', '' ); + script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js'; + document.head.appendChild( script ); +}; + +document.addEventListener( 'readystatechange', () => { + if ( document.readyState === 'complete' ) { + requireMathJaxScript(); + } +} ); + +/** + * Generate an SVG data URI for embedding in an IMG element src. + * + * @param {Element} svg The input SVG + * @return {string} Data URI for safely embedding SVG as a string. + */ +const svgElementToDataURI = ( svg ) => { + return `data:image/svg+xml,${ encodeURIComponent( + svg.childNodes[ 0 ].outerHTML + ) }`; +}; + +export const Edit = ( { attributes, isSelected, setAttributes } ) => { + const blockProps = useBlockProps(); + + return ( +