Compensating for changes in WP 6.3

See: gregsullivan/_tw#60
beachdbishop · Aug 21, 2023 · 91c4b59 · 91c4b59
1 parent e004af1
commit 91c4b59
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 93 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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() {
-	?>
-	<script>
-		tailwindTypographyClasses = '<?php echo esc_attr( LL_TYPOGRAPHY_CLASSES ); ?>'.split(' ');
-	</script>
-	<?php
+function ll_enqueue_typography_script() {
+	if ( is_admin() ) {
+		wp_enqueue_script(
+			'll-typography',
+			get_template_directory_uri() . '/js/tailwind-typography-classes.min.js',
+			array(
+				'wp-blocks',
+				'wp-edit-post',
+			),
+			LL_VERSION,
+			true
+		);
+		wp_add_inline_script( 'll-typography', "tailwindTypographyClasses = '" . esc_attr( LL_TYPOGRAPHY_CLASSES ) . "'.split(' ');", 'before' );
+	}
 }
-add_action( 'admin_print_scripts', 'll_admin_scripts' );
+add_action( 'enqueue_block_assets', 'll_enqueue_typography_script' );
 
 /**
  * Add the Tailwind Typography classes to TinyMCE.