Removing a reusable block (in Gutenberg) clears the content of the reusable block

Here's a patch that solves this. I'm not marking it as "Needs review", because it might be a desired behavior and just an end user issue with selecting the wrong block.

Our editors have noticed blocks vanishing, somewhere along the way gutenberg behavior changed and introduced this bug.

Marking this as critical as it implicates data loss.

New patch.

This patch improves the UI /DX/UX , editors will now know when they're editing a reusable block.

Added to the original patch.

To make this patch localized one would have to add an style to the head that inserts a translated content attribute.

I'll add a screenshot of what it looks like in my environment with french text instead of english.

For 3.x, the reusable block (now called synced pattern) selection is much clearer.

is it expected to be a smooth "upgrade" from 2.x to 3.x?

@marcofernandes
Thanks for this.

I just added szeidler's patch. To add a visual indicator I suggest creating a feature request and it should be done via block hook filters using wp.hooks.addFilter(). By using only CSS would be difficult to add translations.

Implementing a css solution with a tiny bit of php isn't that hard.

Here is what needs to be done:

/**
 * Implémente hook_preprocess_HOOK() pour les pages.
 */
function gutenberg_preprocess_page(&$variables) {
  // Add the CSS file
  $variables['#attached']['library'][] = 'gutenberg/gutenberg_custom_styles';

  // Generate the localized content.
  $localized_content = t('Reusable block editing, changes have global impact.');

  // Add the attribute "data-warning-content" to a specific element.
  // For example we add an element with the class "gutenberg-block"
  $variables['page']['#attached']['html_head'][] = [
    [
      '#tag' => 'script',
      '#value' => "
        document.addEventListener('DOMContentLoaded', function() {
          var elements = document.querySelectorAll('.gutenberg-block');
          elements.forEach(function(element) {
            element.setAttribute('data-warning-content', '" . $localized_content . "');
          });
        });
      ",
      '#attributes' => [],
    ],
    'gutenberg_warning_message',
  ];
}

/**
 * Implémente hook_library_info_build().
 */
function gutenberg_library_info_build() {
  $libraries['gutenberg_custom_styles'] = [
    'css' => [
      'theme' => [
        'css/gutenberg_custom.css' => [],
      ],
    ],
  ];
  return $libraries;
}

Now for the css:

.node-form div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected {
  position: relative;
}
.node-form div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected div.block-editor-block-list__block.is-selected::before,
.node-form div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected:first-child > div.wp-block-group__inner-container.block-editor-block-list__layout:first-child::before,
.node-form div.block-library-block__reusable-block-container > div.block-editor-block-list__layout > .is-selected::before {
  position: absolute;
  content: attr(data-warning-content);
  font-size: 18px;
  font-weight: normal;
  color: red;
  width: 100%;
  top: -120px;
  left: 74px;
  border: 1px solid #cca379;
  border-radius: 5px;
  background-color: linen;
  padding: 10px;
  padding-right: 10px;
  padding-right: 0;
}
.node-form div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected div.block-editor-block-list__block.is-selected::after,
.node-form div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected:first-child > div.wp-block-group__inner-container.block-editor-block-list__layout:first-child::after,
.node-form div.block-library-block__reusable-block-container > div.block-editor-block-list__layout > .is-selected::after {
  position: absolute;
  top:-77px;
  left: 123px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #cca379;
}

scss now:

 .node-form {
  div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected {
    position: relative;
  }
  div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected div.block-editor-block-list__block.is-selected::before,
  div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected:first-child > div.wp-block-group__inner-container.block-editor-block-list__layout:first-child::before,
  div.block-library-block__reusable-block-container > div.block-editor-block-list__layout > .is-selected::before {
    position: absolute;
    content: attr(data-warning-content);
    font-size: 18px;
    font-weight: normal;
    color: red;
    width: 100%;
    top: -120px;
    left: 74px;
    border: 1px solid #cca379;
    border-radius: 5px;
    background-color: linen;
    padding: 10px;
    padding-right: 10px;
    padding-right: 0;
  }
  div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected div.block-editor-block-list__block.is-selected::after,
  div.block-library-block__reusable-block-container div.block-editor-block-list__block.has-child-selected:first-child > div.wp-block-group__inner-container.block-editor-block-list__layout:first-child::after,
  div.block-library-block__reusable-block-container > div.block-editor-block-list__layout > .is-selected::after {
    position: absolute;
    top:-77px;
    left: 123px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #cca379;
  }
 }

This imho, is not fixed until the UI solution is implemented.

When it's working, expect it to look something like this screenshot:

This is important as the UI improvement helps prevent mistakes and provides important information to the editor.

New patch

This isn't fixed IMHO until the GUI gets the improvement. Otherwise very confusing for any editor scratching their heads.

I have not tested this latest merge request.

Needs review/testing

Sorry I'm unable to test this but hopeful that it works for the 3.0.x branch.

joseph.olstad → changed the visibility of the branch 3338959- to hidden.

joseph.olstad → changed the visibility of the branch 3338959- to hidden.

https://git.drupalcode.org/project/gutenberg/-/merge_requests/135.patch

Sorry 😬, but I think we shouldn't go for that approach. Gutenberg hook filters should definitely be used here.

And I'm not really convinced that we should adopted this behaviour for 3.x since now the editor needs to select the reusable block (synced pattern) in order to edit it. And when selecting a synced pattern, its color is different (magenta). So, I believe, they will be aware they are editing the pattern. 🤔

Here's how it works in 3.x:
https://www.drupal.org/files/issues/2024-05-20/Screen%20Recording%202024... →

But for 2.x probably makes sense since we don't have almost any visual indication.

@joseph.olstad I added this MR https://git.drupalcode.org/project/gutenberg/-/merge_requests/136 for 2.x

But I'm still thinking if this should go to 3.x 😄

Btw, I'm changing this issue classification because it's not a bug nor critical. It is, after all, a user behaviour. It's bad UX, for sure.

Nicely done, thanks!

Automatically closed - issue fixed for 2 weeks with no activity.