Fix compatibility issues with shortcodes in blocks and Gutenberg 18.1+ (

#517)

* Move article meta logic from blocks to templates and patterns

After WordPress/gutenberg#60349, shortcodes passed via block attributes don't work.

Shortcodes in block markup in patterns do work, so stop using custom blocks and move the logic to the template level instead.

* Remove debug

* Use function to get post title

source/wp-content/themes/wporg-developer-2023/functions.php

@@ -150,7 +150,6 @@
 require __DIR__ . '/inc/block-hooks.php';
 
 // Block files
-require_once __DIR__ . '/src/article-meta-date/block.php';
 require_once __DIR__ . '/src/chapter-list/block.php';
 require_once __DIR__ . '/src/cli-command-table/block.php';
 require_once __DIR__ . '/src/code-changelog/block.php';
@@ -599,12 +598,19 @@ function add_site_navigation_menus( $menus ) {
 function add_handbook_templates( $templates ) {
 	$is_handbook      = function_exists( 'wporg_is_handbook' ) && wporg_is_handbook();
 	$is_github_source = ! empty( get_post_meta( get_the_ID(), 'wporg_markdown_source', true ) );
+
 	if ( $is_handbook ) {
 		array_unshift( $templates, 'single-handbook.php' );
 	}
+
 	if ( $is_github_source ) {
-		array_unshift( $templates, 'single-handbook-github.php' );
+		if ( get_post_type() === 'blocks-handbook' ) {
+			array_unshift( $templates, 'single-handbook-block-editor.php' );
+		} else {
+			array_unshift( $templates, 'single-handbook-github.php' );
+		}
 	}
+
 	return $templates;
 }
 

source/wp-content/themes/wporg-developer-2023/inc/block-hooks.php

@@ -7,7 +7,6 @@
 
 use function DevHub\is_parsed_post_type;
 
-add_filter( 'render_block', __NAMESPACE__ . '\filter_handbook_meta_link_block', 10, 2 );
 add_filter( 'render_block_data', __NAMESPACE__ . '\modify_header_template_part' );
 
 /**
@@ -52,33 +51,6 @@ function get_block_content_by_home_url( $block_content, $replacement_home_url =
 	);
 }
 
-/**
- * Filters an article meta block and conditionally removes it.
- *
- * @param string $block_content
- * @param array  $block
- * @return string
- */
-function filter_handbook_meta_link_block( $block_content, $block ) {
-	if ( 'wporg/handbook-meta-link' === $block['blockName'] ) {
-		// Not all handbooks come from GitHub.
-		$local_handbooks = array( 'apis-handbook', 'plugin-handbook', 'theme-handbook' );
-		$post_type = get_post_type();
-
-		if ( in_array( $post_type, $local_handbooks ) ) {
-			return '';
-		}
-
-		// The block editor handbook doesn't have a changelog.
-		// We only know it's the changelog because of the linkURL attribute.
-		if ( 'blocks-handbook' === $post_type && '[article_changelog_link]' === $block['attrs']['linkURL'] ) {
-			return '';
-		}
-	}
-
-	return $block_content;
-}
-
 /**
  * Update header template based on current query.
  *

source/wp-content/themes/wporg-developer-2023/inc/shortcodes.php

@@ -57,6 +57,17 @@ function() {
 	}
 );
 
+/**
+ * Get the title of the article.
+ */
+add_shortcode(
+	'article_title',
+	function() {
+		global $post;
+		return get_the_title();
+	}
+);
+
 /**
  * Only display the 'Last updated' if the modified date is later than the publishing date.
  */

source/wp-content/themes/wporg-developer-2023/patterns/article-meta-block-editor.php

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Title: Article Meta for the Block Editor GitHub handbook
+ * Slug: wporg-developer-2023/article-meta-block-editor
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|20"},"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"},"className":"entry-meta"} -->
+<div class="wp-block-group entry-meta" style="border-top-color:var(--wp--preset--color--light-grey-1);border-top-width:1px;margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40)">
+
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+		<p style="font-style:normal;font-weight:700"><?php esc_html_e( 'First published', 'wporg' ); ?></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:post-date /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+		<p style="font-style:normal;font-weight:700">[last_updated]</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:post-date {"displayType":"modified"} /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+
+		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+		<p style="font-style:normal;font-weight:700"><?php esc_html_e( 'Edit article', 'wporg' ); ?></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph {"className":"external-link"} -->
+		<p class="external-link"><a href="[article_edit_link]">
+			<?php echo wp_kses_post(
+				sprintf(
+					/* translators: %s: article title */
+					__( 'Improve it on GitHub<span class="screen-reader-text">: %s</span>', 'wporg' ),
+					'[article_title]'
+				)
+			); ?>
+		</a></p>
+		<!-- /wp:paragraph -->
+
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->

source/wp-content/themes/wporg-developer-2023/patterns/article-meta-github.php

@@ -0,0 +1,78 @@
+<?php
+/**
+ * Title: Article Meta for GitHub handbooks
+ * Slug: wporg-developer-2023/article-meta-github
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|20"},"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"},"className":"entry-meta"} -->
+<div class="wp-block-group entry-meta" style="border-top-color:var(--wp--preset--color--light-grey-1);border-top-width:1px;margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40)">
+
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+		<p style="font-style:normal;font-weight:700"><?php esc_html_e( 'First published', 'wporg' ); ?></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:post-date /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+		<p style="font-style:normal;font-weight:700">[last_updated]</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:post-date {"displayType":"modified"} /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+
+		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+		<p style="font-style:normal;font-weight:700"><?php esc_html_e( 'Edit article', 'wporg' ); ?></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph {"className":"external-link"} -->
+		<p class="external-link"><a href="[article_edit_link]">
+			<?php echo wp_kses_post(
+				sprintf(
+					/* translators: %s: article title */
+					__( 'Improve it on GitHub<span class="screen-reader-text">: %s</span>', 'wporg' ),
+					'[article_title]'
+				)
+			); ?>
+		</a></p>
+		<!-- /wp:paragraph -->
+
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+
+		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+		<p style="font-style:normal;font-weight:700"><?php esc_html_e( 'Changelog', 'wporg' ); ?></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph {"className":"external-link"} -->
+		<p class="external-link"><a href="[article_changelog_link]">
+			<?php echo wp_kses_post(
+				sprintf(
+					/* translators: %s: article title */
+					__( 'See list of changes<span class="screen-reader-text">: %s</span>', 'wporg' ),
+					'[article_title]'
+				)
+			); ?>
+		</a></p>
+		<!-- /wp:paragraph -->
+
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->

source/wp-content/themes/wporg-developer-2023/patterns/article-meta.php

@@ -10,13 +10,25 @@
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"},"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|20"},"border":{"top":{"color":"var:preset|color|light-grey-1","width":"1px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"},"className":"entry-meta"} -->
 <div class="wp-block-group entry-meta" style="border-top-color:var(--wp--preset--color--light-grey-1);border-top-width:1px;margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--40)">
 
-	<!-- wp:wporg/article-meta-date {"heading":"<?php esc_html_e( 'First published', 'wporg' ); ?>"} /-->
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+		<p style="font-style:normal;font-weight:700"><?php esc_html_e( 'First published', 'wporg' ); ?></p>
+		<!-- /wp:paragraph -->
 
-	<!-- wp:wporg/article-meta-date {"heading":"[last_updated]","displayType":"modified"} /-->
+		<!-- wp:post-date /-->
+	</div>
+	<!-- /wp:group -->
 
-	<!-- wp:wporg/handbook-meta-link {"heading":"<?php esc_html_e( 'Edit article', 'wporg' ); ?>","linkURL":"[article_edit_link]","linkText":"<?php esc_html_e( 'Improve it on GitHub', 'wporg' ); ?>"} /-->
-
-	<!-- wp:wporg/handbook-meta-link {"heading":"<?php esc_html_e( 'Changelog', 'wporg' ); ?>","linkURL":"[article_changelog_link]","linkText":"<?php esc_html_e( 'See list of changes', 'wporg' ); ?>"} /-->
+	<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group">
+		<!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
+		<p style="font-style:normal;font-weight:700">[last_updated]</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:post-date {"displayType":"modified"} /-->
+	</div>
+	<!-- /wp:group -->
 
 </div>
 <!-- /wp:group -->

source/wp-content/themes/wporg-developer-2023/templates/single-handbook-block-editor.html

@@ -0,0 +1,44 @@
+<!-- wp:template-part {"slug":"header-alt","className":"has-display-contents"} /-->
+
+<!-- wp:template-part {"slug":"search-wide","className":"has-display-contents"} /-->
+
+<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignfull" style="padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
+
+	<!-- wp:group {"align":"left","className":"has-three-columns","layout":{"type":"flex","flexWrap":"wrap","orientation":"vertical"}} -->
+	<div class="wp-block-group alignleft has-three-columns">
+
+		<!-- wp:group {"tagName":"main","className":"alignwide","style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}}}} -->
+		<main class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--20)">
+
+			<!-- wp:group {"tagName":"article","style":{"spacing":{"margin":{"top":"0px"}}}} -->
+			<article class="wp-block-group" style="margin-top:0px">
+				<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"40px"}}}} /-->
+
+				<!-- wp:pattern {"slug":"wporg-developer-2023/article-sidebar"} /-->
+
+				<!-- wp:post-content /-->
+
+				<!-- wp:pattern {"slug":"wporg-developer-2023/article-meta-block-editor"} /-->
+
+				<!-- wp:pattern {"slug":"wporg-developer-2023/handbook-pagination"} /-->
+
+			</article>
+			<!-- /wp:group -->
+
+		</main>
+		<!-- /wp:group -->
+
+		<!-- wp:wporg/sidebar-container {"hasBackToTop":false,"inlineBreakpoint": "768px"} -->
+
+			<!-- wp:wporg/chapter-list /-->
+
+		<!-- /wp:wporg/sidebar-container -->
+
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer"} /-->