Always display StreamField "Add" buttons

client/src/components/StreamField/blocks/ListBlock.js

@@ -60,12 +60,9 @@ class InsertPosition extends BaseInsertionControl {
     super(placeholder, opts);
     this.onRequestInsert = opts && opts.onRequestInsert;
     const animate = opts && opts.animate;
-
+    const title = h(opts.strings.ADD);
     const button = $(`
-      <button type="button" title="${h(
-        opts.strings.ADD,
-      )}" data-streamfield-list-add
-          class="c-sf-add-button c-sf-add-button--visible">
+      <button type="button" title="${title}" data-streamfield-list-add class="c-sf-add-button">
         <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
       </button>
     `);

client/src/components/StreamField/blocks/StreamBlock.js

@@ -77,7 +77,7 @@ class StreamBlockMenu extends BaseInsertionControl {
 
     const dom = $(`
       <div>
-        <button type="button" title="${comboBoxTriggerLabel}" class="c-sf-add-button c-sf-add-button--visible">
+        <button type="button" title="${comboBoxTriggerLabel}" class="c-sf-add-button">
           <svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg>
         </button>
       </div>
@@ -142,7 +142,6 @@ class StreamBlockMenu extends BaseInsertionControl {
     if (this.onRequestInsert) {
       this.onRequestInsert(this.index, { type: change.selectedItem.type });
     }
-    this.addButton.removeClass('c-sf-add-button--always-visible');
     this.close();
   }
 
@@ -157,10 +156,6 @@ class StreamBlockMenu extends BaseInsertionControl {
     }
   }
 
-  reveal() {
-    this.addButton.addClass('c-sf-add-button--always-visible');
-  }
-
   open() {
     if (!this.canAddBlock) {
       return;
@@ -394,10 +389,6 @@ export class StreamBlock extends BaseSequenceBlock {
 
   setState(values) {
     super.setState(values);
-    if (values.length === 0) {
-      /* for an empty list, begin with the toggle revealed */
-      this.inserters[0].reveal();
-    }
   }
 
   setError(error) {

client/src/components/StreamField/blocks/__snapshots__/ListBlock.test.js.snap

@@ -8,7 +8,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"3\\">
 
-        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
         <input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@@ -70,7 +70,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
         <input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@@ -132,7 +132,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"fake-uuid-v4-value\\">
         <input type=\\"hidden\\" name=\\"the-prefix-2-deleted\\" value=\\"\\">
@@ -194,7 +194,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be duplicated 1`] = `
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button></div>
       </div>"
@@ -208,7 +208,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
 
-        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
         <input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@@ -270,7 +270,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
         <input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@@ -332,7 +332,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered downward 1`]
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button></div>
       </div>"
@@ -346,7 +346,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
 
-        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
         <input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@@ -408,7 +408,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
         <input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@@ -470,7 +470,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be reordered upward 1`] =
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button></div>
       </div>"
@@ -484,7 +484,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"3\\">
 
-        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
         <input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@@ -546,7 +546,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath-disabled=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-2-deleted\\" value=\\"\\">
@@ -608,7 +608,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
         <input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@@ -670,7 +670,7 @@ exports[`telepath: wagtail.blocks.ListBlock blocks can be split 1`] = `
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button></div>
       </div>"
@@ -684,7 +684,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
 
-        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
         <input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@@ -746,7 +746,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\" style=\\"display: none;\\" aria-hidden=\\"true\\">
         <input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"1\\">
@@ -808,7 +808,7 @@ exports[`telepath: wagtail.blocks.ListBlock deleteBlock() deletes a block 1`] =
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button></div>
       </div>"
@@ -822,7 +822,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
 
-        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
         <input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@@ -884,7 +884,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
         <input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@@ -946,7 +946,7 @@ exports[`telepath: wagtail.blocks.ListBlock it renders correctly 1`] = `
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button></div>
       </div>"
@@ -960,7 +960,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
 
-        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
         <input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@@ -1022,7 +1022,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
         <input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@@ -1084,7 +1084,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError passes error messages to ch
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button></div>
       </div>"
@@ -1098,7 +1098,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
         </div><div class=\\"\\"><p class=\\"help-block help-critical\\">At least three blocks are required</p>
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-list-count=\\"\\" value=\\"2\\">
 
-        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+        <div data-streamfield-list-container=\\"\\"><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"11111111-1111-1111-1111-111111111111\\">
         <input type=\\"hidden\\" name=\\"the-prefix-0-deleted\\" value=\\"\\">
@@ -1160,7 +1160,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button><div data-contentpath=\\"22222222-2222-2222-2222-222222222222\\">
         <input type=\\"hidden\\" name=\\"the-prefix-1-deleted\\" value=\\"\\">
@@ -1222,7 +1222,7 @@ exports[`telepath: wagtail.blocks.ListBlock setError renders non-block errors 1`
       </div>
           </div>
         </section>
-      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button c-sf-add-button--visible\\">
+      </div><button type=\\"button\\" title=\\"Add\\" data-streamfield-list-add=\\"\\" class=\\"c-sf-add-button\\">
         <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
       </button></div>
       </div>"

client/src/components/StreamField/blocks/__snapshots__/StreamBlock.test.js.snap

@@ -8,7 +8,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"3\\">
         <div data-streamfield-stream-container=\\"\\"><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"1\\">
@@ -72,7 +72,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"2\\">
@@ -136,7 +136,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"fake-uuid-v4-value\\">
@@ -200,7 +200,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be duplicated 1`] = `
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div></div>
@@ -215,7 +215,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
         <div data-streamfield-stream-container=\\"\\"><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"2\\">
@@ -279,7 +279,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"1\\">
@@ -343,7 +343,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered downward 1
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div></div>
@@ -358,7 +358,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
         <div data-streamfield-stream-container=\\"\\"><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"2\\">
@@ -422,7 +422,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"1\\">
@@ -486,7 +486,7 @@ exports[`telepath: wagtail.blocks.StreamBlock blocks can be reordered upward 1`]
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div></div>
@@ -501,7 +501,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
         <div data-streamfield-stream-container=\\"\\"><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"1\\">
@@ -565,7 +565,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"2\\">
@@ -629,7 +629,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders correctly 1`] = `
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div></div>
@@ -644,7 +644,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
         </div><div class=\\"\\">
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
         <div data-streamfield-stream-container=\\"\\"><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"1\\">
@@ -708,7 +708,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"true\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"true\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       <div data-tippy-root=\\"\\" id=\\"tippy-5\\" style=\\"z-index: 9999; visibility: visible; transition: none; position: absolute; left: 0px; top: 0px; margin: 0px;\\"><div class=\\"tippy-box\\" data-state=\\"hidden\\" tabindex=\\"-1\\" data-theme=\\"dropdown\\" data-animation=\\"fade\\" style=\\"max-width: 350px; transition-duration: 0ms;\\" role=\\"tooltip\\"><div class=\\"tippy-content\\" data-state=\\"hidden\\" style=\\"transition-duration: 0ms;\\"><div><div class=\\"w-combobox\\"><label id=\\"downshift-0-label\\" for=\\"downshift-0-input\\" class=\\"w-sr-only\\">Search options…</label><div class=\\"w-combobox__field\\"><input aria-activedescendant=\\"\\" aria-autocomplete=\\"list\\" aria-controls=\\"downshift-0-menu\\" aria-expanded=\\"false\\" aria-labelledby=\\"downshift-0-label\\" autocomplete=\\"off\\" id=\\"downshift-0-input\\" role=\\"combobox\\" type=\\"text\\" placeholder=\\"Search options…\\" value=\\"\\"></div><div id=\\"downshift-0-menu\\" role=\\"listbox\\" aria-labelledby=\\"downshift-0-label\\" class=\\"w-combobox__menu\\"><div class=\\"w-combobox__optgroup\\"><div role=\\"option\\" aria-selected=\\"false\\" id=\\"downshift-0-item-0\\" class=\\"w-combobox__option w-combobox__option--col1\\"><div class=\\"w-combobox__option-icon\\"><svg class=\\"icon icon-placeholder \\" aria-hidden=\\"true\\"><use href=\\"#icon-placeholder\\"></use></svg></div><div class=\\"w-combobox__option-text\\">Test Block A</div></div><div role=\\"option\\" aria-selected=\\"false\\" id=\\"downshift-0-item-1\\" class=\\"w-combobox__option w-combobox__option--col2\\"><div class=\\"w-combobox__option-icon\\"><svg class=\\"icon icon-pilcrow \\" aria-hidden=\\"true\\"><use href=\\"#icon-pilcrow\\"></use></svg></div><div class=\\"w-combobox__option-text\\">Test Block B</div></div></div></div></div></div></div></div></div></div><div data-contentpath=\\"2\\">
@@ -772,7 +772,7 @@ exports[`telepath: wagtail.blocks.StreamBlock it renders menus on opening 1`] =
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div></div>
@@ -787,7 +787,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
         </div><div class=\\"\\"><p class=\\"help-block help-critical\\">At least three blocks are required</p>
         <input type=\\"hidden\\" name=\\"the-prefix-count\\" data-streamfield-stream-count=\\"\\" value=\\"2\\">
         <div data-streamfield-stream-container=\\"\\"><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"1\\">
@@ -851,7 +851,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div><div data-contentpath=\\"2\\">
@@ -915,7 +915,7 @@ exports[`telepath: wagtail.blocks.StreamBlock setError renders error messages 1`
           </div>
         </section>
       </div><div>
-        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button c-sf-add-button--visible\\" aria-expanded=\\"false\\">
+        <button type=\\"button\\" title=\\"Insert a block\\" class=\\"c-sf-add-button\\" aria-expanded=\\"false\\">
           <svg class=\\"icon icon-plus\\" aria-hidden=\\"true\\"><use href=\\"#icon-plus\\"></use></svg>
         </button>
       </div></div>

client/src/components/StreamField/scss/components/c-sf-add-button.scss

@@ -9,8 +9,6 @@
   background-color: $color-white;
   padding: 0;
   cursor: pointer;
-  opacity: 0;
-  pointer-events: none;
   border: 1px solid currentColor;
   border-radius: theme('borderRadius.full');
   margin-inline-start: -1px;
@@ -25,25 +23,6 @@
     transform: rotate(45deg);
   }
 
-  &--visible {
-    opacity: 1;
-    pointer-events: unset;
-
-    @media (hover: hover) {
-      opacity: 0;
-
-      .w-panel--nested:is(:hover, :focus-within) & {
-        opacity: 1;
-      }
-    }
-  }
-
-  &--always-visible {
-    @media (hover: hover) {
-      opacity: 1;
-    }
-  }
-
   &:hover,
   &:focus-visible {
     color: $color-white;
@@ -52,18 +31,9 @@
 
   &[disabled] {
     opacity: 0.2;
-    pointer-events: none;
 
     @media (forced-colors: active) {
       color: GrayText;
     }
-
-    @media (hover: hover) {
-      opacity: 0;
-
-      .w-panel--nested:is(:hover, :focus-within) & {
-        opacity: 0.2;
-      }
-    }
   }
 }