diff --git a/javascript/block-editor.js b/javascript/block-editor.js index 18ea31e..3d85c99 100644 --- a/javascript/block-editor.js +++ b/javascript/block-editor.js @@ -1,4 +1,4 @@ -/* global wp, tailwindTypographyClasses */ +/* global wp */ /** * This file is loaded only by the block editor. @@ -27,87 +27,4 @@ wp.domReady(() => { // } ); /* That's all, stop editing! */ - - /* - * Add the necessary Tailwind Typography classes to the block editor. - * For details, please see the comments below. - */ - addTypographyClasses(); -}); - -/** - * Tailwind Typography support from _tw - * - * The code below adds your front-end post title and Tailwind Typography - * classes to the block editor. - * - * Because Gutenberg’s `isEditorReady` function remains unstable, - * we’ll use an interval to watch for the arrival of the elements we need. - */ -function addTypographyClasses() { - const editorLoadedInterval = setInterval(function () { - // Wait until both the post title and post content blocks are present. - if ( - document.getElementsByClassName('wp-block-post-title').length && - document.getElementsByClassName('wp-block-post-content').length - ) { - // Add the `entry-title` class to the post title block. - document - .getElementsByClassName('wp-block-post-title')[0] - .classList.add('entry-title'); - - // Add the Tailwind Typography modifiers to the post content block. - document - .getElementsByClassName('wp-block-post-content')[0] - .classList.add(...tailwindTypographyClasses); - - // Add mutation observers to both blocks. - ['.wp-block-post-title', '.wp-block-post-content'].forEach( - (className) => { - mutationObserver.observe( - document.querySelector(className), - { - attributes: true, - attributeFilter: ['class'], - } - ); - } - ); - - // Stop the interval. - clearInterval(editorLoadedInterval); - } - }, 100); -} - -/** - * We need to ensure the class names we add are added again if the React - * component is updated, removing them in the process. The mutation observer - * below will check for the needed classes and add them if they’ve been - * removed. - */ -const mutationObserver = new MutationObserver(function (mutations) { - mutations.forEach(function (mutation) { - const classList = mutation.target.classList; - - // Check whether the mutated element is a post title or post content - // block. - if (classList.contains('wp-block-post-title')) { - // Check whether the `entry-title` class is present. - if (!classList.contains('entry-title')) { - // Add the `entry-title` class. - classList.add('entry-title'); - } - } else if (classList.contains('wp-block-post-content')) { - // Check whether all the Tailwind Typography modifiers are present. - if ( - !tailwindTypographyClasses.every((className) => - classList.contains(className) - ) - ) { - // Add the Tailwind Typography modifiers. - classList.add(...tailwindTypographyClasses); - } - } - }); }); diff --git a/javascript/tailwind-typography-classes.js b/javascript/tailwind-typography-classes.js new file mode 100644 index 0000000..1c74d7c --- /dev/null +++ b/javascript/tailwind-typography-classes.js @@ -0,0 +1,100 @@ +/* global wp, tailwindTypographyClasses */ + +/** + * Tailwind Typography support from _tw + * + * The code below adds your front-end post title and Tailwind Typography + * classes to the block editor. + * + * You should not edit this file. If you would like to use JavaScript to + * modify the block editor, please use the `block-editor.js` file instead. + * + * The JavaScript code you place here will be processed by esbuild. The output + * file will be created at `../theme/js/tailwind-typography-classes.min.js` and + * enqueued in `../theme/functions.php`. + * + * For esbuild documentation, please see: + * https://esbuild.github.io/ + */ + +wp.domReady(() => { + // Add the necessary Tailwind Typography classes to the block editor. + addTypographyClasses(); +}); + +/** + * Because Gutenberg’s `isEditorReady` function remains unstable, + * we’ll use an interval to watch for the arrival of the elements we need. + */ +function addTypographyClasses() { + const editorLoadedInterval = setInterval(function () { + // Wait until both the post title and post content blocks are present. + if ( + document.getElementsByClassName('wp-block-post-title').length && + document.getElementsByClassName('wp-block-post-content').length + ) { + // Add the `entry-title` class to the post title block. + document + .getElementsByClassName('wp-block-post-title')[0] + .classList.add('entry-title'); + + // Add the Tailwind Typography modifiers to the post content block. + document + .getElementsByClassName('wp-block-post-content')[0] + .classList.add(...tailwindTypographyClasses); + + // Add mutation observers to both blocks. + ['.wp-block-post-title', '.wp-block-post-content'].forEach( + (className) => { + mutationObserver.observe( + document.querySelector(className), + { + attributes: true, + attributeFilter: ['class'], + } + ); + } + ); + + // Stop the interval. + clearInterval(editorLoadedInterval); + } else if (document.getElementsByName('editor-canvas').length) { + // If the block editor has been loaded in an iframe, and this code + // is running outside of that iframe, stop the interval. (This code + // will run again inside the iframe.) + clearInterval(editorLoadedInterval); + } + }, 40); +} + +/** + * We need to ensure the class names we add are added again if the React + * component is updated, removing them in the process. The mutation observer + * below will check for the needed classes and add them if they’ve been + * removed. + */ +const mutationObserver = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + const classList = mutation.target.classList; + + // Check whether the mutated element is a post title or post content + // block. + if (classList.contains('wp-block-post-title')) { + // Check whether the `entry-title` class is present. + if (!classList.contains('entry-title')) { + // Add the `entry-title` class. + classList.add('entry-title'); + } + } else if (classList.contains('wp-block-post-content')) { + // Check whether all the Tailwind Typography modifiers are present. + if ( + !tailwindTypographyClasses.every((className) => + classList.contains(className) + ) + ) { + // Add the Tailwind Typography modifiers. + classList.add(...tailwindTypographyClasses); + } + } + }); +}); diff --git a/package.json b/package.json index d723f7f..33e2762 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "scripts": { "development:tailwind:frontend": "npx tailwindcss --postcss -i ./tailwind/tailwind.css -c ./tailwind/tailwind.config.js -o ./theme/style.css", "development:tailwind:editor": "cross-env _TW_TARGET=editor npx tailwindcss --postcss -i ./tailwind/tailwind.css -c ./tailwind/tailwind.config.js -o ./theme/style-editor.css", - "development:esbuild": "npx esbuild ./javascript/script.js ./javascript/block-editor.js --target=esnext --bundle --outdir=./theme/js --out-extension:.js=.min.js", + "development:esbuild": "npx esbuild ./javascript/script.js ./javascript/block-editor.js ./javascript/tailwind-typography-classes.js --target=esnext --bundle --outdir=./theme/js --out-extension:.js=.min.js", "development": "run-p development:**", "dev": "npm run development", "watch:tailwind:frontend": "npm run development:tailwind:frontend -- --watch", diff --git a/theme/functions.php b/theme/functions.php index 6cce95c..9e947b5 100644 --- a/theme/functions.php +++ b/theme/functions.php @@ -219,16 +219,26 @@ function ll_enqueue_block_editor_script() { add_action( 'enqueue_block_editor_assets', 'll_enqueue_block_editor_script' ); /** - * Create a JavaScript array containing the Tailwind Typography classes from LL_TYPOGRAPHY_CLASSES for use when adding Tailwind Typography support to the block editor. + * Enqueue the script necessary to support Tailwind Typography in the block + * editor, using an inline script to create a JavaScript array containing the + * Tailwind Typography classes from _S_TYPOGRAPHY_CLASSES. */ -function ll_admin_scripts() { - ?> - -