Jak zamienić shortcody na bloki dynamiczne? Rozwiązanie problemu niedziałających shortcodów w WordPress 6.2.1

W ostatnich dniach świat obiegła wiadomość nowej aktualizacji bezpieczeństwa w WordPress pod numerem 6.2.1. DUŻYM szokiem dla społeczności stało się usunięcie przez Automatic możliwości umieszczania shortcodów w niektórych częściach edytora motywu Gutenberg.

Dużo agencji, używając już FSE (Full Site Editing), umieszczało treści dynamiczne poprzez shortcody. I teraz ta funkcjonalność z powodów bezpieczeństwa została usunięta. Wszystkie swoje żale wylewali i wylewają deweloperzy w jednym z ticketów:

https://core.trac.wordpress.org/ticket/58333

Ale przecież. WordPress odkąd wprowadził Gutenberga do swojego core’a, dał możliwość tworzenia dynamicznych bloków. Problem z wersją 6.2.1 można rozwiązać właśnie przez skopiowanie funkcji shortcodu do bloku dynamicznego.

W pliku o nazwie blog-content.php mam utworzony shortcode do wyświetlania archiwum postów.

<?php // function that runs when shortcode is called
function wpb_demo_shortcodeblog() {


  ob_start();
  if ( have_posts() ) :
  echo '<div class="blog-posts">';
  echo '<div class="wp-block-columns">';
  			while ( have_posts() ) : the_post();
        $link = get_the_permalink();
        $date = get_the_date('d.m.Y');
        $image_id = get_post_thumbnail_id();
        $image_url = wp_get_attachment_image_src($image_id,'medium');
        $image_url = $image_url[0];
        $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
        $image_title = get_the_title($image_id);
              // This is the output for your entry so what you want to do for each post.
              echo '<div class="wp-block-column">';
                echo '<div class="boxs">';
                      echo '<a href="'. $link .'">';
                      if ($image_id) {
                      echo '<div class="bg" style="background-image:url('. $image_url .');">';
                    echo '</div>';
                      }
                      echo '<div class="box-in">';
                        echo '<div class="date">'. $date .'</div>';
                        echo '<div class="box-title">'. get_the_title() .'</div>';
                        echo '<div class="box-content">'. get_the_excerpt() .'</div>';
                      echo '<div class="button-trans">Zobacz więcej</div>';
                      echo '</div>';
                      echo '</a>';
                      echo '</div>';
                      echo '</div>';
  			endwhile;
  echo '</div>';
  			the_posts_pagination( array(
  				'prev_text'          => __( 'Poprzednia', 'enovatio' ),
  				'next_text'          => __( 'Następna', 'enovatio' ),
  				'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'wolkahurt' ) . ' </span>',
  			) );

  		else :

  		endif;
      echo '</div>';
  return ob_get_clean();
  }
// register shortcode
add_shortcode('blog-content', 'wpb_demo_shortcodeblog'); ?>

Aby stworzyć działającą taką funkcjonalność w edytorze motywu Gutenberg należy nasze shortcody zamienić na bloki dynamiczne. W tym celu tworzymy własny plugin, o ile jeszcze go nie mamy. Najlepiej stworzyć go przez @wordpress/scripts(). Szczegóły opisałem poniżej.

Dlaczego nie korzystam z Create Guten Block?

W naszej instancji tworzymy folder bloku np. archive. W nim tworzymy dwa pliki block.js oraz block.php.

Block.js pozwoli nam pokazać nasz blok w edytorze. Troszeczkę reacta 🙂

const { __ } = wp.i18n; 
const { registerBlockType } = wp.blocks; 
const { RawHTML, Component, Fragment } = wp.element;

registerBlockType( 'cgb/archive', {
	
	title: __( 'Blok archiwum pętla' ), // Block title.
	icon: 'shield', 
	category: 'common', 
	keywords: [
		__( '' ),
		__( 'CGB Example' ),
		__( 'create-guten-block' ),
	],

	
	edit: ( props ) => {
		
		return (
			<div className={ props.className }>
				<p>Tu wyświetli się nasze archiwum postów danej kategorii</p>
			</div>
		);
	},
	save: ( props ) => {
    return null
},
} );

W ten sposób gdy umieścimy blok archiwum, po stronie edytora pojawi nam się: „Tu wyświetli się nasze archiwum postów danej kategorii”. I teraz przechodzimy do pliku block.php

<?php /**
 * Callback for rendering Tut 06
 */

 function register_api_blocks_posts() {
     register_block_type(
         'cgb/archive',
         array(
             'render_callback' => 'archive_call',
         )
     );
 }

 add_action('init', 'register_api_blocks_posts');

function archive_call( $atts ) {
  // prevent loading in Editor screen
  if( function_exists( 'get_current_screen' ) ) { return; }

  ob_start();
  if ( have_posts() ) :
  echo '<div class="blog-posts">';
  echo '<div class="wp-block-columns">';
  			while ( have_posts() ) : the_post();
        $link = get_the_permalink();
        $date = get_the_date('d.m.Y');
        $image_id = get_post_thumbnail_id();
        $image_url = wp_get_attachment_image_src($image_id,'medium');
        $image_url = $image_url[0];
        $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
        $image_title = get_the_title($image_id);
              // This is the output for your entry so what you want to do for each post.
              echo '<div class="wp-block-column">';
                echo '<div class="boxs">';
                      echo '<a href="'. $link .'">';
                      if ($image_id) {
                      echo '<div class="bg" style="background-image:url('. $image_url .');">';
                    echo '</div>';
                      }
                      echo '<div class="box-in">';
                        echo '<div class="date">'. $date .'</div>';
                        echo '<div class="box-title">'. get_the_title() .'</div>';
                        echo '<div class="box-content">'. get_the_excerpt() .'</div>';
                      echo '<div class="button-trans">Zobacz więcej</div>';
                      echo '</div>';
                      echo '</a>';
                      echo '</div>';
                      echo '</div>';
  			endwhile;
  echo '</div>';
  			the_posts_pagination( array(
  				'prev_text'          => __( 'Poprzednia', 'enovatio' ),
  				'next_text'          => __( 'Następna', 'enovatio' ),
  				'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'wolkahurt' ) . ' </span>',
  			) );

  		else :

  		endif;
      echo '</div>';
  return ob_get_clean();

}

A tam tworzymy jedynie callback dopinający funkcję do naszego bloku cgb/archive. Wewnątrz funkcji z callback wklejamy „wnętrze” naszego shortcodu.

I „włala” 🙂