diff --git a/mu-plugins/blocks/notice/index.php b/mu-plugins/blocks/notice/index.php index 959260744..0521a0013 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,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 = ''; + + $block_markup = << +
+
+
$placeholder
+ +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 index 8e5fc5b3b..9fadffe14 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; @@ -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); }