From 29bf3db6dc70c375856bf22ecf7a1c0500b1a494 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Fri, 10 Feb 2023 15:34:35 -0500
Subject: [PATCH 1/5] Try: Override callout shortcodes in favor of the notice
 block

---
 mu-plugins/blocks/notice/index.php          | 46 ++++++++++++++++++++-
 mu-plugins/blocks/notice/postcss/style.pcss | 16 ++++---
 2 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/mu-plugins/blocks/notice/index.php b/mu-plugins/blocks/notice/index.php
index 959260744..f3468ff54 100644
--- 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,47 @@
  */
 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 );
+
+	$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">$content</div></div>
+<!-- /wp:wporg/notice -->
+EOT;
+
+	return do_blocks( $block_markup );
 }
diff --git a/mu-plugins/blocks/notice/postcss/style.pcss b/mu-plugins/blocks/notice/postcss/style.pcss
index 8e5fc5b3b..9a7555a78 100644
--- 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;
@@ -33,6 +33,10 @@
 		margin-block-end: 0;
 	}
 
+	& br:first-child {
+		display: none;
+	}
+
 	& a:link,
 	& a:visited,
 	& a:hover,
@@ -43,7 +47,7 @@
 
 	&.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);
 	}
 }
 

From 1c7a4467b6fec159d617e225142374ce37572ad6 Mon Sep 17 00:00:00 2001
From: ren <18050944+renintw@users.noreply.github.com>
Date: Thu, 7 Dec 2023 00:04:53 +0900
Subject: [PATCH 2/5] Fix buggy layout on non-block theme.

---
 mu-plugins/blocks/notice/index.php | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/mu-plugins/blocks/notice/index.php b/mu-plugins/blocks/notice/index.php
index f3468ff54..0521a0013 100644
--- a/mu-plugins/blocks/notice/index.php
+++ b/mu-plugins/blocks/notice/index.php
@@ -52,13 +52,21 @@ function render_shortcode( $attr, $content = '', $tag ) {
 	$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">$content</div></div>
+<div class="wp-block-wporg-notice__content">$placeholder</div></div>
 <!-- /wp:wporg/notice -->
 EOT;
 
-	return do_blocks( $block_markup );
+	$processed_markup = do_blocks( $block_markup );
+	$final_markup = str_replace( $placeholder, $content, $processed_markup );
+
+	return $final_markup;
 }

From 237a20733b31f27c6ac15f0a62ed712d758507a8 Mon Sep 17 00:00:00 2001
From: ren <18050944+renintw@users.noreply.github.com>
Date: Thu, 14 Dec 2023 03:53:31 +0900
Subject: [PATCH 3/5] Add border radius 2px

---
 mu-plugins/blocks/notice/postcss/style.pcss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/mu-plugins/blocks/notice/postcss/style.pcss b/mu-plugins/blocks/notice/postcss/style.pcss
index 9a7555a78..1cbe2225e 100644
--- a/mu-plugins/blocks/notice/postcss/style.pcss
+++ b/mu-plugins/blocks/notice/postcss/style.pcss
@@ -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;

From 1555b231b924ce728f5bfcb98830462c44fadc3c Mon Sep 17 00:00:00 2001
From: ren <18050944+renintw@users.noreply.github.com>
Date: Thu, 14 Dec 2023 13:48:56 +0900
Subject: [PATCH 4/5] Set callout font size

---
 mu-plugins/blocks/notice/postcss/style.pcss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/mu-plugins/blocks/notice/postcss/style.pcss b/mu-plugins/blocks/notice/postcss/style.pcss
index 1cbe2225e..a93956bd8 100644
--- a/mu-plugins/blocks/notice/postcss/style.pcss
+++ b/mu-plugins/blocks/notice/postcss/style.pcss
@@ -62,8 +62,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 {
@@ -80,4 +81,5 @@
 
 .wp-block-wporg-notice__content {
 	align-self: center;
+	font-size: var(--wp--preset--font-size--small);
 }

From e5fa85ad851a958782e5791dc5cfaea8a87254fe Mon Sep 17 00:00:00 2001
From: ren <18050944+renintw@users.noreply.github.com>
Date: Thu, 14 Dec 2023 13:57:50 +0900
Subject: [PATCH 5/5] Remove action style for notice.

---
 mu-plugins/blocks/notice/postcss/style.pcss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/mu-plugins/blocks/notice/postcss/style.pcss b/mu-plugins/blocks/notice/postcss/style.pcss
index a93956bd8..9fadffe14 100644
--- a/mu-plugins/blocks/notice/postcss/style.pcss
+++ b/mu-plugins/blocks/notice/postcss/style.pcss
@@ -38,14 +38,6 @@
 		display: none;
 	}
 
-	& a:link,
-	& a:visited,
-	& a:hover,
-	& a:active,
-	& a:focus {
-		color: var(--wp--custom--wporg-notice--color--text);
-	}
-
 	&.alignleft,
 	&.alignright {
 		max-width: calc(var(--wp--style--global--content-size, 680px) * 0.66);