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

AI Verified

Name

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.

Learn More

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}

Related Snippets

Please see some snippets below related to this snippet..

WordPress Admin

AI Verified

Stop success email of plugin auto update.

Added: 1 year ago

Last Updated: 1 year ago

This code snippets will stop all auto update success e-mails from being sent out. It will only send out emails when a plugin update fails.

View

WordPress Admin

AI Verified

Disable scroll-to-top when editing snippets

Added: 11 months ago

Last Updated: 11 months ago

When using Code Snippets 3.6.0 or later, use this snippet to prevent the automatic scroll-to-top after clicking 'save' when editing a snippet.

View

WordPress Admin

AI Verified

Post and page duplication

Added: 9 months ago

Last Updated: 9 months ago

Snippet to add functionality to duplicate posts and pages. This was inspired by the post duplication snippet found on codesnippets.cloud (see link)

View

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

WordPress Admin

Unverified

Stop the Scroll! Float the Admin Notice Above the Editor in Code Snippets Pro [SnipSnip.pro]

Added: 11 months ago

Last Updated: 1 week ago

<p>Make the admin notice in Code Snippet Pro float above the editor so your page doesn't scroll away every time you save a snippet. <a href="https://snipsnip.pro/s/787" target="_blank" rel="nofollow n...

View

Security

Unverified

Users: Create & Delete n New Users in WP Admin [SnipSnip.pro] - SET TO RUN ONCE!

Added: 11 months ago

Last Updated: 1 week ago

<p>CHANGE TO 'ONLY RUN ONCE' – Users: Create & 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/7...

View

WordPress Admin

AI Verified

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

Added: 10 months ago

Last Updated: 10 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...

View