Improve link conrol preview when show button text label is enabled. (#61726)

afercia · t-hamano · jasmussen · web-flow · commit 6f0037c6accf · 2024-05-24T08:40:40.000+02:00
* Improve link conrol preview when show button text label is enabled.

* Reduce gap.

* Remove right alignment.

Co-authored-by: afercia &lt;afercia@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: jasmussen &lt;joen@git.wordpress.org&gt;
Co-authored-by: richtabor &lt;richtabor@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -36,13 +36,19 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 
 		.block-editor-link-control__search-item-top {
-			gap: $grid-unit-10;
+			gap: $grid-unit-05;
+			flex-wrap: wrap;
 
 			.components-button.has-icon {
-				min-width: inherit;
-				width: min-content;
+				width: auto;
+				padding: $grid-unit-05;
 			}
 		}
+
+		.is-preview .block-editor-link-control__search-item-header {
+			min-width: 100%;
+			margin-right: 0;
+		}
 	}
 }
 

Original file line number	Diff line number	Diff line change
`@@ -36,13 +36,19 @@ $block-editor-link-control-number-of-actions: 1;`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`.block-editor-link-control__search-item-top {`
`39`		`- gap: $grid-unit-10;`
	`39`	`+ gap: $grid-unit-05;`
	`40`	`+ flex-wrap: wrap;`
`40`	`41`
`41`	`42`	`.components-button.has-icon {`
`42`		`- min-width: inherit;`
`43`		`- width: min-content;`
	`43`	`+ width: auto;`
	`44`	`+ padding: $grid-unit-05;`
`44`	`45`	`}`
`45`	`46`	`}`
	`47`	`+`
	`48`	`+ .is-preview .block-editor-link-control__search-item-header {`
	`49`	`+ min-width: 100%;`
	`50`	`+ margin-right: 0;`
	`51`	`+ }`
`46`	`52`	`}`
`47`	`53`	`}`
`48`	`54`