Icons: Redraw 64 icons to be stroke-based.

packages/block-editor/CHANGELOG.md

@@ -17,6 +17,7 @@
 
 ### Bug Fixes
 
+-   `BlockManager`: Color library block icons with `color` while retaining a `fill` fallback for custom icons that do not use `currentColor`. ([#78812](https://github.com/WordPress/gutenberg/pull/78812))
 -   Block List Appender: Show the appender button as a drop target when dragging a block over an empty container such as a Column, restoring the reveal that the `visibility`-to-`opacity` migration left behind ([#77852](https://github.com/WordPress/gutenberg/pull/77852)).
 -   Inserter: Keep the hovered block preview inside the viewport, so a tall preview in a short window is no longer clipped ([#82060](https://github.com/WordPress/gutenberg/pull/82060)).
 -   Element styles: Register each block's element-style CSS override with the block's `clientId`, so the editor orders them by block position instead of registration order. A parent's link color re-registered after a child's (e.g. by resetting and re-picking it) no longer overrides the child's own link color in the canvas ([#77833](https://github.com/WordPress/gutenberg/pull/77833)).

packages/block-editor/src/components/alignment-control/test/__snapshots__/index.jsdom.test.jsx.snap

@@ -18,15 +18,18 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
+            d="M4 5H13M4 12H20M4 19H13"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -42,15 +45,18 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
+            d="M7.5 5H16.5M4 12H20M7.5 19H16.5"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -75,15 +81,18 @@ exports[`AlignmentUI should match snapshot when controls are hidden 1`] = `
     >
       <svg
         aria-hidden="true"
-        fill="currentColor"
         focusable="false"
         height="24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        style="fill: none;"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
+          d="M4 5H13M4 12H20M4 19H13"
+          vector-effect="non-scaling-stroke"
         />
       </svg>
     </button>
@@ -109,15 +118,18 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M13 5.5H4V4h9v1.5Zm7 7H4V11h16v1.5Zm-7 7H4V18h9v1.5Z"
+            d="M4 5H13M4 12H20M4 19H13"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -133,15 +145,18 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M7.5 5.5h9V4h-9v1.5Zm-3.5 7h16V11H4v1.5Zm3.5 7h9V18h-9v1.5Z"
+            d="M7.5 5H16.5M4 12H20M7.5 19H16.5"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>
@@ -157,15 +172,18 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M11.111 5.5H20V4h-8.889v1.5ZM4 12.5h16V11H4v1.5Zm7.111 7H20V18h-8.889v1.5Z"
+            d="M11 5H20M4 12H20M11 19H20"
+            vector-effect="non-scaling-stroke"
           />
         </svg>
       </button>

packages/block-editor/src/components/block-alignment-control/test/__snapshots__/index.jsdom.test.jsx.snap

@@ -16,15 +16,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are hidden 1`] = `
     >
       <svg
         aria-hidden="true"
-        fill="currentColor"
         focusable="false"
         height="24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        style="fill: none;"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
+          d="M5 4.75H13M5 19.25H13"
+          vector-effect="non-scaling-stroke"
+        />
+        <rect
+          fill="currentColor"
+          height="6"
+          stroke="none"
+          width="14"
+          x="5"
+          y="9"
         />
       </svg>
     </button>
@@ -49,15 +60,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM5 9h14v6H5V9Z"
+            d="M5 5H19M5 19H19"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="14"
+            x="5"
+            y="9"
           />
         </svg>
       </button>
@@ -72,15 +94,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M5 5.5h8V4H5v1.5ZM5 20h8v-1.5H5V20ZM19 9H5v6h14V9Z"
+            d="M5 4.75H13M5 19.25H13"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="14"
+            x="5"
+            y="9"
           />
         </svg>
       </button>
@@ -95,15 +128,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 5.5H5V4h14v1.5ZM19 20H5v-1.5h14V20ZM7 9h10v6H7V9Z"
+            d="M5 4.75H19M5 19.25H19"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="10"
+            x="7"
+            y="9"
           />
         </svg>
       </button>
@@ -118,15 +162,26 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       >
         <svg
           aria-hidden="true"
-          fill="currentColor"
           focusable="false"
           height="24"
+          stroke="currentColor"
+          stroke-width="1.5"
+          style="fill: none;"
           viewBox="0 0 24 24"
           width="24"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M19 5.5h-8V4h8v1.5ZM19 20h-8v-1.5h8V20ZM5 9h14v6H5V9Z"
+            d="M11 4.75H19M11 19.25H19"
+            vector-effect="non-scaling-stroke"
+          />
+          <rect
+            fill="currentColor"
+            height="6"
+            stroke="none"
+            width="14"
+            x="5"
+            y="9"
           />
         </svg>
       </button>

packages/block-editor/src/components/block-manager/style.scss

@@ -47,7 +47,9 @@
 
 	.block-editor-block-icon {
 		margin-right: 10px;
+		// Keep `fill` as a fallback for custom block icons that do not use `currentColor`.
 		fill: $gray-900;
+		color: $gray-900;
 	}
 }
 

packages/block-editor/src/components/block-variation-picker/content.scss

@@ -16,6 +16,7 @@
 	font-size: $helptext-font-size;
 
 	svg {
+		// Keep `fill` as a fallback for custom variation icons that do not use `currentColor`.
 		fill: $gray-600;
 		color: $gray-600 !important;
 	}