Improve accessing layout settings

Firefox does not hande select menus on hover well. Add `active` class
to block in editmode to not solely rely on hover.

Author: PeeterPaal

javascripts/editmode.js

@@ -381,6 +381,24 @@
     };
 
     const bindBlockLayoutChange = ({bodyBlocks, dataKey}) => {
+      $('.js-blocks-wrapper').on('mouseenter', e => {
+        const $block = $(e.target).closest('.js-blocks-wrapper').first();
+
+        $block.addClass('active');
+      });
+
+      $('.js-change-layout-select').on('click', e => {
+        const $block = $(e.target).closest('.js-blocks-wrapper').first();
+
+        $block.addClass('active');
+      });
+
+      $('.js-blocks-wrapper').on('mouseleave', e => {
+        const $block = $(e.target).closest('.js-blocks-wrapper').first();
+
+        $block.removeClass('active');
+      });
+
       $('.js-change-layout-select').on('change', e => {
         const targetKey = $(e.target).find(':selected').data('key');
         const newLayout = e.target.value;

javascripts/editmode.min.js

@@ -377,6 +377,24 @@
   };
 
   const bindBlockLayoutChange = ({bodyBlocks, dataKey}) => {
+    $('.js-blocks-wrapper').on('mouseenter', e => {
+      const $block = $(e.target).closest('.js-blocks-wrapper').first();
+
+      $block.addClass('active');
+    });
+
+    $('.js-change-layout-select').on('click', e => {
+      const $block = $(e.target).closest('.js-blocks-wrapper').first();
+
+      $block.addClass('active');
+    })
+
+    $('.js-blocks-wrapper').on('mouseleave', e => {
+      const $block = $(e.target).closest('.js-blocks-wrapper').first();
+
+      $block.removeClass('active');
+    });
+
     $('.js-change-layout-select').on('change', e => {
       const targetKey = $(e.target).find(':selected').data('key');
       const newLayout = e.target.value;

sources/javascripts/editmode.js

@@ -20,7 +20,7 @@
     }
   }
 
-  &:hover > .block-edit-buttons {
+  &:hover > .block-edit-buttons, &.active > .block-edit-buttons {
     background-color: rgba($grey-1, .5);
 
     > * {

sources/stylesheets/components/_block.scss

@@ -21,16 +21,19 @@
 .category-blocks .block-edit-buttons > * {
   display: none;
 }
-.block-wrapper:hover > .block-edit-buttons,
-.category-blocks:hover > .block-edit-buttons {
+.block-wrapper:hover > .block-edit-buttons, .block-wrapper.active > .block-edit-buttons,
+.category-blocks:hover > .block-edit-buttons,
+.category-blocks.active > .block-edit-buttons {
   background-color: rgba(247, 247, 242, 0.5);
 }
-.block-wrapper:hover > .block-edit-buttons > *,
-.category-blocks:hover > .block-edit-buttons > * {
+.block-wrapper:hover > .block-edit-buttons > *, .block-wrapper.active > .block-edit-buttons > *,
+.category-blocks:hover > .block-edit-buttons > *,
+.category-blocks.active > .block-edit-buttons > * {
   display: block;
 }
-.block-wrapper:hover > .block-edit-buttons > *[data-title]:after,
-.category-blocks:hover > .block-edit-buttons > *[data-title]:after {
+.block-wrapper:hover > .block-edit-buttons > *[data-title]:after, .block-wrapper.active > .block-edit-buttons > *[data-title]:after,
+.category-blocks:hover > .block-edit-buttons > *[data-title]:after,
+.category-blocks.active > .block-edit-buttons > *[data-title]:after {
   content: attr(data-title);
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
@@ -47,26 +50,31 @@
   font-family: var(--font-family);
   pointer-events: none;
 }
-.block-wrapper:hover > .block-edit-buttons > *[data-title]:hover:after,
-.category-blocks:hover > .block-edit-buttons > *[data-title]:hover:after {
+.block-wrapper:hover > .block-edit-buttons > *[data-title]:hover:after, .block-wrapper.active > .block-edit-buttons > *[data-title]:hover:after,
+.category-blocks:hover > .block-edit-buttons > *[data-title]:hover:after,
+.category-blocks.active > .block-edit-buttons > *[data-title]:hover:after {
   opacity: 1;
 }
-.block-wrapper:hover > .block-edit-buttons .up-button:after,
-.category-blocks:hover > .block-edit-buttons .up-button:after {
+.block-wrapper:hover > .block-edit-buttons .up-button:after, .block-wrapper.active > .block-edit-buttons .up-button:after,
+.category-blocks:hover > .block-edit-buttons .up-button:after,
+.category-blocks.active > .block-edit-buttons .up-button:after {
   left: 0;
 }
-.block-wrapper:hover > .block-edit-buttons .delete-button:after,
-.category-blocks:hover > .block-edit-buttons .delete-button:after {
+.block-wrapper:hover > .block-edit-buttons .delete-button:after, .block-wrapper.active > .block-edit-buttons .delete-button:after,
+.category-blocks:hover > .block-edit-buttons .delete-button:after,
+.category-blocks.active > .block-edit-buttons .delete-button:after {
   right: 0;
 }
-.block-wrapper:hover > .block-edit-buttons .down-button:after,
-.category-blocks:hover > .block-edit-buttons .down-button:after {
+.block-wrapper:hover > .block-edit-buttons .down-button:after, .block-wrapper.active > .block-edit-buttons .down-button:after,
+.category-blocks:hover > .block-edit-buttons .down-button:after,
+.category-blocks.active > .block-edit-buttons .down-button:after {
   top: 32px;
   right: 0;
   transform: rotate(180deg);
 }
-.block-wrapper:hover > .block-edit-buttons .change-layout-options:after,
-.category-blocks:hover > .block-edit-buttons .change-layout-options:after {
+.block-wrapper:hover > .block-edit-buttons .change-layout-options:after, .block-wrapper.active > .block-edit-buttons .change-layout-options:after,
+.category-blocks:hover > .block-edit-buttons .change-layout-options:after,
+.category-blocks.active > .block-edit-buttons .change-layout-options:after {
   left: 0;
 }