W celu stworzenia pluginu, który doda blok gutenberg zainstalujemy środowisko, które nam to ułatwi. Tworzymy folder z nazwą pluginu.
Mając zainstalowanego node.js wpisujemy w katalogu projektu
npm init -y (package.json)
npm install @wordpress/scripts --save-dev
W katalogu głównym tworzymy plik index.php
Tworzymy folder src i wewnątrz umieszczamy plik index.js
W powstałym pliku package.json dodajemy instrukcje:
"scripts":{
"build":"wp-scripts build",
"start": "wp-scripts start",
Komendą npm run start włączamy śledzenie projektu i automatyczną zamianę JSX na składnię zrozumiałą dla przeglądarki.
Przykład pluginu
Przykład pluginu, który pozwala adminowi wprowadzić wartość, zapisać ją w bazie danych i wypisać ją na froncie.
Plik index.php
<?php
/*
Plugin Name: Plugin 1
Description: Plugin desc
Version: 1.0
Author: Wilnox
Author URI: https://wilnox.com/
*/
if( ! defined( 'ABSPATH' ) ) exit;
class MyNewClass {
function __construct() {
add_action('init', array($this, 'adminAssets'));
}
function adminAssets() {
wp_register_script('ournewblocktype', plugin_dir_url(__FILE__) . 'build/index.js', array('wp-blocks', 'wp-element'));
register_block_type('wilnox/my-first-plugin', array('editor_script'=>'ournewblocktype',
'render_callback'=>array($this, 'theHTML')
));
}
function theHTML($attributes){
return '<p>todays sky is ' . esc_html($attributes['skyColor']). '</p>';
}
}
$myNewClass = new MyNewClass();
Plik index.js
wp.blocks.registerBlockType("wilnox/my-first-plugin", {
title: "Plugin 1",
icon: "smiley",
category: "common",
attributes:{
skyColor:{type:"string"}
},
edit: function (props) {
function updateSkyColor(event){
props.setAttributes ({skyColor:event.target.value})
}
return (
<div>
<input type="text" placeholder="sky color" value={props.attributes.skyColor} onChange={updateSkyColor} />
</div>
)
},
save: function (props) {
return null
}
})