WordCamp Haneda 2019 - 4月20日(土)、4月21日(日) 大田区産業プラザPiOにて開催

ショートコードとブロックを共用する

はじめに

WordPress が、バージョン5以降にブロックエディターを導入しました。ショートコードは、ショートコード用のブロックに書き込む事で利用できます。しかし属性値などは、直接ショートコード内に書くしかありません。以前のエディター用には、ショートコードやその属性値をボタンから挿入するコードを書いていました。自作のプラグインにいくつかその様なコードを混ぜています。その処理をブロックで行う必要が生じました。そこで、必要最小限のコードで、ブロック作成に挑んでみました。

参考にしたのは、以下のコードです。

プラグイン作成

簡単なプラグインを作成してみました。投稿や固定ページ内にユーザー登録のボタンを表示するものです。

設定ー>一般ー>メンバーシップー>だれでもユーザー登録ができるようにする

と、連動します。チェックが入っている時に登録へのリンクが入った登録ボタンを表示します。

ブロックは参考コードに合わせてES5で書いてあります。

3ケースのショートコード、ブロックを用意しました。

  • ケース1 
    • 属性値無しの完結型ショートコード&ブロック
  • ケース2
    • 属性値付きの完結型ショートコード&ブロック
      • 属性値1はボタンの前にテキスト挿入
      • 属性値2はボタンの後ろにテキスト挿入
  • ケース3
    • 属性値無しの囲み型ショートコード&ブロック
      • 囲んだテキストをボタン内に表示

属性値付きの囲み型のショートコード&ブロックは上手くいきませんでした。おわかりになった方がいましたら、教えていただけるとありがたいです。

動作

わかりやすいように、動画にしました。テーマは、Twenty Seventeen です。

コード

/registerbutton.php

<?php
/*
Plugin Name: Register Button
Plugin URI: https://wordpress.org/plugins/register-button/
Version: 1.00
Description: Paste WordPress user registration button on the page.
Author: Katsushi Kawamori
Author URI: https://riverforest-wp.info/
Text Domain: register-button
*/

/*  Copyright (c) 2018- Katsushi Kawamori (email : dodesyoswift312@gmail.com)
    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; version 2 of the License.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
*/

	if(!class_exists('RegisterButton')) require_once( dirname(__FILE__).'/lib/RegisterButton.php' );

?>

/lib/RegisterButton.php

<?php
/**
 * Register Button
 * 
 * @package    RegisterButton
 * @subpackage RegisterButton
    Copyright (c) 2018- Katsushi Kawamori (email : dodesyoswift312@gmail.com)
    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; version 2 of the License.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
*/

$registerbutton = new RegisterButton();

class RegisterButton {

	/* ==================================================
	 * Construct
	 * @since	1.00
	 */
	public function __construct() {

		add_action( 'init', array($this, 'php_block_init_1') );
		add_action( 'init', array($this, 'php_block_init_2') );
		add_action( 'init', array($this, 'php_block_init_3') );

	}

	/* ==================================================
	 * Register Button block & short code Case1
	 * 
	 * @since	1.00
	 */
	public function php_block_init_1() {

		wp_register_script(
			'register-block-1',
			plugins_url( 'js/register-block_1.js', dirname(__FILE__) ),
			array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
		);

		register_block_type( 'register-button/register-block-1', array(
			'editor_script'   => 'register-block-1',
			'render_callback' => array($this, 'register1_func'),
		) );

		add_shortcode( 'register1', array($this, 'register1_func') );

	}

	/* ==================================================
	 * short code
	 * @param	array	$attributes
	 * @return	string	$register_contents
	 */
	public function register1_func() {

		if ( get_option('users_can_register') ) {
			// Register
			$register_contents = '<input type="button" value="'.__('Register').'" onClick="location.href=''.wp_login_url().'?action=register'.''">';
		} else {
			// Can not Register
			$register_contents = __('Sorry, new registrations are not allowed at this time.');
		}

		return $register_contents;

	}

	/* ==================================================
	 * Register Button block & short code Case2
	 * 
	 * @since	1.00
	 */
	public function php_block_init_2() {

		wp_register_script(
			'register-block-2',
			plugins_url( 'js/register-block_2.js', dirname(__FILE__) ),
			array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
		);

		register_block_type( 'register-button/register-block-2', array(
			'attributes'      => array(
				'text1' => array(
					'type' => 'string',
				),
				'text2' => array(
					'type' => 'string',
				),
			),
			'editor_script'   => 'register-block-2',
			'render_callback' => array($this, 'register2_func'),
		) );

		add_shortcode( 'register2', array($this, 'register2_func'));

	}

	/* ==================================================
	 * short code
	 * @param	array	attributes
	 * @return	string	$register_contents
	 */
	public function register2_func( $attributes ) {

		extract(shortcode_atts(array(
			'text1' => '',
			'text2' => ''
		), $attributes));

		if ( !empty($attributes) ) {
			if ( array_key_exists( "text1", $attributes ) ) {
				$text1 = $attributes['text1'];
			} else {
				$text1 = NULL;
			}
			if ( array_key_exists( "text2", $attributes ) ) {
				$text2 = $attributes['text2'];
			} else {
				$text2 = NULL;
			}
		} else {
			$text1 = NULL;
			$text2 = NULL;
		}

		if ( get_option('users_can_register') ) {
			// Register
			$register_contents = '<input type="button" value="'.__('Register').'" onClick="location.href=''.wp_login_url().'?action=register'.''">';
		} else {
			// Can not Register
			$register_contents = __('Sorry, new registrations are not allowed at this time.');
		}

		$register_contents = $text1.$register_contents.$text2;

		return $register_contents;

	}

	/* ==================================================
	 * Register Button block & short code Case3
	 * 
	 * @since	1.00
	 */
	public function php_block_init_3() {

		wp_register_script(
			'register-block-3',
			plugins_url( 'js/register-block_3.js', dirname(__FILE__) ),
			array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
		);

		register_block_type( 'register-button/register-block-3', array(
			'attributes'      => array(
				'text1' => array(
					'type' => 'string',
				),
				'text2' => array(
					'type' => 'string',
				),
			),
			'editor_script'   => 'register-block-3',
			'render_callback' => array($this, 'register3_func'),
		) );

		add_shortcode( 'register3', array($this, 'register3_func'));

	}

	/* ==================================================
	 * short code
	 * @param	array	attributes
	 * @return	string	$content
	 */
	public function register3_func( $attributes, $content = null ) {

		$content = sanitize_text_field($content);

		if ( get_option('users_can_register') ) {
			// Register
			$register_contents = '<input type="button" value="'.$content.'" onClick="location.href=''.wp_login_url().'?action=register'.''">';
		} else {
			// Can not Register
			$register_contents = '<input type="button" value="'.$content.'" onClick="location.href=''.wp_login_url().'?action=register'.''" disabled="disabled">';
		}

		return do_shortcode($register_contents);

	}

}

?>

/js/register-block_1.js

var el = wp.element.createElement,
	registerBlockType = wp.blocks.registerBlockType,
	ServerSideRender = wp.components.ServerSideRender,
	TextControl = wp.components.TextControl,
	InspectorControls = wp.editor.InspectorControls;

registerBlockType( 'register-button/register-block-1', {
	title: 'Register Block Case 1',
	icon: 'megaphone',
	category: 'widgets',

	edit: function() {
		return (
			el( ServerSideRender, {
				block: 'register-button/register-block-1',
			} )
		);
	},

	save: function() {
		return null;
	},
} );

/js/register-block_2.js

var el = wp.element.createElement,
	registerBlockType = wp.blocks.registerBlockType,
	ServerSideRender = wp.components.ServerSideRender,
	TextControl = wp.components.TextControl,
	InspectorControls = wp.editor.InspectorControls;

registerBlockType( 'register-button/register-block-2', {
	title: 'Register Block Case 2',
	icon: 'megaphone',
	category: 'widgets',

	edit: function( props ) {
		return [
			el( ServerSideRender, {
				block: 'register-button/register-block-2',
				attributes: props.attributes,
			} ),
			el( InspectorControls, {},
				el( TextControl, {
					label: 'Text 1',
					value: props.attributes.text1,
					onChange: ( value ) => { props.setAttributes( { text1: value } ); },
				} ),
				el( TextControl, {
					label: 'Text 2',
					value: props.attributes.text2,
					onChange: ( value ) => { props.setAttributes( { text2: value } ); },
				} )
			),
		];

	},

	save: function() {
		return null;
	},

} );

/js/register-block_3.js

var el = wp.element.createElement,
	Fragment = wp.element.Fragment
	registerBlockType = wp.blocks.registerBlockType,
	RichText = wp.editor.RichText,
	BlockControls = wp.editor.BlockControls,
	AlignmentToolbar = wp.editor.AlignmentToolbar,
	ServerSideRender = wp.components.ServerSideRender,
	TextControl = wp.components.TextControl,
	InspectorControls = wp.editor.InspectorControls;

registerBlockType( 'register-button/register-block-3', {
	title: 'Register Block Case 3',
	icon: 'megaphone',
	category: 'layout',
	attributes: {
		content: {
			type: 'string',
			source: 'html',
			selector: 'p',
		}
	},

	edit: function( props ) {

		function onChangeContent( newContent ) {
			props.setAttributes( { content: newContent } );
		}

		return [
			el(
				RichText,
				{
					key: 'editable',
					tagName: 'p',
					className: props.className,
					style: { textAlign: props.attributes.alignment },
					onChange: onChangeContent,
					value: props.attributes.content,
				}
			),
			el( ServerSideRender, {
				block: 'register-button/register-block-3',
			} ),
		];

	},

	save: function( props ) {
        return el( RichText.Content, {
            tagName: 'p',
            className: props.className,
            style: { textAlign: props.attributes.alignment },
            value: props.attributes.content
        } );
	},

} );

ダウンロード

このプラグインは、以下からダウンロードできます。あくまで勉強・サンプル用に作ったので実用にはほど遠いです。また、自己責任でご使用ください。