Fix focus state for card image in block editor

Author: ravichdev

plugin/assets/src/block-editor/blocks/card/edit.js

@@ -100,6 +100,7 @@ const Edit = ( { attributes, setAttributes, className } ) => {
 		cornerRadius,
 		setter,
 		isEditMode: true,
+		isFocused: true,
 	};
 
 	const inspectorControlsStylePanelProps = {

plugin/assets/src/block-editor/blocks/card/editor.css

@@ -34,11 +34,12 @@
 	}
 }
 
-.material-design-card__media-close-button {
+.edit-post-visual-editor .material-design-card__media-close-button {
+	min-width: 0;
 	padding: 2px !important;
 
 	& .dashicon {
-		margin: 0 !important;
+		margin: 0;
 	}
 }
 

plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap

@@ -581,6 +581,30 @@ Object {
                   src="http://test.loc/test.jpg"
                 />
               </div>
+              <div
+                class="material-design-card__media-actions"
+              >
+                <button
+                  aria-label="Remove Card Image"
+                  class="components-button material-design-card__media-close-button has-icon"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="dashicon dashicons-no"
+                    focusable="false"
+                    height="20"
+                    role="img"
+                    viewBox="0 0 20 20"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
+                    />
+                  </svg>
+                </button>
+              </div>
             </div>
             <div
               class="material-design-card__primary"
@@ -1213,6 +1237,30 @@ Object {
                 src="http://test.loc/test.jpg"
               />
             </div>
+            <div
+              class="material-design-card__media-actions"
+            >
+              <button
+                aria-label="Remove Card Image"
+                class="components-button material-design-card__media-close-button has-icon"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="dashicon dashicons-no"
+                  focusable="false"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
           <div
             class="material-design-card__primary"
@@ -1926,6 +1974,30 @@ Object {
                   src="http://test.loc/test.jpg"
                 />
               </div>
+              <div
+                class="material-design-card__media-actions"
+              >
+                <button
+                  aria-label="Remove Card Image"
+                  class="components-button material-design-card__media-close-button has-icon"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="dashicon dashicons-no"
+                    focusable="false"
+                    height="20"
+                    role="img"
+                    viewBox="0 0 20 20"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
+                    />
+                  </svg>
+                </button>
+              </div>
             </div>
             <div
               class="material-design-card__primary"
@@ -2558,6 +2630,30 @@ Object {
                 src="http://test.loc/test.jpg"
               />
             </div>
+            <div
+              class="material-design-card__media-actions"
+            >
+              <button
+                aria-label="Remove Card Image"
+                class="components-button material-design-card__media-close-button has-icon"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="dashicon dashicons-no"
+                  focusable="false"
+                  height="20"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
           <div
             class="material-design-card__primary"