WordPress – własny blok Pros/Cons w Gutenberg

W tym wpisie przedstawię jak można stworzyć własny blok w WordPress. Stworzymy blok pokazujący listę wad i zalet w dwóch kółkach.

Tak naprawdę tworzymy plugin do WordPressa. W instalacji wordpressa w katalogu wp-content/plugins stwórzmy folder „example-blocks” a w nim plik block.json z poniższą zawartością:

{
	"$schema": "https://json.schemastore.org/block.json",
	"apiVersion": 2,
	"name": "example-blocks/pros-cons",
	"title": "Pros / Cons",
	"icon": "index-card",
	"category": "layout",
	"attributes": {
		"pros": {
			"type": "string",
			"source": "html",
			"selector": ".pros"
		},
		"cons": {
			"type": "string",
			"source": "html",
			"selector": ".cons"
		}
	},
	"editorScript": "file:./block.js",
	"style": "file:./style.css"
}

Name to nazwa naszego bloku, title to nazwa wyświetlana dla użytkownika. Konieczne jest dodanie pliku edytora i opcjonalnie stylów.

Plik edytora block.js w naszym wypadku wygląda tak:

( function ( blocks, _, i18n, element, _, _, blockEditor ) {
  var __ = i18n.__;
  var el = element.createElement;
  var RichText = blockEditor.RichText;
  var useBlockProps = blockEditor.useBlockProps;

  blocks.registerBlockType( 'example-blocks/pros-cons', {
    title: 'Pros / Cons',
    icon: 'index-card',
    category: 'layout',
    attributes: {
      pros: {
        type: 'array',
        source: 'children',
        selector: '.pros',
      },
      cons: {
        type: 'array',
        source: 'children',
        selector: '.cons',
      },
    },

    example: {
      attributes: {
        pros: [
          { type: 'li', props: { children: [ 'First pros...' ] } },
          { type: 'li', props: { children: [ 'Second pros...' ] } },
        ],
        cons: [
          { type: 'li', props: { children: [ 'First cons...' ] } },
          { type: 'li', props: { children: [ 'Second pros...' ] } },
        ],
      },
    },

    edit: function ( props ) {
      var attributes = props.attributes;

      return el(
        'div',
        useBlockProps( { className: props.className } ),
        el( 'h3', {}, 'Pros:' ),
        el( RichText, {
          tagName: 'ul',
          multiline: 'li',
          placeholder: 'Write a list of pros…',
          value: attributes.pros,
          onChange: function ( value ) {
            props.setAttributes( { pros: value } );
	  },
          className: 'pros',
        } ),
        el( 'h3', {}, 'Cons:' ),
        el( RichText, {
          tagName: 'ul',
	  multiline: 'li',
	  placeholder: 'Write a list of cons…',
	  value: attributes.cons,
	  onChange: function ( value ) {
	    props.setAttributes( { cons: value } );
	  },
	} )
    );
  },
  save: function ( props ) {
    var attributes = props.attributes;

    return el(
      div',
      useBlockProps.save( { className: props.className } ),
      el('div',
        { className: 'row' },
        el('div',
          { className: 'col-md-4 offset-md-1' },
        el('div',
          { className: 'pros-cons' },
          el('div',
            { className: 'pros-cons-text' },
            el( 'h3', {}, 'PROS' ),
            el( RichText.Content, {
              tagName: 'ul',
              className: 'pros',
              value: attributes.pros,
            } ),
          )
        )
      ),
      el('div',
        { className: 'col-md-4 offset-md-2' },
        el('div',
          { className: 'pros-cons cons' },
          el('div',
            { className: 'pros-cons-text' },
            el( 'h3', {}, 'CONS' ),
            el( RichText.Content, {
              tagName: 'ul',
              className: 'cons',
              value: attributes.cons,
            } ),
          )
        )
      ),
    ),
   );
},
} );
} )(
    window.wp.blocks,
    window.wp.editor,
    window.wp.i18n,
    window.wp.element,
    window.wp.components,
    window._,
    window.wp.blockEditor
);

Widzimy tutaj strukturę jaka będzie generowana w czasie edycji bloku w panelu admina oraz po zapisaniu bloku. Widzimy że podobnie jak w Reakcie tworzymy tutaj elementy, ich dzieci i ustalamy dla nich klasy CSS.

W pliku style.css możemy dodać własne style, pamiętajmy że element nadrzędny w naszym przypadku będzie miał klasę wp-block-example-blocks-pros-cons

Następnie tworzymy plik index.php z taką zawartością:

<?php
/**
 * Plugin Name: Example blocks
 * Version: 1.0.0
 * Author: Kamil Wyremski
 */

defined( 'ABSPATH' ) || exit;

function example_blocks_register_block() {

	if ( ! function_exists( 'register_block_type' ) ) {
		return;
	}
	register_block_type( __DIR__ );
	
	wp_register_style('example_blocks', plugins_url('style.css',__FILE__ ));
	wp_enqueue_style('example_blocks');

}
add_action( 'init', 'example_blocks_register_block' );

Tutaj zarejestrujemy nasz blok oraz style do niego.

W pliku block.asset.php dodajemy zależności:

<?php return array('dependencies' => array('wp-blocks', 'wp-element', 'wp-i18n', 'wp-editor'), 'version' => 'a35cc1c098b69994c9c6d6dc1416bb90');

Teraz możemy w panelu admina w WordPressie przejść do Wtyczki, aktywować nasz plugin o nazwie „Example blocks” i jeśli przejdziemy do edycji/dodawania wpisu zobaczymy nowy blok o nazwie Pros / Cons.

Zamieszczam link do GitHub z kodem z tego wpisu: https://github.com/kamilwyremski/wordpress-example-blocks