AI Verified

Name

Block Editor: Show Outline Context Menus on Right-Click [SnipSnip.pro] - Vanilla JS Version

About

ADMIN ONLY • When using Block Editor and right clicking on an item in the sidebar outline list of blocks, you'll now see that block's menu instead of the default browser context menu. You can still tap those three dots if you wanna, but why would you do the wrong click, when you can do the right click!? - <a href="https://snipsnip.pro/s/183" target="_blank" rel="noopener">https://snipsnip.pro/s/183</a>

Language

PHP

Rating

Voted: 0 by 0 user(s)

How to Setup Snippet

Install it. Set it to Admin-only. And turn it on! Then start right-clicking everywhereererererere!

Link for further information:

The author has provided the following URL that may be helpful to setting up or using this snippet:

https://snipsnip.pro/s/183

Codevault

brandonjp

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: 6.1

Our AI bot has checked this snippet is compatable up to wordpress version: 6.1

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

Snippet Source:

https://snipsnip.pro/s/183

History

Last modified:

19/05/2024

Important Note

This snippet has the following status:

AI Verified

This snippet has been tested by our AI bot, see any comments below.

AI Bot Comments:

Found 0 vulnerabilities

Block Editor: Show Outline Context Menus on Right-Click [SnipSnip.pro] - Vanilla JS Version

 
                    
1if (!class_exists('BlockEditorRightClickContextMenuClass')) {
2 // Block Editor: Show Outline Context Menus on Right-Click [SnipSnip.pro] - https://snipsnip.pro/s/183
3 // This code snippet adds context menus to the Gutenberg block editor in WordPress.
4 // It listens for the right-click event and opens the dropdown menu for the respective block.
5 class BlockEditorRightClickContextMenuClass {
6 public function __construct() {
7 add_action('admin_print_footer_scripts', array($this, 'blockEditorRightClickContextMenuPHP'));
8 }
9 
10 public function blockEditorRightClickContextMenuPHP() {
11 if (!function_exists('\get_current_screen')) {
12 return false;
13 }
14 $screen = \get_current_screen();
15 if (method_exists($screen, 'is_block_editor') && $screen->is_block_editor()) {
16 ?>
17<script>
18 (function(){
19 const blockEditorRightClickContextMenuJS = () => {
20 window.addEventListener("contextmenu", (event) => {
21 let parent = event.target;
22 while (parent && parent.tagName !== "TR") {
23 parent = parent.parentElement;
24 }
25 
26 if (parent && parent.classList.contains('block-editor-list-view-leaf')) {
27 event.preventDefault();
28 parent.querySelector('button.components-button.components-dropdown-menu__toggle[aria-haspopup="true"]').click();
29 }
30 });
31 };
32 document.addEventListener("DOMContentLoaded", blockEditorRightClickContextMenuJS);
33 console.log('Block Editor: Show Outline Context Menus on Right-Click [SnipSnip.pro] - Vanilla JS Version');
34 })();
35</script>
36 <?php
37 }
38 }
39 }
40 
41 new BlockEditorRightClickContextMenuClass();
42}

0

Related Snippets

Please see some snippets below related to this snippet..

WordPress Admin

AI Verified

1

Disable Wordpress Admin Bar

Added: 1 year ago

Last Updated: 1 year ago

The WordPress Admin Bar provides handy links to several key functions such as the ability to add new posts and pages, etc. However, if you find no use for it and wish to remove it just activate this s...

WordPress Admin

AI Verified

0

Regenerate thumbnails - no extra plugin required.

Added: 1 year ago

Last Updated: 1 year ago

Created new image sizes? Changed themes? This code snippet will force WordPress to regenerate thumbnails without the need for any 3rd party plugin.

WordPress Admin

AI Verified

0

Block Editor: Alt+Shift+Pipe/Backslash to Toggle Right Sidebar [SnipSnip.pro]

Added: 7 months ago

Last Updated: 7 months ago

ADMIN ONLY • This code snippet enhances the Gutenberg Block Editor in WordPress by adding a keyboard shortcut. By pressing Alt+Shift+Pipe/Backslash, users can toggle the Right Sidebar. This feature im...

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

Security

AI Verified

1

Users: Create & Delete n New Users in WP Admin [SnipSnip.pro]

Added: 9 months ago

Last Updated: 6 months ago

Users: Create &amp; Delete n New Users in WP Admin [SnipSnip.pro] - <a href="https://snipsnip.pro/s/799" target="_blank" rel="nofollow noopener">https://snipsnip.pro/s/799</a> - This creates then dele...

WordPress Admin

AI Verified

1

Randomize a Post Publish Date in the Classic Editor [SnipSnip.pro]

Added: 9 months ago

Last Updated: 9 months ago

<p>Randomize a Post Publish Date in the Classic Editor. Choose between the past 1, 3, 6, 12 months... or customize it to other options. Works in the Classic Editor only for now. <a href="https://snips...

WordPress Admin

AI Verified

1

Disable Jetpack Promotions and Notices in WP Admin [SnipSnip.pro]

Added: 8 months ago

Last Updated: 7 months ago

Disable Jetpack Promotions and Notices in WP Admin [SnipSnip.pro] - <a href="https://snipsnip.pro/s/629">https://snipsnip.pro/s/629</a>