Gutenburg: Remove border of selected block

Question

Gutenburg: Remove border of selected block

Vakarelov

2022年5月25日 22:04

I am writing a plugin that creates a custom block. When the block is selected/focused in the editor, a border is created abound it (blue in the current version of WP).

I would like to disable the border for the specific block type, either in JavaScript or CSS. The problem is that the block content in the editor is wider than the block border, so it looks awkward. What would be a good solution?

EDIT (further explanation): The content of the block is generated by the following command in the edit function passed to the call to wp.blocks.registerBlockType(...):

React.createElement('div',
        {
            className: 'IA_Presenter_Container',
            'data-block-id': props.attributes.block_id,
            'behaviour': 'adaptive'
        },
    );

Basically, an empty div element is created. The div element is then taken over by a complex JavaScript application which build a full GUI environment in SVG. The environment is used to build and set the preferences for a dynamic gallery which will be displayed in the active page. All this happens without leaving the editor page, and it is important to be so.

When the block is focused, it is expanded by applying the following CSS to the div (the class IA_Designer_Full_Width is added in script):

.IA_Designer_Full_Width{
    position: relative;
    width: 96vw;
    left: 50%;
    right: 50%;
    margin-left: -48vw !important;
    margin-right: -48vw !important;
    max-width: 100vw !important;
}

The result (in a prototype) can be seen below. You see the blue border overlaying the interface:

Topic block-editor Wordpress

Category Web

Vakarelov · Accepted Answer · 2022年5月25日 22:04

It appears that the border is set by the following style definition on the block container (it is in block-editor/style.css):

.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable]):focus::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  content: "";
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px;
  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
  border-radius: 1px;
  outline: 2px solid transparent;
}

Changing setting box-shadow to "none" removes the border.

Thus, adding this css will remove the border:

some-selector-to-the-container:focus::after{
    box-shadow: none !important;
}

Gutenburg: Remove border of selected block

About