Better warning message when removing a reusable block

[paaljoachim]

Today we have a system warning message when removing a reusable block.

This should be improved.

[swissspidy]

Can you perhaps elaborate a bit on why and how it should be improved? Thanks!

[paaljoachim]

Thanks for asking Pascal!

The why...
The system message does not look nice. It should give a better warning/notification built for Gutenberg. Actually Gutenberg should have its own warning system and not use the external OS/browser warning. It could perhaps even use the existing notification system.

How
Something like: Are you sure you want to make this instance of the reusable block into a regular block.

Here is one suggestion using the default notification system:

[karmatosed]

Would a contexted message by the block be better than a 'global' message? I do wonder if adding the same interaction element that google mail has when you delete or send and it has a message appear for few moments. @youknowriad looping you in as think this is being explored. I personally think something that's not a global message would be good. I also think it isn't an error.

[youknowriad]

Tbh, I think a browser warning is fine personally. And I think if we change the behavior we should probably change consistently (thinking about post removals and all other system dialogs)

[karmatosed]

Let's for now close this but we can always reconsider. Thanks for the feedback everyone.

[korynorthrop]

Not sure if anyone still checks this ticket, but I came up with a solution for a project and while it's not ideal in any way, I think it should be stable enough for our purposes until the appropriate block filters exist that allow us to modify BlockControls and settings.

Basically, I'm using MutationObserver to detect new nodes add to the Gutenberg editor. I'm ignoring observed events that occur when a Reusable Block isn't currently selected. If a Resuable Block is selected then the innerText of the added node will be checked, if it is equal to "Remove from Reusable Blocks" then that node will be removed from the DOM. Again, there are probably a million reasons why this approach is risky or flawed, but I think it works for us for now.

/* 
 * Detect changes to #editor and remove the "Remove from Reusable Blocks" option 
 * from BlockControl for Resuable Blocks
 *
 * Note: this is a temporary measure until the appropriate filters exist
 */

const gutenbergEditor = document.querySelector( '#editor' );

function removeReusableBlockBtn( nodesToCheck ) {
   if ( nodesToCheck && nodesToCheck.length > 0 ) {
      Array.prototype.forEach.call( nodesToCheck, function( el, i ) {
         if ( el.innerText && el.innerText == 'Remove from Reusable Blocks' ) {
            el.parentNode.removeChild( el );
         }
      } );
   }
}

function subscriber( mutations ) {
   // when a mutation is observed check if a Reusable Block is selected in the editor before doing anything
   let selectedBlock = wp.data.select( 'core/block-editor' ).getSelectedBlock();
   if ( selectedBlock && selectedBlock.name == 'core/block' ) {
      mutations.forEach( ( mutation ) => {
         if ( mutation.type === 'childList' && mutation.addedNodes.length ) {
            removeReusableBlockBtn( mutation.addedNodes );
         }
      } );
   }	
}

const observer = new MutationObserver(subscriber); // instantiate observer
observer.observe( gutenbergEditor, { childList: true, subtree: true } ); // start observing

You can see in the screenshot that the "Remove from Reusable Blocks" button, which normally renders between "Convert to Regular Block" and "Group" does not show up.

[paaljoachim]

Thanks for sharing Kory!
Riad @youknowriad I will ping you in here in response to @korynorthrop above post.

[korynorthrop]

Obviously one major drawback to this solution is relying on the innerText of the button being equal to "Remove from Reusable Blocks" because this could change in the future and it would likely not work if the User's admin language is set to something other than English. But, like I said, it works for our purposes for now. I think it could be a starting point for anyone that's trying to accomplish something similar.