@wordpress/block-editor 12.3.0 → 12.3.2

package/src/components/link-control/style.scss

@@ -59,29 +59,18 @@ $preview-image-height: 140px;
 .block-editor-link-control__field {
 	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
 
-	// Element wrapping the label and input.
-	> .components-base-control__field {
-		display: flex;
-		align-items: center;
-	}
-
-	.components-base-control__label {
-		margin-right: $grid-unit-20;
-		margin-bottom: 0;
-		min-width: 29px; // align with search results.
-	}
-
 	input[type="text"],
 	// Specificity overide of URLInput defaults.
 	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
-		width: calc(100% - #{$grid-unit-20 * 2});
 		display: block;
-		padding: 11px $grid-unit-20;
+		border: 1px solid $gray-600;
+		border-radius: $radius-block-ui;
+		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
 		margin: 0;
+		padding: $grid-unit-10 $grid-unit-20;
 		position: relative;
-		border: 1px solid $gray-300;
-		border-radius: $radius-block-ui;
+		width: 100%;
 	}
 }
 
@@ -94,12 +83,12 @@ $preview-image-height: 140px;
 	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
 	justify-content: flex-start;
 	gap: $grid-unit-10;
+	padding: $grid-unit-10;
 	order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
 	position: relative;
-	margin-top: -$grid-unit-20 + 1px;
 
 	&::before,
 	&::after {
@@ -440,36 +429,7 @@ $preview-image-height: 140px;
 	display: flex; // allow for ordering.
 	flex-direction: column;
 	flex-basis: 100%; // occupy full width.
-	margin-top: $grid-unit-20;
-	padding-top: $grid-unit-20;
 	position: relative;
-
-	&::after {
-		content: "";
-		display: block;
-		height: 1px;
-		background-color: $gray-300;
-		position: absolute;
-		left: -$grid-unit-20;
-		right: -$grid-unit-20;
-		top: 0;
-	}
-}
-
-.block-editor-link-control__tools {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: space-between;
-	margin: 0;
-	padding: $grid-unit-20;
-
-	// To hide the horizontal scrollbar on toggle.
-	// Margin and padding are needed to prevent cutoff of the toggle button focus outline.
-	// See: https://github.com/WordPress/gutenberg/pull/47986
-	margin-top: calc(var(--wp-admin-border-width-focus) * -1);
-	padding-top: var(--wp-admin-border-width-focus);
-	overflow: hidden;
 }
 
 .block-editor-link-control__unlink {
@@ -477,17 +437,10 @@ $preview-image-height: 140px;
 	padding-right: $grid-unit-20;
 }
 
-.block-editor-link-control__settings {
-	flex: 1;
-	margin: 0;
-
-	.is-alternate & {
-		border-top: $border-width solid $gray-900;
-	}
-}
-
 .block-editor-link-control__setting {
 	margin-bottom: $grid-unit-20;
+	flex: 1;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-30;
 
 	// Cancel left margin inherited from WP Admin Forms CSS.
 	input {
@@ -499,6 +452,31 @@ $preview-image-height: 140px;
 	}
 }
 
+.block-editor-link-control__tools {
+	padding: $grid-unit-10 $grid-unit-10 0 $grid-unit-10;
+	margin-top: #{$grid-unit-20 * -1};
+
+	.components-button.block-editor-link-control__drawer-toggle {
+		padding-left: 0;
+		gap: 0;
+
+		// Point downwards when open (same as list view expander)
+		&[aria-expanded="true"] svg {
+			visibility: visible;
+			transition: transform 0.1s ease;
+			transform: rotate(90deg);
+			@include reduce-motion("transition");
+		}
+		// Point rightwards when closed (same as list view expander)
+		&[aria-expanded="false"] svg {
+			visibility: visible;
+			transform: rotate(0deg);
+			transition: transform 0.1s ease;
+			@include reduce-motion("transition");
+		}
+	}
+}
+
 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
 	display: block;