Issue #3351245: Added a custom hint to Layout Builder block form

Added a temporary “View more” hint above the grouped dropdown (three dots) in Layout Builder to make its purpose clearer. The hint fades after a few seconds. Also fixed the dropdown panel layout so that all items are stacked vertically and scrollable when space is limited. Paragraph dropdown remains unaffected.

Attached a video showing the result.layout_builder

core/modules/layout_builder/js/layout-builder.js

@@ -260,6 +260,94 @@
         $('#layout-builder').addClass(layoutBuilderWrapperValue);
       }
     }
+
+    // ---- CKEditor 'View more' hint ----
+    const $dialog = $(e.target)[0];
+
+    const observer = new MutationObserver((mutations, obs) => {
+      const groupedDropdowns = $dialog.querySelectorAll(
+        '.ck.ck-dropdown.ck-toolbar__grouped-dropdown.ck-toolbar-dropdown',
+      );
+
+      if (groupedDropdowns.length > 0) {
+        groupedDropdowns.forEach((dropdown) => {
+          const button = dropdown.querySelector('.ck-dropdown__button');
+          if (button && !dropdown.querySelector('.ck-view-more-hint')) {
+            // Hint balloon
+            const hintSpan = document.createElement('div');
+            hintSpan.textContent = 'View more';
+            hintSpan.className = 'ck-view-more-hint';
+            hintSpan.style.position = 'absolute';
+            hintSpan.style.bottom = '100%';
+            hintSpan.style.left = '50%';
+            hintSpan.style.transform = 'translateX(-50%) translateY(-8px)';
+            hintSpan.style.padding = '4px 8px';
+            hintSpan.style.background = '#333';
+            hintSpan.style.color = '#fff';
+            hintSpan.style.borderRadius = '4px';
+            hintSpan.style.fontSize = '12px';
+            hintSpan.style.whiteSpace = 'nowrap';
+            hintSpan.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
+            hintSpan.style.opacity = '1';
+            hintSpan.style.transition = 'opacity 0.5s ease';
+            hintSpan.style.pointerEvents = 'none';
+
+            const arrow = document.createElement('div');
+            arrow.style.position = 'absolute';
+            arrow.style.top = '100%';
+            arrow.style.left = '50%';
+            arrow.style.transform = 'translateX(-50%)';
+            arrow.style.width = '0';
+            arrow.style.height = '0';
+            arrow.style.borderLeft = '6px solid transparent';
+            arrow.style.borderRight = '6px solid transparent';
+            arrow.style.borderTop = '6px solid #333';
+            hintSpan.appendChild(arrow);
+
+            button.style.position = 'relative';
+            dropdown.appendChild(hintSpan);
+
+            // Auto fade after 4 sec
+            setTimeout(() => {
+              hintSpan.style.opacity = '0';
+              setTimeout(() => {
+                hintSpan.remove();
+              }, 500);
+            }, 4000);
+
+            // When user clicks — adjust dropdown panel
+            button.addEventListener('click', () => {
+              setTimeout(() => {
+                const tooltip = button.getAttribute('data-cke-tooltip-text');
+                const panel = dropdown.querySelector('.ck-dropdown__panel');
+                const items = panel?.querySelector('.ck-toolbar__items');
+
+                if (tooltip === 'Show more items' && panel && items) {
+                  // Stack buttons vertically
+                  items.style.display = 'flex';
+                  items.style.flexDirection = 'column';
+                  items.style.alignItems = 'stretch';
+
+                  // Hide separators inside show more
+                  const separators = panel.querySelectorAll(
+                    '.ck-toolbar__separator',
+                  );
+                  separators.forEach((separator) => {
+                    separator.style.display = 'none';
+                  });
+                } else if (items) {
+                  items.style.display = '';
+                  items.style.flexDirection = '';
+                  items.style.alignItems = '';
+                }
+              }, 100);
+            });
+          }
+        });
+        obs.disconnect();
+      }
+    });
+    observer.observe($dialog, { childList: true, subtree: true });
   });
 
   /*