1

I would like to add a widget in gutemberg as block like this :

enter image description here

Is there a way to do it instead of using a shortcode ?

1

I found the solution here and here.

My OOP Code :

Block_Type

abstract Class Block_Type
{
    public $handle;
    public $handle_editor;
    public $handle_block;
    private $editor_js_file;
    public $editor_js_file_path;
    private $editor_css_file;
    public $editor_css_file_path;
    private $css_file;
    public $css_file_path;

    public function __construct( $handle, $editor_js_file_path = null, $editor_css_file_path = null, $css_file_path = null ) {
        $this->handle = "h4a-" . $handle;
        $this->handle_editor = $this->handle . "-editor";
        $this->handle_block = $this->handle . "-block";
        $this->editor_js_file_path  = ( !empty( $editor_js_file_path ) )  ?  $editor_js_file_path : $this->getDir() . "/js/index.js";
        $this->editor_js_file       = basename( $this->editor_js_file_path, ".js");
        $this->editor_css_file_path = ( !empty( $editor_css_file_path ) ) ? $editor_css_file_path : $this->getDir() . "/css/editor.css";
        $this->editor_css_file      = basename( $this->editor_css_file_path, ".css");
        $this->css_file_path        = ( !empty( $css_file_path ) )        ? $css_file_path        : $this->getDir() . "/css/style.css";
        $this->css_file             = basename( $this->css_file_path, ".css");
        $this->register_script_editor();
        $this->register_style_editor();
        $this->register_style();
        $this->register_block_type();
    }

    protected function register_script_editor()
    {
        wp_register_script(
            $this->handle_editor,
            plugins_url( $this->editor_js_file, __FILE__ ),
            array(
                'wp-blocks',
                'wp-i18n',
                'wp-element',
            ),
            filemtime( $this->editor_js_file_path )
        );
    }

    protected function register_style_editor()
    {
        wp_register_style(
            $this->handle_editor,
            plugins_url( $this->editor_css_file, __FILE__ ),
            array(),
            filemtime( $this->editor_css_file_path )
        );
    }

    protected function register_style()
    {
        wp_register_style(
            $this->handle_block,
            plugins_url( $this->css_file, __FILE__ ),
            array(),
            filemtime( $this->css_file_path )
        );
    }

    protected function register_block_type()
    {
        register_block_type( 'h4a/' . $this->handle, array(
            'editor_script' => $this->handle_editor,
            'editor_style'  => $this->handle_editor,
            'style'         => $this->handle_block,
        ) );
    }

    private function getDir() {
        return dirname((new ReflectionClass(static::class))->getFileName());
    }
} 

My_Block_Type

class My_Block_Type extends Block_Type
{
    public function __construct()
    {
        $handle = "my-block-type";
        parent::__construct( $handle );
    }
}

php to init

include_once "Block_Type.php";
include_once "My_Block_Type.php";
public function create_block_types(){
    new My_Block_Type();
}
add_action( "init", "create_block_types", 1 );
  • I let time to know if I need to complete my answer, and if there are some problems before accept it. – J.BizMai Jun 12 at 23:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.