Issue #2739079 by DyanneNova, akalata, webchick, tkoleary, pwolanin, SKAUGHT,...

Issue #2739079 by DyanneNova, akalata, webchick, tkoleary, pwolanin, SKAUGHT, elliotc, lizzjoy, YesCT, yoroy, miwayha: Create a validated design for Block Place module

core/misc/icons/787878/plus.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><path fill="#787878" d="M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z"/></svg>

core/misc/icons/bebebe/plus.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"><path fill="#bebebe" d="M0.656,9.023c0,0.274,0.224,0.5,0.499,0.5l4.853,0.001c0.274-0.001,0.501,0.226,0.5,0.5l0.001,4.853 c-0.001,0.273,0.227,0.5,0.501,0.5l1.995-0.009c0.273-0.003,0.497-0.229,0.5-0.503l0.002-4.806c0-0.272,0.228-0.5,0.499-0.502 l4.831-0.021c0.271-0.005,0.497-0.23,0.501-0.502l0.008-1.998c0-0.276-0.225-0.5-0.499-0.5l-4.852,0c-0.275,0-0.502-0.228-0.501-0.5 L9.493,1.184c0-0.275-0.225-0.499-0.5-0.499L6.997,0.693C6.722,0.694,6.496,0.92,6.495,1.195L6.476,6.026 c-0.001,0.274-0.227,0.5-0.501,0.5L1.167,6.525C0.892,6.526,0.665,6.752,0.665,7.026L0.656,9.023z"/></svg>

core/modules/block_place/css/block-place.css

@@ -3,22 +3,27 @@
  * Styling for block_place module regions and buttons during block placement.
  */
 
-/* Borrows styling from Bartik's demo-block.css. */
 .block-place-region {
-  background: #ffff66;
-  border: 1px dotted #9f9e00;
-  font: 90% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
-  margin: 5px;
+  outline: 1px dashed rgba(0,0,0,0.5);
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
+  margin: 1em 0;
   padding: 5px;
   text-align: center;
   text-shadow: none;
 }
 
 .block-place-region a.button {
+  background: url(../../../misc/icons/bebebe/plus.svg) #ffffff center center / 16px 16px no-repeat;
+  border: 1px solid #cccccc;
+  box-sizing: border-box;
+  font-size: 1rem;
+  padding: 0;
+  height: 26px;
+  width: 26px;
   white-space: nowrap;
-  color: #3a3a3a;
 }
 
-.region:hover {
-  outline: 1px dashed #9f9e00;
+.block-place-region:hover a.button, .block-place-region:focus a.button {
+  background-image: url(../../../misc/icons/787878/plus.svg);
+  transition: all 0.25s ease;
 }

core/modules/block_place/src/Plugin/DisplayVariant/PlaceBlockPageVariant.php

@@ -99,7 +99,7 @@ public function build() {
       if ($destination) {
         $query['destination'] = $destination;
       }
-      $title = $this->t('Place block<span class="visually-hidden"> in the %region region</span>', ['%region' => $region_name]);
+      $title = $this->t('<span class="visually-hidden">Place block in the %region region</span>', ['%region' => $region_name]);
       $operations['block_description'] = [
         '#type' => 'inline_template',
         '#template' => '<div class="block-place-region">{{ link }}</div>',

core/modules/block_place/tests/src/Functional/BlockPlaceTest.php

@@ -50,7 +50,7 @@ public function testPlacingBlocksAdmin() {
       $this->assertNotEmpty($query_parts['destination']);
 
       // Get the text inside the div->a->span->em.
-      $demo_block = $this->xpath('//div[@class="block-place-region"]/a[text()="Place block"]//em[text()="' . $name . '"]');
+      $demo_block = $this->xpath('//div[@class="block-place-region"]/a/span[text()="Place block in the "]/em[text()="' . $name . '"]');
       $this->assertEquals(1, count($demo_block));
     }
   }