First commit -just getting things working for the top level styles (b…

…ody tag) Style engine Toggle control that only appears on global styles
WordPress · Jun 7, 2024 · 2bdb93b · 2bdb93b
1 parent 3bd6799
commit 2bdb93b
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 11 deletions.
diff --git a/lib/block-supports/background.php b/lib/block-supports/background.php
@@ -67,7 +67,7 @@ function gutenberg_render_background_support( $block_content, $block ) {
 	}
 
 	$styles = gutenberg_style_engine_get_styles( array( 'background' => $background_styles ) );
-
+var_dump( $block_attributes['style']['background'] );
 	if ( ! empty( $styles['css'] ) ) {
 		// Inject background styles to the first element, presuming it's the wrapper, if it exists.
 		$tags = new WP_HTML_Tag_Processor( $block_content );

diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -234,6 +234,7 @@ class WP_Theme_JSON_Gutenberg {
 		'background-position'               => array( 'background', 'backgroundPosition' ),
 		'background-repeat'                 => array( 'background', 'backgroundRepeat' ),
 		'background-size'                   => array( 'background', 'backgroundSize' ),
+		'background-attachment'             => array( 'background', 'backgroundAttachment' ),
 		'border-radius'                     => array( 'border', 'radius' ),
 		'border-top-left-radius'            => array( 'border', 'radius', 'topLeft' ),
 		'border-top-right-radius'           => array( 'border', 'radius', 'topRight' ),
@@ -502,10 +503,11 @@ class WP_Theme_JSON_Gutenberg {
 	 */
 	const VALID_STYLES = array(
 		'background' => array(
-			'backgroundImage'    => 'top',
-			'backgroundPosition' => 'top',
-			'backgroundRepeat'   => 'top',
-			'backgroundSize'     => 'top',
+			'backgroundImage'      => 'top',
+			'backgroundAttachment' => 'top',
+			'backgroundPosition'   => 'top',
+			'backgroundRepeat'     => 'top',
+			'backgroundSize'       => 'top',
 		),
 		'border'     => array(
 			'color'  => null,

diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -195,6 +195,7 @@ function BackgroundImageToolsPanelItem( {
 	style,
 	inheritedValue,
 	themeFileURIs,
+	settings,
 } ) {
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -205,6 +206,13 @@ function BackgroundImageToolsPanelItem( {
 		...inheritedValue?.background?.backgroundImage,
 	};
 
+	const shouldShowBackgroundAttachmentControls =
+		settings?.background?.backgroundAttachment;
+
+	const attachmentValue = style?.background?.backgroundAttachment || {
+		...inheritedValue?.background?.backgroundAttachment,
+	};
+
 	const replaceContainerRef = useRef();
 
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -289,6 +297,15 @@ function BackgroundImageToolsPanelItem( {
 		};
 	}, [] );
 
+	const toggleScrollWithPage = () =>
+		onChange(
+			setImmutably(
+				style,
+				[ 'background', 'backgroundAttachment' ],
+				attachmentValue === 'fixed' ? 'scroll' : 'fixed'
+			)
+		);
+
 	const hasValue = hasBackgroundImageValue( style );
 
 	const closeAndFocus = () => {
@@ -309,7 +326,9 @@ function BackgroundImageToolsPanelItem( {
 	const canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );
 
 	return (
-		<ToolsPanelItem
+		<VStack
+			as={ ToolsPanelItem }
+			spacing={ 4 }
 			className="single-column"
 			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
@@ -366,7 +385,19 @@ function BackgroundImageToolsPanelItem( {
 					label={ __( 'Drop to upload' ) }
 				/>
 			</div>
-		</ToolsPanelItem>
+			{ shouldShowBackgroundAttachmentControls && (
+				<div className="block-editor-global-styles-background-panel__attachment">
+					<ToggleControl
+						label={ __( 'Scroll with page' ) }
+						checked={ attachmentValue !== 'fixed' }
+						onChange={ toggleScrollWithPage }
+						help={ __(
+							'Whether your image should scroll with the page or stay fixed in place.'
+						) }
+					/>
+				</div>
+			) }
+		</VStack>
 	);
 }
 
@@ -646,6 +677,7 @@ export default function BackgroundPanel( {
 				style={ value }
 				inheritedValue={ inheritedValue }
 				themeFileURIs={ themeFileURIs }
+                settings={ settings }
 			/>
 			{ shouldShowBackgroundSizeControls && (
 				<BackgroundSizeToolsPanelItem

diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
@@ -162,6 +162,7 @@ export function BackgroundImagePanel( {
 		...settings,
 		background: {
 			...settings.background,
+			backgroundAttachment: false,
 			backgroundSize:
 				settings?.background?.backgroundSize &&
 				hasBackgroundSupport( name, 'backgroundSize' ),

diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -52,6 +52,14 @@ export default function BackgroundPanel() {
 			hasBackgroundImageValue( inheritedStyle ),
 	};
 
+	const updatedSettings = {
+		...settings,
+		background: {
+			...settings.background,
+			backgroundAttachment: true,
+		},
+	};
+
 	return (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
@@ -42,26 +42,32 @@ final class WP_Style_Engine {
 		 */
 		const BLOCK_STYLE_DEFINITIONS_METADATA = array(
 			'background' => array(
-				'backgroundImage'    => array(
+				'backgroundImage'      => array(
 					'property_keys' => array(
 						'default' => 'background-image',
 					),
 					'value_func'    => array( self::class, 'get_url_or_value_css_declaration' ),
 					'path'          => array( 'background', 'backgroundImage' ),
 				),
-				'backgroundPosition' => array(
+				'backgroundAttachment' => array(
+					'property_keys' => array(
+						'default' => 'background-attachment',
+					),
+					'path'          => array( 'background', 'backgroundAttachment' ),
+				),
+				'backgroundPosition'   => array(
 					'property_keys' => array(
 						'default' => 'background-position',
 					),
 					'path'          => array( 'background', 'backgroundPosition' ),
 				),
-				'backgroundRepeat'   => array(
+				'backgroundRepeat'     => array(
 					'property_keys' => array(
 						'default' => 'background-repeat',
 					),
 					'path'          => array( 'background', 'backgroundRepeat' ),
 				),
-				'backgroundSize'     => array(
+				'backgroundSize'       => array(
 					'property_keys' => array(
 						'default' => 'background-size',
 					),

diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts
@@ -62,6 +62,18 @@ const backgroundRepeat = {
 	},
 };
 
+const backgroundAttachment = {
+	name: 'backgroundAttachment',
+	generate: ( style: Style, options: StyleOptions ) => {
+		return generateRule(
+			style,
+			options,
+			[ 'background', 'backgroundAttachment' ],
+			'backgroundAttachment'
+		);
+	},
+};
+
 const backgroundSize = {
 	name: 'backgroundSize',
 	generate: ( style: Style, options: StyleOptions ) => {
@@ -76,6 +88,7 @@ const backgroundSize = {
 
 export default [
 	backgroundImage,
+	backgroundAttachment,
 	backgroundPosition,
 	backgroundRepeat,
 	backgroundSize,