<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>block.json &#8211; WordPress Memo</title>
	<atom:link href="https://blog.riverforest-wp.info/tag/block-json/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.riverforest-wp.info</link>
	<description>WordPress に関する覚え書き</description>
	<lastBuildDate>Fri, 09 May 2025 12:48:52 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://blog.riverforest-wp.info/wp-content/uploads/2018/05/cropped-icon-256x256-1-32x32.png</url>
	<title>block.json &#8211; WordPress Memo</title>
	<link>https://blog.riverforest-wp.info</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ブロックの日本語化に関する補足事項</title>
		<link>https://blog.riverforest-wp.info/block-internationalization/</link>
		
		<dc:creator><![CDATA[Katsushi Kawamori]]></dc:creator>
		<pubDate>Wed, 22 Nov 2023 07:13:30 +0000</pubDate>
				<category><![CDATA[Function]]></category>
		<category><![CDATA[block.json]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[ブロック]]></category>
		<category><![CDATA[国際化]]></category>
		<category><![CDATA[日本語化]]></category>
		<guid isPermaLink="false">https://blog.riverforest-wp.info/?p=3545</guid>

					<description><![CDATA[はじめに 現在、自作ブロックの日本語化を、「ブロックエディターハンドブック／開発ガイド／国際化」に準じて行っていますが、現在の、block.json でスクリプトをロードする方法には適していないので、ここに捕捉事項として [&#8230;]]]></description>
										<content:encoded><![CDATA[
<h3 class="wp-block-heading">はじめに</h3>



<p>現在、自作ブロックの日本語化を、「ブロックエディターハンドブック／開発ガイド／国際化」に準じて行っていますが、現在の、block.json でスクリプトをロードする方法には適していないので、ここに捕捉事項として記す事にします。</p>



<style>
.simpleblogcard_img_block1115160aa33153c660f1847cf6226b1f {
  float: right;
  padding: 10px;
}
.simpleblogcard_border1115160aa33153c660f1847cf6226b1f {
  border-left: solid 8px #cd162c;
  padding: 0.25em 0.25em;
  background: transparent;
}
.simpleblogcard_title1115160aa33153c660f1847cf6226b1f {
  line-height: 155%;
  font-weight: bold;
  display: block;
}
.simpleblogcard_description1115160aa33153c660f1847cf6226b1f {
  line-height: 155%;
  color: #333;
}
</style>
<div class="simpleblogcard_wrap">
			<a style="text-decoration: none;" href=https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/internationalization/>
				<figure class="simpleblogcard_img_block1115160aa33153c660f1847cf6226b1f">
			<img decoding="async" style="border-radius: 5px; width: 100px; height: 56px;" src="https://s.w.org/images/home/wordpress-default-ogimage.png" alt="国際化 – Japanese Team – WordPress.org 日本語" />
		</figure>
		<div class="simpleblogcard_inner">
		<div class="simpleblogcard_border1115160aa33153c660f1847cf6226b1f">
			ja.wordpress.org			<div class="simpleblogcard_title1115160aa33153c660f1847cf6226b1f">
				国際化 – Japanese Team – WordPress.org 日本語			</div>
							<div class="simpleblogcard_description1115160aa33153c660f1847cf6226b1f">
					国際化とは何か ? 国際化とはソフトウエア、特にここでは WordPress に対して複数言語のサポートを提供…				</div>
					</div>
	</div>
	<div style="clear: both;"></div>
	</a>
</div>



<h3 class="wp-block-heading">ハンドル名の指定</h3>



<p>上記でのハンドル名の指定方法は、以下の様になっています。この方法では、wp_register_script で、ハンドル名 <strong>myguten-script</strong> を指定し、register_block_type の、editor_script で、<strong>myguten-script </strong>を再度指定しています。</p>



<pre class="prism line-numbers"><code class="language-php language-html">&lt;?php
/**
 * Plugin Name: Simple Block
 * Text Domain: myguten
 */
function myguten_simple_block_init() {
    wp_register_script(
        'myguten-script',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-block-editor' )
    );
 
    register_block_type( 'myguten/simple-block', array(
        'api_version' =&gt; 2,
        'editor_script' =&gt; 'myguten-script',
    ) );
}
add_action( 'init', 'myguten_simple_block_init' );</code></pre>



<p>その後に、php で、<strong>wp_set_script_translations</strong> の第一引数に <strong>registrer_block_type</strong> で登録したハンドル名 <strong>myguten-script</strong> を指定する方式です。</p>



<style>
.simpleblogcard_img_blockf62d5be312b6c6bca84e27bb8a316fc5 {
  float: right;
  padding: 10px;
}
.simpleblogcard_borderf62d5be312b6c6bca84e27bb8a316fc5 {
  border-left: solid 8px #cd162c;
  padding: 0.25em 0.25em;
  background: transparent;
}
.simpleblogcard_titlef62d5be312b6c6bca84e27bb8a316fc5 {
  line-height: 155%;
  font-weight: bold;
  display: block;
}
.simpleblogcard_descriptionf62d5be312b6c6bca84e27bb8a316fc5 {
  line-height: 155%;
  color: #333;
}
</style>
<div class="simpleblogcard_wrap">
			<a style="text-decoration: none;" href=https://developer.wordpress.org/reference/functions/wp_set_script_translations/>
				<figure class="simpleblogcard_img_blockf62d5be312b6c6bca84e27bb8a316fc5">
			<img decoding="async" style="border-radius: 5px; width: 100px; height: 52px;" src="https://developer.wordpress.org/wp-content/themes/wporg-developer-2023/images/opengraph-image.png" alt="wp_set_script_translations() – Function | Developer.WordPress.org" />
		</figure>
		<div class="simpleblogcard_inner">
		<div class="simpleblogcard_borderf62d5be312b6c6bca84e27bb8a316fc5">
			developer.wordpress.org			<div class="simpleblogcard_titlef62d5be312b6c6bca84e27bb8a316fc5">
				wp_set_script_translations() – Function | Developer.WordPress.org			</div>
							<div class="simpleblogcard_descriptionf62d5be312b6c6bca84e27bb8a316fc5">
					Sets translated strings for a script.				</div>
					</div>
	</div>
	<div style="clear: both;"></div>
	</a>
</div>



<pre class="prism line-numbers"><code class="language-php language-html">&lt;?php
function myguten_set_script_translations() {
    wp_set_script_translations( 'myguten-script', 'myguten' );
}
add_action( 'init', 'myguten_set_script_translations' );</code></pre>



<p>上記のやり方を、現在の block.json で読み込む方式に置き換えると以下の様になります。</p>



<pre class="prism line-numbers"><code class="language-php language-html">&lt;?php
/**
 * Plugin Name: Simple Block
 * Text Domain: myguten
 */
function myguten_simple_block_init() {
	register_block_type(
		__DIR__ . '/block/build',
	);
}
add_action( 'init', 'myguten_simple_block_init' );</code></pre>



<p>block.json を置いたディレクトリを検索してそれを読み込むという形です。ここでは、ハンドル名は指定していません。block.json の方を見てみると、editorScript の項目がそれらしいのですが、スクリプトのハンドルという言葉はあるのですが、ファイルへのパスを指定するのが通常の様です。</p>



<style>
.simpleblogcard_img_blockdbb82224ef94d9b3c0fa726b75bf1ff0 {
  float: right;
  padding: 10px;
}
.simpleblogcard_borderdbb82224ef94d9b3c0fa726b75bf1ff0 {
  border-left: solid 8px #cd162c;
  padding: 0.25em 0.25em;
  background: transparent;
}
.simpleblogcard_titledbb82224ef94d9b3c0fa726b75bf1ff0 {
  line-height: 155%;
  font-weight: bold;
  display: block;
}
.simpleblogcard_descriptiondbb82224ef94d9b3c0fa726b75bf1ff0 {
  line-height: 155%;
  color: #333;
}
</style>
<div class="simpleblogcard_wrap">
			<a style="text-decoration: none;" href=https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/>
				<figure class="simpleblogcard_img_blockdbb82224ef94d9b3c0fa726b75bf1ff0">
			<img decoding="async" style="border-radius: 5px; width: 100px; height: 52px;" src="https://developer.wordpress.org/wp-content/themes/wporg-developer-2023/images/opengraph-image.png" alt="Metadata in block.json – Block Editor Handbook | Developer.WordPress.org" />
		</figure>
		<div class="simpleblogcard_inner">
		<div class="simpleblogcard_borderdbb82224ef94d9b3c0fa726b75bf1ff0">
			developer.wordpress.org			<div class="simpleblogcard_titledbb82224ef94d9b3c0fa726b75bf1ff0">
				Metadata in block.json – Block Editor Handbook | Developer.WordPress.org			</div>
							<div class="simpleblogcard_descriptiondbb82224ef94d9b3c0fa726b75bf1ff0">
					Starting with the WordPress 5.8 release, we recommend using the block.json metadata file a&#8230;				</div>
					</div>
	</div>
	<div style="clear: both;"></div>
	</a>
</div>



<p><strong>register_block_type</strong> では、ハンドル名を渡さずに、WordPress の php の関数 <strong>generate_block_asset_handle</strong> で第１引数にブロック名、第２引数に editorScript を渡したらハンドル名を取得し国際化が上手くいきましたので、以下に示します。</p>



<pre class="prism line-numbers"><code class="language-php language-html">function myguten_set_script_translations() {
　　$script_handle = generate_block_asset_handle( 'myguten/simple-block', 'editorScript' );
　　wp_set_script_translations( $script_handle, 'myguten' );
}
add_action( 'init', 'myguten_set_script_translations' );</code></pre>



<style>
.simpleblogcard_img_block81707980f09a44cf6bc6b216e541f80c {
  float: right;
  padding: 10px;
}
.simpleblogcard_border81707980f09a44cf6bc6b216e541f80c {
  border-left: solid 8px #cd162c;
  padding: 0.25em 0.25em;
  background: transparent;
}
.simpleblogcard_title81707980f09a44cf6bc6b216e541f80c {
  line-height: 155%;
  font-weight: bold;
  display: block;
}
.simpleblogcard_description81707980f09a44cf6bc6b216e541f80c {
  line-height: 155%;
  color: #333;
}
</style>
<div class="simpleblogcard_wrap">
			<a style="text-decoration: none;" href=https://developer.wordpress.org/reference/functions/generate_block_asset_handle/>
				<figure class="simpleblogcard_img_block81707980f09a44cf6bc6b216e541f80c">
			<img decoding="async" style="border-radius: 5px; width: 100px; height: 52px;" src="https://developer.wordpress.org/wp-content/themes/wporg-developer-2023/images/opengraph-image.png" alt="generate_block_asset_handle() – Function | Developer.WordPress.org" />
		</figure>
		<div class="simpleblogcard_inner">
		<div class="simpleblogcard_border81707980f09a44cf6bc6b216e541f80c">
			developer.wordpress.org			<div class="simpleblogcard_title81707980f09a44cf6bc6b216e541f80c">
				generate_block_asset_handle() – Function | Developer.WordPress.org			</div>
							<div class="simpleblogcard_description81707980f09a44cf6bc6b216e541f80c">
					Generates the name for an asset based on the name of the block and the field name provided&#8230;				</div>
					</div>
	</div>
	<div style="clear: both;"></div>
	</a>
</div>



<h3 class="wp-block-heading">block.json の日本語化</h3>



<p>ついでにわかりにくい、block.json の日本語化について以下に記します。上記の、<strong>register_block_type</strong> に、配列で翻訳対象を列記します。keywords は複数あるので更なる配列にします。</p>



<pre class="prism line-numbers"><code class="language-php language-html">&lt;?php
/**
 * Plugin Name: Simple Block
 * Text Domain: myguten
 */
function myguten_simple_block_init() {
	register_block_type(
		__DIR__ . '/block/build',
		array(
			'title' =&gt; _x( 'Simple Block', 'block title', 'myguten' ),
			'description' =&gt; _x( 'Example static block scaffolded with Create Block tool.', 'block description', 'myguten' ),
			'keywords' =&gt; array(
				_x( 'simple', 'block keyword', 'myguten' ),
				_x( 'static', 'block keyword', 'myguten' ),
				_x( 'tool', 'block keyword', 'myguten' ),
			),
		)
	);
}
add_action( 'init', 'myguten_simple_block_init' );</code></pre>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
