Notice block: Migrate to use inner blocks

[t-hamano]

The multiline prop of the RichText` component is deprecated. As a result, the following warning will be displayed in the browser console:

installHook.js:1 wp.blockEditor.RichText multiline prop is deprecated since version 6.1 and will be removed in version 6.3. Please use nested blocks (InnerBlocks) instead. See: https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/nested-blocks-inner-blocks/

To avoid this, migrate from the RichText component to Inner Blocks.

Testing Instructions

• Check out the trunk branch and insert some Notice blocks with some variations.
• Check out this branch and reload your browser.
  • You should see Updated Block: wporg/notice in your browser console.
  • All content in the Notice block should be preserved.

[ryelle]

Thanks for tackling this! It's working well for blocks created in the editor, but another use of this block is server-side - replacing the callout shortcodes & block. Could you check that as well?

An example you could look at is the PHP Inline Docs page (see the shortcodes in the markdown content).

The block markup is generated here:

wporg-mu-plugins/mu-plugins/blocks/notice/index.php

Lines 48 to 71 in 433e9cc

	/**
	* 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.
	$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 );
	return str_replace( $placeholder, $content, $processed_markup );
	}

[ryelle]

In my testing, the block example is empty now:

[t-hamano]

Fixed in 7202287

[t-hamano]

@ryelle Thanks for the review!

replacing the callout shortcodes & block. Could you check that as well?

This works just as it did before.

Shortcode

Editor

<!-- wp:shortcode -->
[info]Testing info message[/info]
<!-- /wp:shortcode -->

<!-- wp:shortcode -->
[tip]Testing tip message[/tip]
<!-- /wp:shortcode -->

Frontend

Block

Editor

<!-- wp:wporg/callout -->
<div class="callout callout-info">
	<!-- wp:paragraph -->
	<p>Paragraph Block</p>
	<!-- /wp:paragraph -->
	<!-- wp:list -->
	<ul class="wp-block-list">
		<!-- wp:list-item -->
		<li>List Item Block</li>
		<!-- /wp:list-item -->
		<!-- wp:list-item -->
		<li>List Item Block</li>
		<!-- /wp:list-item -->
	</ul>
	<!-- /wp:list -->
	<!-- wp:paragraph -->
	<p>Paragraph Block</p>
	<!-- /wp:paragraph -->
</div>
<!-- /wp:wporg/callout -->

Frontend