diff --git a/core/lib/Drupal/Core/Ajax/AjaxFormHelperTrait.php b/core/lib/Drupal/Core/Ajax/AjaxFormHelperTrait.php
index 49932df548acb90ed7f9f315a475207fd18f560e..100e31e3610e568c74c6ccb73cc48f5070da138d 100644
--- a/core/lib/Drupal/Core/Ajax/AjaxFormHelperTrait.php
+++ b/core/lib/Drupal/Core/Ajax/AjaxFormHelperTrait.php
@@ -31,6 +31,7 @@ public function ajaxSubmit(array &$form, FormStateInterface $form_state) {
'#type' => 'status_messages',
'#weight' => -1000,
];
+ $form['#sorted'] = FALSE;
$response = new AjaxResponse();
$response->addCommand(new ReplaceCommand('[data-drupal-selector="' . $form['#attributes']['data-drupal-selector'] . '"]', $form));
}
diff --git a/core/modules/layout_builder/src/Form/ConfigureBlockFormBase.php b/core/modules/layout_builder/src/Form/ConfigureBlockFormBase.php
index 7aac04d345d4ead3af7deb4faae0b1cbb1e15f18..c2802a4a3d0ba911e9e5c6e2644423725f600e35 100644
--- a/core/modules/layout_builder/src/Form/ConfigureBlockFormBase.php
+++ b/core/modules/layout_builder/src/Form/ConfigureBlockFormBase.php
@@ -2,6 +2,7 @@
namespace Drupal\layout_builder\Form;
+use Drupal\Component\Utility\Html;
use Drupal\Component\Uuid\UuidInterface;
use Drupal\Core\Ajax\AjaxFormHelperTrait;
use Drupal\Core\Block\BlockManagerInterface;
@@ -179,6 +180,15 @@ public function doBuildForm(array $form, FormStateInterface $form_state, Section
];
if ($this->isAjax()) {
$form['actions']['submit']['#ajax']['callback'] = '::ajaxSubmit';
+ // @todo static::ajaxSubmit() requires data-drupal-selector to be the same
+ // between the various Ajax requests. A bug in
+ // \Drupal\Core\Form\FormBuilder prevents that from happening unless
+ // $form['#id'] is also the same. Normally, #id is set to a unique HTML
+ // ID via Html::getUniqueId(), but here we bypass that in order to work
+ // around the data-drupal-selector bug. This is okay so long as we
+ // assume that this form only ever occurs once on a page. Remove this
+ // workaround in https://www.drupal.org/node/2897377.
+ $form['#id'] = Html::getId($form_state->getBuildInfo()['form_id']);
}
return $form;
diff --git a/core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFormMessagesTest.php b/core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFormMessagesTest.php
new file mode 100644
index 0000000000000000000000000000000000000000..942e083ca9dc6b809d18039acf94a7446f32708c
--- /dev/null
+++ b/core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFormMessagesTest.php
@@ -0,0 +1,151 @@
+<?php
+
+namespace Drupal\Tests\layout_builder\FunctionalJavascript;
+
+use Behat\Mink\Element\NodeElement;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use Drupal\Tests\contextual\FunctionalJavascript\ContextualLinkClickTrait;
+use WebDriver\Exception\UnknownError;
+
+/**
+ * Tests that messages appear in the off-canvas dialog with configuring blocks.
+ *
+ * @group layout_builder
+ */
+class BlockFormMessagesTest extends WebDriverTestBase {
+
+ use ContextualLinkClickTrait;
+
+ /**
+ * {@inheritdoc}
+ */
+ public static $modules = [
+ 'layout_builder',
+ 'block',
+ 'node',
+ 'contextual',
+ ];
+
+ /**
+ * {@inheritdoc}
+ */
+ protected function setUp() {
+ parent::setUp();
+ // @todo The Layout Builder UI relies on local tasks; fix in
+ // https://www.drupal.org/project/drupal/issues/2917777.
+ $this->drupalPlaceBlock('local_tasks_block');
+ $this->createContentType(['type' => 'bundle_with_section_field']);
+ }
+
+ /**
+ * Tests that validation messages are shown on the block form.
+ */
+ public function testValidationMessage() {
+ $assert_session = $this->assertSession();
+ $page = $this->getSession()->getPage();
+
+ $this->drupalLogin($this->drupalCreateUser([
+ 'access contextual links',
+ 'configure any layout',
+ 'administer node display',
+ 'administer node fields',
+ ]));
+ $field_ui_prefix = 'admin/structure/types/manage/bundle_with_section_field';
+ // Enable layout builder.
+ $this->drupalPostForm(
+ $field_ui_prefix . '/display/default',
+ ['layout[enabled]' => TRUE],
+ 'Save'
+ );
+ $this->clickElementWhenClickable($page->findLink('Manage layout'));
+ $assert_session->addressEquals($field_ui_prefix . '/display/default/layout');
+ $this->clickElementWhenClickable($page->findLink('Add Block'));
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-off-canvas .block-categories'));
+ $this->clickElementWhenClickable($page->findLink('Powered by Drupal'));
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-off-canvas [name="settings[label]"]'));
+ $page->findField('Title')->setValue('');
+ $this->clickElementWhenClickable($page->findButton('Add Block'));
+ $this->assertMessagesDisplayed();
+ $page->findField('Title')->setValue('New title');
+ $page->pressButton('Add Block');
+ $block_css_locator = '#layout-builder .block-system-powered-by-block';
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', $block_css_locator));
+ $this->waitForNoElement('#drupal-off-canvas');
+ $assert_session->assertWaitOnAjaxRequest();
+ $this->drupalGet($this->getUrl());
+ $this->clickElementWhenClickable($page->findButton('Save layout'));
+ $this->assertNotEmpty($assert_session->waitForElement('css', 'div:contains("The layout has been saved")'));
+
+ // Ensure that message are displayed when configuring an existing block.
+ $this->drupalGet($field_ui_prefix . '/display/default/layout');
+ $assert_session->assertWaitOnAjaxRequest();
+ $this->clickContextualLink($block_css_locator, 'Configure', TRUE);
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', '#drupal-off-canvas [name="settings[label]"]'));
+ $page->findField('Title')->setValue('');
+ $this->clickElementWhenClickable($page->findButton('Update'));
+ $this->assertMessagesDisplayed();
+ }
+
+ /**
+ * Waits for an element to be removed from the page.
+ *
+ * @param string $selector
+ * CSS selector.
+ * @param int $timeout
+ * (optional) Timeout in milliseconds, defaults to 10000.
+ *
+ * @todo Remove in https://www.drupal.org/node/2892440.
+ */
+ protected function waitForNoElement($selector, $timeout = 10000) {
+ $condition = "(typeof jQuery !== 'undefined' && jQuery('$selector').length === 0)";
+ $this->assertJsCondition($condition, $timeout);
+ }
+
+ /**
+ * Asserts that the validation messages are shown correctly.
+ */
+ protected function assertMessagesDisplayed() {
+ $assert_session = $this->assertSession();
+ $page = $this->getSession()->getPage();
+ $messages_locator = '#drupal-off-canvas .messages--error';
+ $assert_session->assertWaitOnAjaxRequest();
+ $this->assertNotEmpty($assert_session->waitForElement('css', $messages_locator));
+ $assert_session->elementTextContains('css', $messages_locator, 'Title field is required.');
+ /** @var \Behat\Mink\Element\NodeElement[] $top_form_elements */
+ $top_form_elements = $page->findAll('css', '#drupal-off-canvas form > *');
+ // Ensure the messages are the first top level element of the form.
+ $this->assertTrue(stristr($top_form_elements[0]->getText(), 'Title field is required.') !== FALSE);
+ $this->assertGreaterThan(4, count($top_form_elements));
+ }
+
+ /**
+ * Attempts to click an element until it is in a clickable state.
+ *
+ * @param \Behat\Mink\Element\NodeElement $element
+ * The element to click.
+ * @param int $timeout
+ * (Optional) Timeout in milliseconds, defaults to 10000.
+ *
+ * @todo Replace this method with general solution for random click() test
+ * failures in https://www.drupal.org/node/3032275.
+ */
+ protected function clickElementWhenClickable(NodeElement $element, $timeout = 10000) {
+ $page = $this->getSession()->getPage();
+
+ $result = $page->waitFor($timeout / 1000, function () use ($element) {
+ try {
+ $element->click();
+ return TRUE;
+ }
+ catch (UnknownError $exception) {
+ if (strstr($exception->getMessage(), 'not clickable') === FALSE) {
+ // Rethrow any unexpected UnknownError exceptions.
+ throw $exception;
+ }
+ return NULL;
+ }
+ });
+ $this->assertTrue($result);
+ }
+
+}