[WordPress]ブロックエディタをスマホで少し広くするプラグインを作りました

本プラグインはWordPress5.5以上では動作しません。

WordPressのブロックエディタ(gutenberg)ってスマホだと書くスペースが狭いですよね。

そこで今回はWordPressのブロックエディタをスマホサイズで書くスペースを少しだけ広くするプラグイン”WIDEN BLOCK EDITOR FOR SP”を作成しましたので共有します。

インストールするとこうなります

インストール方法

「WIDEN BLOCK EDITOR FOR SP」のzipファイルをダウンロードします。

プラグインをアップロードします。
WordPressの管理画面 > プラグイン > 新規追加 > プラグインのアップロード

「WIDEN BLOCK EDITOR FOR SP」を有効化していただければOKです。

プラグインの中身

ちなみにプラグインの中身は以下です。

widen-block-editor-sp/ 
                     ┝ widen-block-editor-sp.php
                     ┝assets/
                           ┝ style.css

widen-block-editor-sp.php

add_action( 'enqueue_block_editor_assets',     function () {
    wp_enqueue_style( 'widen-block-editor-sp', plugin_dir_url( __FILE__ ) . '/assets/styles/style.css' );
} );

enqueue_block_editor_assetsでブロックエディタであれば、対象のcssファイルを読みこみます。

style.css

@media( max-width: 781px ){

	html #wpadminbar {
		width: 50px;
		min-width: 50px;
	}

	#wpadminbar li#wp-admin-bar-comments, 
	#wpadminbar li#wp-admin-bar-customize, 
	#wpadminbar li#wp-admin-bar-edit, 
	#wpadminbar li#wp-admin-bar-my-account, 
	#wpadminbar li#wp-admin-bar-my-sites, 
	#wpadminbar li#wp-admin-bar-new-content, 
	#wpadminbar li#wp-admin-bar-site-name, 
	#wpadminbar li#wp-admin-bar-updates, 
	#wpadminbar li#wp-admin-bar-wp-logo{
		display: none;
	}

	.block-editor-editor-skeleton{
		top: 0px;
	}
	.block-editor-editor-skeleton__header {
		padding-left: 50px
	}
	.edit-post-sidebar-header__small {
		padding-left: 55px
	}

	.edit-post-sidebar-header__small > .components-button {
		min-width: 40px;
	}

	.edit-post-header__settings > .edit-post-more-menu {
		display: none;
	}

	.edit-post-sidebar > .components-panel {
		padding-bottom: 500px;
	}

	.edit-post-layout__metaboxes {
		padding-bottom: 500px !important;
	}
	.block-editor-inserter__results {
		padding-bottom: 500px !important;
	}
}