Browse Source

Archeo: Try new root padding alignments (#6312)

* Archeo: Try new root padding alignments

* remove padding on home page blocks
Ben Dwyer 3 years ago
parent
commit
9d0b852541

+ 2 - 2
archeo/patterns/layered-images-with-headline.php

@@ -6,8 +6,8 @@
  */
 ?>
 
-<!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/palais-du-cirque.jpg","dimRatio":80,"overlayColor":"background","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"min(4vw, 90px)","bottom":"0vw","left":"min(4vw, 90px)"},"margin":{"top":"0px"}}}} -->
-<div class="wp-block-cover alignfull is-light" style="padding-top:0px;padding-right:min(4vw, 90px);padding-bottom:0vw;padding-left:min(4vw, 90px);margin-top:0px;min-height:100vh"><span aria-hidden="true" class="has-background-background-color has-background-dim-80 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="<?php esc_attr_e( 'Photo of Palace of the Circus', 'archeo' ); ?>" src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/palais-du-cirque.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
+<!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/palais-du-cirque.jpg","dimRatio":80,"overlayColor":"background","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","bottom":"0vw"},"margin":{"top":"0px"}}}} -->
+<div class="wp-block-cover alignfull is-light" style="padding-top:0px;padding-bottom:0vw;margin-top:0px;min-height:100vh"><span aria-hidden="true" class="has-background-background-color has-background-dim-80 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="<?php esc_attr_e( 'Photo of Palace of the Circus', 'archeo' ); ?>" src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/palais-du-cirque.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container">
 	<!-- wp:group {"layout":{"inherit":"true"}} -->
 	<div class="wp-block-group">
 		<!-- wp:columns {"verticalAlignment":"top","align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0"}}}} -->

+ 2 - 2
archeo/patterns/simple-list-of-posts-with-background.php

@@ -10,8 +10,8 @@
 <!-- wp:group {"layout":{"inherit":"true"},"align":"full","style":{"spacing":{"padding":{"top":"var(--wp--custom--spacing--medium)","bottom":"var(--wp--custom--spacing--medium)"},"margin":{"top":"0px"}},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background"} -->
 <div class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--medium);padding-bottom:var(--wp--custom--spacing--medium);margin-top:0px">
 
-	<!-- wp:group {"align":"wide"} -->
-	<div class="wp-block-group alignwide">
+	<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"left":"0px","right":"0px"}}}} -->
+	<div class="wp-block-group alignwide" style="padding-left:0px;padding-right:0px;">
 		<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"bottom":"40px"}}},"fontSize":"medium"} -->
 		<h3 class="has-medium-font-size" style="margin-bottom:40px"><?php _e( 'Selected Writings', 'archeo' ); ?></h3>
 		<!-- /wp:heading -->

+ 1 - 53
archeo/style.css

@@ -81,7 +81,7 @@ a:active,
  * Outline block button needs a padding tweak so it's the same size of normal buttons
  * https://github.com/WordPress/gutenberg/issues/27476
  */
-.is-style-outline > :where(.wp-block-button__link), 
+.is-style-outline > :where(.wp-block-button__link),
 :where(.wp-block-button__link).is-style-outline {
 	padding-top: 0.667em;
 	padding-bottom: 0.667em;
@@ -99,58 +99,6 @@ a:active,
 	color: var(--wp--preset--color--background);
 }
 
-/*
- * Alignment styles, borrowed from Twenty Twenty-Two.
- * These rules are temporary, and should not be relied on or
- * modified too heavily by themes or plugins that build on
- * Twenty Twenty-Two. These are meant to be a precursor to
- * a global solution provided by the Block Editor.
- *
- * Relevant issues:
- * https://github.com/WordPress/gutenberg/issues/35607
- * https://github.com/WordPress/gutenberg/issues/35884
- */
-
-.wp-site-blocks,
-body > .is-root-container,
-.edit-post-visual-editor__post-title-wrapper,
-.wp-block-group.alignfull,
-.wp-block-group.has-background,
-.wp-block-columns.alignfull.has-background,
-.wp-block-cover.alignfull,
-.is-root-container .wp-block[data-align='full'] > .wp-block-group,
-.is-root-container .wp-block[data-align='full'] > .wp-block-columns.has-background,
-.is-root-container .wp-block[data-align='full'] > .wp-block-cover {
-	padding-left: var(--wp--custom--spacing--outer);
-	padding-right: var(--wp--custom--spacing--outer);
-}
-
-.wp-site-blocks .alignfull,
-.wp-site-blocks > .wp-block-group.has-background,
-.wp-site-blocks > .wp-block-cover,
-.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
-.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
-body > .is-root-container > .wp-block-cover,
-body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
-body > .is-root-container > .wp-block-template-part > .wp-block-cover,
-.is-root-container .wp-block[data-align='full'] {
-	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
-	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
-	max-width: unset;
-	width: unset;
-}
-
-/* Blocks inside columns don't have negative margins. */
-.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
-.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
-/* We also want to avoid stacking negative margins. */
-.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
-.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
-	margin-left: auto !important;
-	margin-right: auto !important;
-	width: inherit;
-}
-
 /*
  * Responsive menu container padding.
  * This ensures the responsive container inherits the same

+ 9 - 2
archeo/theme.json

@@ -161,7 +161,8 @@
 					"slug": "huge"
 				}
 			]
-		}
+		},
+		"useRootPaddingAwareAlignments": true
 	},
 	"styles": {
 		"blocks": {
@@ -313,7 +314,13 @@
 			}
 		},
 		"spacing": {
-			"blockGap": "1.25rem"
+			"blockGap": "1.25rem",
+			"padding": {
+				"top": "0px",
+				"right": "var(--wp--custom--spacing--outer)",
+				"bottom": "0px",
+				"left": "var(--wp--custom--spacing--outer)"
+			}
 		},
 		"typography": {
 			"fontFamily": "var(--wp--preset--font-family--chivo)",