Pay With Paypal Block: Add fallback code blocks for different contexts.

[kwight]

On WordPress.com, the Reader, Masterbar notifications, and email notifications are all different contexts in which Gutenberg blocks can be viewed, and they've each got their own limitations and issues with what to render (for example, iframes and other elements are impossible in email, while certain interactions like PayPal purchase buttons are inappropriate in notifications). Blocks need to be able to produce fallback markup when displaying in these different contexts.

Email	Reader	Notifs

In email, we could keep the same layout and styling, and have the PayPal button image just link to the post. We can do the same with notifications, but due to their fixed narrow width, also make any product image full-width (as already happens). It feels like the Reader block can stay just the featured image in the list view, but should be fully functional in the single view (which would require a way to enqueue its necessary front-end JS).

The render_callback property can be used directly in blocks we control to define these fallbacks. Let's add context identifiers and code blocks for the Pay With PayPal block, which will also stand as an example for how to handle other blocks.

register_block_type( 'namespace/my-block', [
  'render_callback' => 'render_block',
] );
 
function render_block( $attributes, $content ) {
  if ( $is_email_context ) {
    // Return email fallback.
  }
  if ( $is_reader_context ) {
    // Return reader fallback.
  }
  if ( $is_notifications_context ) {
    // Return notifications fallback.
  }
 
  return $content;
}

See: paYKcK-FI-p2
See: 217-gh-dotcom-manage

[mmtr]

As I noted in paYKcK-FI-p2#comment-813 the Pay with PayPal block is a special case since the block saves a shortcode into the post content, so neither the render_callback function nor the render_block filter are fired (shortcodes bypass the whole block rendering flow).

The alternative for this block would be to implement the fallback as part of the shortcode output.