WordPressのカスタムブロックを作る方法

$encoded_title = urlencode( get_the_title( $post_id ) );
$encoded_url = urlencode( get_the_permalink( $post_id ) );
echo '<a href="https://twitter.com/share?url=' . $encoded_url .
  '&text=' . $encoded_title . '&via=icoro&related=icoro"' .
  'rel="nofollow noopener" target="blank" class="share-tw">Twitter</a>';

# ローカルに立てたWordPressのプラグインディレクトリに移動
# /path/to/wordpress は wordpress のインストールされてるディレクトリパス
% cd /path/to/wordpress/public/wp-content/plugins

# create-block を実行してファイル一式を生成
% npx @wordpress/create-block social-button-block
Need to install the following packages:
@wordpress/create-block@4.31.0
Ok to proceed? (y) 

Creating a new WordPress plugin in the social-button-block directory.

Creating a "block.json" file.

Creating a "package.json" file.

Installing `@wordpress/scripts` package. It might take a couple of minutes...

Formatting JavaScript files.

Compiling block.

Done: WordPress plugin Social Button Block bootstrapped in the social-button-block directory.

You can run several commands inside:

  $ npm start
    Starts the build for development.

  $ npm run build
    Builds the code for production.

  $ npm run format
    Formats files.

  $ npm run lint:css
    Lints CSS files.

  $ npm run lint:js
    Lints JavaScript files.

  $ npm run plugin-zip
    Creates a zip file for a WordPress plugin.

  $ npm run packages-update
    Updates WordPress packages to the latest version.

To enter the directory type:

  $ cd social-button-block

You can start development with:

  $ npm start

Code is Poetry

social-button-block/
- build/
- node_modules/
- src/
  - block.json
  - edit.js
  - editor.scss
  - index.js
  - save.js
  - style.js
  - style.scss
  - view.js
- .editorconfig
- .gitignore
- package-lock.json
- package.json
- readme.txt
- social-button-block.php

social-button-block % npm start

/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from '@wordpress/blocks';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './style.scss';

/**
 * Internal dependencies
 */
import Edit from './edit';
//import save from './save'; // コメントアウト
import metadata from './block.json';
import ServerSideRender from '@wordpress/server-side-render'; //追加
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( metadata.name, {
	/**
	 * @see ./edit.js
	 */
	edit: Edit,

	/**
	 * @see ./save.js
	 */
	//save, // コメントアウト
} );

<?php
/**
 * Plugin Name:       Social Button Block
 * Description:       Example block scaffolded with Create Block tool.
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       social-button-block
 *
 * @package           create-block
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * ソーシャルブックマークを出力する
 * @param Array $attributes
 * @param String $content 
 * @param $block
 * @reference
 * editor - Gutenberg dynamic block render_callback gives null for $post - WordPress Development Stack Exchange
 * https://wordpress.stackexchange.com/questions/391406/gutenberg-dynamic-block-render-callback-gives-null-for-post
 */
function render_social_button_block( $attributes, $content, $block ) {
	
  # ツイ垢をハードコーディングしてるので、適当に修正してください。
  $tw_acc = "icoro";
	$wrapper_attributes = get_block_wrapper_attributes();

	$tw_href = "";
	$fb_href = "";
	$hb_href = "";
	$ln_href = "";
	$pk_href = "";

	if ( isset( $block->context['postId'] ) ) {
		$post_id = $block->context['postId'];

		$encoded_title = urlencode( get_the_title( $post_id ) );
		$encoded_url = urlencode( get_the_permalink( $post_id ) );

		$tw_href = "href=\"https://twitter.com/share?url={$encoded_url}&text={$encoded_title}&via={$tw_acc}&related={$tw_acc}\"";
		$fb_href = "href=\"http://www.facebook.com/share.php?u={$encoded_url}\"";
		$hb_href = "href=\"http://b.hatena.ne.jp/add?mode=confirm&url={$encoded_url}&title={$encoded_title}\"";
		$ln_href = "href=\"https://social-plugins.line.me/lineit/share?url={$encoded_url}\"";
		$pk_href = "href=\"http://getpocket.com/edit?url={$encoded_url}&title={$encoded_title}\"";
	}

	$bookmark =
		"<ul {$wrapper_attributes}>" .
		"<li><a {$tw_href} rel=\"nofollow noopener\" target=\"blank\" class=\"share-tw\">Twitter</a></li>" .
		"<li><a {$fb_href} rel=\"nofollow noopener\" target=\"blank\" class=\"share-fb\">Facebook</a></li>" .
		"<li><a {$hb_href} rel=\"nofollow noopener\" target=\"blank\" class=\"share-hb\">はてな</a></li>" .
		"<li><a {$ln_href} rel=\"nofollow noopener\" target=\"blank\" class=\"share-ln\">LINE</a></li>" .
		"<li><a {$pk_href} rel=\"nofollow noopener\" target=\"blank\" class=\"share-pk\">Pocket</a></li>" .
		"</ul>";

	return $bookmark;
}

/**
 * Registers the block using the metadata loaded from the `block.json` file.
 * Behind the scenes, it registers also all assets so they can be enqueued
 * through the block editor in the corresponding context.
 *
 * @see https://developer.wordpress.org/reference/functions/register_block_type/
 */
function social_button_block_social_button_block_block_init() {
	register_block_type( __DIR__ . '/build', 
    // 配列を追加
    array(
			'uses_context' => [ 'postId' ],
			'render_callback' => 'render_social_button_block'
		)
	);
}
add_action( 'init', 'social_button_block_social_button_block_block_init' );

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "create-block/social-button-block",
	"version": "0.1.0",
	"title": "Social Button Block",
	"category": "widgets",
	"icon": "share-alt2", //"smiley" から変更
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"usesContext": [ "postId" ], //追加
	"textdomain": "social-button-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js"
}

function social_button_block_social_button_block_block_init() {
	register_block_type( __DIR__ . '/build', array(
			//'uses_context' => [ 'postId' ], // コメントアウトできる
			'render_callback' => 'render_social_button_block'
		)
	);
}

["available_context":protected]=>
  array(2) {
    ["postId"]=>
    int(12472)
    ["postType"]=>
    string(4) "post"
  }

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

import ServerSideRender from '@wordpress/server-side-render'; //追加

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit( props ) {
	const blockProps = useBlockProps();
	return (
		<div { ...useBlockProps() }>
			<ServerSideRender
				block={ props.name }
				attributes={ props.attributes }
			/>
		</div>
	);
}

/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
.wp-block-create-block-social-button-block {
	margin: 3em 0;
	padding: 0;
	line-height: 2em;
	text-align: center;

	li {
		display: inline;
		line-height: 0;
		font-size: 0;
		margin:0;
		&:not(:first-child) {
			margin-left: 3px;
		}
	}

	a {
		display: inline-block;
		padding: 1rem;
		border-radius: 3px;
		background-color: #bbb;
		font-size: 0.9rem;
		color: #fff;
		text-decoration: none;
	}

	a.share-tw { background: #1DA1F2; }
	a.share-fb { background: #1877f2; }
	a.share-hb { background: #5279E7; }
	a.share-ln { background: #00B900; }
	a.share-pk { background: #ee4056; }
}

/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

//.wp-block-create-block-social-button-block {
//	border: 1px dotted #f00;
//}

% npm run plugin-zip