Try: Override callout shortcodes in favor of the notice block (#337)

* Try: Override callout shortcodes in favor of the notice block. * Fix buggy layout on non-block theme. * Set border radius for notice to 2px. * Set callout font size for notice text to 14px. * Remove action styles for notice. --------- Co-authored-by: ren <[email protected]>
WordPress · Dec 14, 2023 · ee56418 · ee56418
1 parent dd5cd12
commit ee56418
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 14 deletions.
diff --git a/mu-plugins/blocks/notice/index.php b/mu-plugins/blocks/notice/index.php
@@ -6,7 +6,8 @@
 
 namespace WordPressdotorg\MU_Plugins\Notice;
 
-add_action( 'init', __NAMESPACE__ . '\init' );
+// Run after `WPorg_Handbook_Callout_Boxes` registers the shortcodes.
+add_action( 'init', __NAMESPACE__ . '\init', 11 );
 
 /**
  * Registers the block using the metadata loaded from the `block.json` file.
@@ -17,4 +18,55 @@
  */
 function init() {
 	register_block_type( __DIR__ . '/build' );
+
+	foreach ( [ 'info', 'tip', 'alert', 'tutorial', 'warning' ] as $shortcode ) {
+		remove_shortcode( $shortcode );
+		add_shortcode( $shortcode, __NAMESPACE__ . '\render_shortcode' );
+	}
+}
+
+/**
+ * Display the callout shortcodes using the notice block.
+ *
+ * @param array|string $attr    Shortcode attributes array or empty string.
+ * @param string       $content Shortcode content.
+ * @param string       $tag     Shortcode name.
+ *
+ * @return string Shortcode output as HTML markup.
+ */
+function render_shortcode( $attr, $content = '', $tag ) {
+	$shortcode_mapping = array(
+		'info'     => 'info',
+		'tip'      => 'tip',
+		'alert'    => 'alert',
+		'tutorial' => 'tip',
+		'warning'  => 'warning',
+	);
+
+	$type = $shortcode_mapping[ $tag ] ?: 'tip';
+
+	// Sanitize message content.
+	$content = wp_kses_post( $content );
+	// Temporarily disable o2 processing while formatting content.
+	add_filter( 'o2_process_the_content', '__return_false', 1 );
+	$content = apply_filters( 'the_content', $content );
+	remove_filter( 'o2_process_the_content', '__return_false', 1 );
+
+	// Create a unique placeholder for the content.
+	// Directly processing `$content` with `do_blocks` can lead to buggy layouts on make.wp.org.
+	// See https://github.com/WordPress/wporg-mu-plugins/pull/337#issuecomment-1819992059.
+	$placeholder = '<!-- CONTENT_PLACEHOLDER -->';
+
+	$block_markup = <<<EOT
+<!-- wp:wporg/notice {"type":"$type"} -->
+<div class="wp-block-wporg-notice is-{$type}-notice">
+<div class="wp-block-wporg-notice__icon"></div>
+<div class="wp-block-wporg-notice__content">$placeholder</div></div>
+<!-- /wp:wporg/notice -->
+EOT;
+
+	$processed_markup = do_blocks( $block_markup );
+	$final_markup = str_replace( $placeholder, $content, $processed_markup );
+
+	return $final_markup;
 }
diff --git a/mu-plugins/blocks/notice/postcss/style.pcss b/mu-plugins/blocks/notice/postcss/style.pcss
@@ -1,17 +1,17 @@
 .wp-block-wporg-notice {
-	--wp--custom--wporg-notice--color--background: var(--wp--preset--color--acid-green-3);
-	--wp--custom--wporg-notice--color--text: var(--wp--preset--color--charcoal-1);
+	--wp--custom--wporg-notice--color--background: var(--wp--preset--color--acid-green-3, #e2ffed);
+	--wp--custom--wporg-notice--color--text: var(--wp--preset--color--charcoal-1, #1e1e1e);
 
 	&.is-info-notice {
-		--wp--custom--wporg-notice--color--background: var(--wp--preset--color--blueberry-4);
+		--wp--custom--wporg-notice--color--background: var(--wp--preset--color--blueberry-4, #eff2ff);
 	}
 
 	&.is-alert-notice {
-		--wp--custom--wporg-notice--color--background: var(--wp--preset--color--lemon-3);
+		--wp--custom--wporg-notice--color--background: var(--wp--preset--color--lemon-3, #fffdd6);
 	}
 
 	&.is-warning-notice {
-		--wp--custom--wporg-notice--color--background: var(--wp--preset--color--pomegrade-3);
+		--wp--custom--wporg-notice--color--background: var(--wp--preset--color--pomegrade-3, #ffe9de);
 	}
 
 	display: grid;
@@ -20,6 +20,7 @@
 	padding: 1.25em;
 	color: var(--wp--custom--wporg-notice--color--text);
 	background-color: var(--wp--custom--wporg-notice--color--background);
+	border-radius: 2px;
 
 	& > * {
 		align-self: start;
@@ -33,17 +34,13 @@
 		margin-block-end: 0;
 	}
 
-	& a:link,
-	& a:visited,
-	& a:hover,
-	& a:active,
-	& a:focus {
-		color: var(--wp--custom--wporg-notice--color--text);
+	& br:first-child {
+		display: none;
 	}
 
 	&.alignleft,
 	&.alignright {
-		max-width: calc(var(--wp--style--global--content-size) * 0.66);
+		max-width: calc(var(--wp--style--global--content-size, 680px) * 0.66);
 	}
 }
 
@@ -57,8 +54,9 @@
 
 	background-image: url(../src/icon/library/tip.svg);
 	background-repeat: no-repeat;
-	background-position: center;
+	background-position: top;
 	background-size: 24px 24px;
+	margin-top: 1px;
 }
 
 .is-info-notice .wp-block-wporg-notice__icon {
@@ -75,4 +73,5 @@
 
 .wp-block-wporg-notice__content {
 	align-self: center;
+	font-size: var(--wp--preset--font-size--small);
 }