Global Styles: refactor site background controls and move site global…

… styles into Background group (#65304) Expose background styles in the top level global styles navigation menu. Background is now underneath color. Refactor background image controls and their styles into a dedicated component. This is in preparation for adding colors and other background controls later. Co-authored-by: amitraj2203 <[email protected]> Co-authored-by: mtias <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Sep 16, 2024 · 9f79666 · 9f79666
1 parent b10ca39
commit 9f79666
Show file tree

Hide file tree

Showing 13 changed files with 1,057 additions and 958 deletions.
diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js
diff --git a/packages/block-editor/src/components/background-image-control/style.scss b/packages/block-editor/src/components/background-image-control/style.scss
@@ -0,0 +1,170 @@
+.block-editor-global-styles-background-panel__inspector-media-replace-container {
+	border: $border-width solid $gray-300;
+	border-radius: $radius-small;
+	// Full width. ToolsPanel lays out children in a grid.
+	grid-column: 1 / -1;
+
+	&.is-open {
+		background-color: $gray-100;
+	}
+
+	.block-editor-global-styles-background-panel__image-tools-panel-item {
+		flex-grow: 1;
+		border: 0;
+
+		.components-dropdown {
+			display: block;
+		}
+	}
+
+	.block-editor-global-styles-background-panel__inspector-preview-inner {
+		height: 100%;
+	}
+
+	.components-dropdown {
+		display: block;
+		height: 36px;
+	}
+}
+
+.block-editor-global-styles-background-panel__image-tools-panel-item {
+	border: $border-width solid $gray-300;
+
+	// Full width. ToolsPanel lays out children in a grid.
+	grid-column: 1 / -1;
+
+	// Ensure the dropzone is positioned to the size of the item.
+	position: relative;
+
+	// Since there is no option to skip rendering the drag'n'drop icon in drop
+	// zone, we hide it for now.
+	.components-drop-zone__content-icon {
+		display: none;
+	}
+
+	.components-dropdown {
+		display: block;
+		height: 36px;
+	}
+
+	button.components-button {
+		color: $gray-900;
+		width: 100%;
+		display: block;
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+
+		&:focus {
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		}
+	}
+
+	.block-editor-global-styles-background-panel__loading {
+		height: 100%;
+		position: absolute;
+		z-index: 1;
+		width: 100%;
+		padding: 10px 0 0 0;
+
+		svg {
+			margin: 0;
+		}
+	}
+}
+
+.block-editor-global-styles-background-panel__image-preview-content,
+.block-editor-global-styles-background-panel__dropdown-toggle {
+	height: 100%;
+	width: 100%;
+	padding-left: $grid-unit-15;
+}
+
+.block-editor-global-styles-background-panel__dropdown-toggle {
+	cursor: pointer;
+	background: transparent;
+	border: none;
+}
+
+.block-editor-global-styles-background-panel__inspector-media-replace-title {
+	word-break: break-all;
+	// The Button component is white-space: nowrap, and that won't work with line-clamp.
+	white-space: normal;
+
+	// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+	text-align: start;
+	text-align-last: center;
+}
+
+.block-editor-global-styles-background-panel__inspector-preview-inner {
+	.block-editor-global-styles-background-panel__inspector-image-indicator-wrapper {
+		width: 20px;
+		height: 20px;
+		min-width: auto;
+	}
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator {
+	background-size: cover;
+	border-radius: $radius-round;
+	width: 20px;
+	height: 20px;
+	display: block;
+	position: relative;
+}
+
+.block-editor-global-styles-background-panel__inspector-image-indicator::after {
+	content: "";
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	bottom: -1px;
+	right: -1px;
+	border-radius: $radius-round;
+	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+	// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
+	border: 1px solid transparent;
+	box-sizing: inherit;
+}
+
+.block-editor-global-styles-background-panel__dropdown-content-wrapper {
+	min-width: 260px;
+	overflow-x: hidden;
+
+	.components-focal-point-picker-wrapper {
+		background-color: $gray-100;
+		width: 100%;
+		border-radius: $radius-small;
+		border: $border-width solid $gray-300;
+	}
+
+	.components-focal-point-picker__media--image {
+		max-height: 180px;
+	}
+
+	// Override focal picker to avoid a double border.
+	.components-focal-point-picker::after {
+		content: none;
+	}
+}
+
+// Push control panel into the background when the media modal is open.
+.modal-open .block-editor-global-styles-background-panel__popover {
+	z-index: z-index(".block-editor-global-styles-background-panel__popover");
+}
+
+.block-editor-global-styles-background-panel__media-replace-popover {
+	.components-popover__content {
+		// width of block-editor-global-styles-background-panel__dropdown-content-wrapper minus padding.
+		width: 226px;
+	}
+
+	.components-button {
+		padding: 0 $grid-unit-10;
+	}
+
+	.components-button .components-menu-items__item-icon.has-icon-right {
+		margin-left: $grid-unit-30 - $grid-unit-10;
+	}
+}
diff --git a/packages/block-editor/src/components/background-image-control/test/index.js b/packages/block-editor/src/components/background-image-control/test/index.js
@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+
+import { backgroundPositionToCoords, coordsToBackgroundPosition } from '../';
+
+describe( 'backgroundPositionToCoords', () => {
+	it( 'should return the correct coordinates for a percentage value using 2-value syntax', () => {
+		expect( backgroundPositionToCoords( '25% 75%' ) ).toEqual( {
+			x: 0.25,
+			y: 0.75,
+		} );
+	} );
+
+	it( 'should return the correct coordinates for a percentage using 1-value syntax', () => {
+		expect( backgroundPositionToCoords( '50%' ) ).toEqual( {
+			x: 0.5,
+			y: 0.5,
+		} );
+	} );
+
+	it( 'should return undefined coords in given an empty value', () => {
+		expect( backgroundPositionToCoords( '' ) ).toEqual( {
+			x: undefined,
+			y: undefined,
+		} );
+	} );
+
+	it( 'should return undefined coords in given a string that cannot be converted', () => {
+		expect( backgroundPositionToCoords( 'apples' ) ).toEqual( {
+			x: undefined,
+			y: undefined,
+		} );
+	} );
+} );
+
+describe( 'coordsToBackgroundPosition', () => {
+	it( 'should return the correct background position for a set of coordinates', () => {
+		expect( coordsToBackgroundPosition( { x: 0.25, y: 0.75 } ) ).toBe(
+			'25% 75%'
+		);
+	} );
+
+	it( 'should return undefined if no coordinates are provided', () => {
+		expect( coordsToBackgroundPosition( {} ) ).toBeUndefined();
+	} );
+} );