diff --git a/mu-plugins/blocks/notice/index.php b/mu-plugins/blocks/notice/index.php index ebc9fb75..a5b9bb42 100644 --- a/mu-plugins/blocks/notice/index.php +++ b/mu-plugins/blocks/notice/index.php @@ -9,6 +9,8 @@ // Run after `WPorg_Handbook_Callout_Boxes` registers the shortcodes. add_action( 'init', __NAMESPACE__ . '\init', 11 ); +add_filter( 'pre_render_block', __NAMESPACE__ . '\render_callout_block_as_notice', 11, 2 ); + /** * Registers the block using the metadata loaded from the `block.json` file. * Behind the scenes, it registers also all assets so they can be enqueued @@ -26,16 +28,13 @@ function init() { } /** - * Display the callout shortcodes using the notice block. + * Maps a callout type to a notice type. * - * @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. + * @param string $type The callout type. + * @return string The corresponding notice type. */ -function render_shortcode( $attr, $content, $tag ) { - $shortcode_mapping = array( +function map_type( $type ) { + $mapping = array( 'info' => 'info', 'tip' => 'tip', 'alert' => 'alert', @@ -43,15 +42,17 @@ function render_shortcode( $attr, $content, $tag ) { '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 ); + return $mapping[ $type ] ?: 'tip'; +} +/** + * Generates and processes block markup for a notice. + * + * @param string $type The notice type. + * @param string $content The content to insert into the block. + * @return string The processed block markup. + */ +function generate_notice_block_markup( $type, $content ) { // 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. @@ -66,7 +67,55 @@ function render_shortcode( $attr, $content, $tag ) { EOT; $processed_markup = do_blocks( $block_markup ); - $final_markup = str_replace( $placeholder, $content, $processed_markup ); + return str_replace( $placeholder, $content, $processed_markup ); +} + +/** + * 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 ) { + $type = map_type( $tag ); + + // 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 ); + + return generate_notice_block_markup( $type, $content ); +} + +/** + * Renders a callout block as a notice block. + * + * @param string|null $pre_render The pre-rendered content or null. + * @param array $parsed_block The parsed block array. + * @return string|null The rendered notice or the original pre-render value. + */ +function render_callout_block_as_notice( $pre_render, $parsed_block ) { + if ( is_admin() || 'wporg/callout' !== $parsed_block['blockName'] ) { + return $pre_render; + } + + $callout_wrapper = $parsed_block['innerHTML']; + // Extract the specific "callout-*" class and remove the "callout-" prefix + preg_match( '/\bcallout-([\w-]+)\b/', $callout_wrapper, $matches ); + $tag = $matches[1] ?? 'tip'; + $type = map_type( $tag ); + + $content = ''; + foreach ( $parsed_block['innerBlocks'] as $inner_block ) { + $content .= render_block( $inner_block ); + } + // Sanitize message content. + $content = wp_kses_post( $content ); - return $final_markup; + return generate_notice_block_markup( $type, $content ); } diff --git a/mu-plugins/blocks/notice/postcss/style.pcss b/mu-plugins/blocks/notice/postcss/style.pcss index 77bc89f6..24fee740 100644 --- a/mu-plugins/blocks/notice/postcss/style.pcss +++ b/mu-plugins/blocks/notice/postcss/style.pcss @@ -27,18 +27,6 @@ align-self: start; } - & p:first-child { - margin-block-start: 0; - } - - & p:last-child { - margin-block-end: 0; - } - - & br:first-child { - display: none; - } - &.alignleft, &.alignright { max-width: calc(var(--wp--style--global--content-size, 680px) * 0.66); @@ -78,4 +66,25 @@ .wp-block-wporg-notice__content { align-self: center; + + & p:empty, + & ul:empty, + & ol:empty, + & br:first-child { + display: none; + } + + & :first-child, + &:has(:first-child:empty) :nth-child(2) { + margin-block-start: 0; + } + + & :last-child, + &:has(:last-child:empty) :nth-last-child(2), + /* o2 adds a data script tag to the notice content on some Make blogs. + * In this case we need to remove bottom margin from the second to last element instead. + */ + &:has(.o2-data) :nth-last-child(2) { + margin-block-end: 0; + } }