Gutenbergエディタで 画像を設置した時 大きさが思ってたのと 違う場合

Gutenbergエディタで 画像を設置した時 大きさが思ってたのと 違う場合

Gutenbergエディタで 画像を設置した時 あれ? と思った事ありませんでしょうか。
管理画面(編集画面)を「テーマ を Gutenberg に対応させる時、最低限やっておく事」で 設定したとしても、コンテンツ幅(content_width) が広いテンプレートの場合、設置した画像が(元画像は大きいのに) コンテンツ幅 より小さく置かれてしまってます。

【画像を設置】
画像を設置 コンテンツ幅より小さい

さらに、設置した画像はマウスで拡大・縮小できますが、一定の大きさ(580px)より拡大できません。これにより、580pxより大きな画像を設置するのが困難になります。

原因は Gutenbergエディタ内で maxWidth が 580px固定 になっている為です。

そのせいで 画像を設置しても wideが580pxになり、拡大は580pxより大きくできない状態になります。
【参考 The default editor settings】
https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/store/defaults.js

そこで、Gutenberg内の maxWidth を テーマにあわせる Fix を紹介します。

【Fix後 画像を設置】
Fix後 画像を設置 コンテンツ幅ピッタリ

 

コード

テーマの functions.php にコードを追加します。

/**
 * Content Width Fix
 * Use Filters the settings to pass to the block editor.
 *
 * @package WordPress 5.0 or Gutenberg 3.7.0+
 * License: GPLv2 or later
 *
 * @param array   $editor_settings Default editor settings.
 * @param WP_Post $post            Post being edited.
 */
function nendebcom_gutenberg_block_editor_settings( $editor_settings, $post ) {

	/* content_width */
	$content_width = 730;

	/* full-width-page */
	if ( isset( $post->ID ) && get_page_template_slug( $post->ID ) == 'full-width-page.php' ){
		$content_width = 1200;
	}

	$editor_settings['maxWidth'] = $content_width;

	return $editor_settings;
}
add_filter( 'block_editor_settings', 'nendebcom_gutenberg_block_editor_settings', 10, 2 );

/* content_width */

テーマの content_width の値を入れてください。

/* full-width-page */

1カラムテンプレートがある場合は設定してください。

 

参考

Make the max-width for images filterable #5567
https://github.com/WordPress/gutenberg/issues/5567

【親記事】
テーマ を Gutenberg に対応させる時、最低限やっておく事
https://nendeb.com/741