When using the WordPress Gutenberg block editor, it’d sure be nice to right-click on an element in the outline and instantly see the context menu. This snippet makes it possible.

<?php

namespace FYcgu11;
function block_editor_show_gutenberg_context_menus(){

	if ( !function_exists( '\get_current_screen' ) ) { return false; }
	
	$screen = \get_current_screen();

	// wp-admin/post.php?post=xx&action=edit or wp-admin/site-editor.php
	if ( method_exists( $screen, 'is_block_editor' ) && $screen->is_block_editor() ) {
		//now we can sure this is our page.
		$jscode = 
<<<JSCODE
	<script>
	const show_editor_contextmenus = () => {
		window.addEventListener("contextmenu", function(event) {
			event.preventDefault();
			let parent = jQuery(event.target).parents('tr.block-editor-list-view-leaf');
			parent.find('button.components-button.components-dropdown-menu__toggle').click();
		})
	};
	document.addEventListener("DOMContentLoaded", show_editor_contextmenus);
	console.log('Block Editor: Show Gutenberg Context Menus');
	</script>
JSCODE;

		echo $jscode;
	}
}
add_action( 'admin_print_footer_scripts', '\FYcgu11\block_editor_show_gutenberg_context_menus' );
Right-Click to view context menus

Leave a Reply

Your email address will not be published. Required fields are marked *