Prechádzať zdrojové kódy

FSE / Modern Business: Fix full width blocks in the header template part (#1245)

Adjust the `alignfull` blocks width and positioning when rendered in the header template part to be properly full-width.
Jacopo Tomasone 6 rokov pred
rodič
commit
e805bdf660

+ 4 - 0
modern-business/sass/site/header/_site-header.scss

@@ -34,6 +34,10 @@
 	}
 }
 
+.fse-enabled .site-header .wp-block-image.alignfull {
+	max-width: inherit;
+}
+
 // Site branding
 
 .site-branding {

+ 17 - 0
modern-business/style-editor.css

@@ -48,6 +48,10 @@ Modern Business Editor Styles
   margin-right: auto;
 }
 
+.fse-enabled .site-header .wp-block-image.alignfull {
+  max-width: inherit;
+}
+
 .site-branding {
   color: #686868;
   display: flex;
@@ -1912,10 +1916,23 @@ ul.wp-block-archives li ul,
   margin-right: auto;
 }
 
+/* Remove 100% width on figure to center align logo in editor on smaller screens */
 .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit figure.fse-site-logo {
   width: inherit;
 }
 
+.site-header .wp-block[data-align="full"] {
+  left: calc( -12.5% - 12px);
+  max-width: calc( 125% + 114px);
+  width: calc( 125% + 114px);
+}
+
+.template-block.site-header .wp-block[data-align="full"] {
+  left: calc( -12.5% - 9px);
+  max-width: calc( 125% + 111px);
+  width: calc( 125% + 111px);
+}
+
 /** === Classic Editor === */
 /* Properly center-align captions in the classic-editor block */
 .wp-caption dd {

+ 15 - 4
modern-business/style-editor.scss

@@ -944,13 +944,24 @@ ul.wp-block-archives,
 
 /* Remove 100% width on figure to center align logo in editor on smaller screens */
 .block-editor-block-list__layout  {
-    .block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit  {
-	    figure.fse-site-logo {
-	        width: inherit;
-        }
+	.block-editor-block-list__block[data-align="full"] > .block-editor-block-list__block-edit  {
+		figure.fse-site-logo {
+			width: inherit;
+		}
 	}
 }
 
+.site-header .wp-block[data-align="full"] {
+	left: calc( -12.5% - 12px );
+	max-width: calc( 125% + 114px );
+	width: calc( 125% + 114px );
+}
+.template-block.site-header .wp-block[data-align="full"] {
+	left: calc( -12.5% - 9px );
+	max-width: calc( 125% + 111px );
+	width: calc( 125% + 111px );
+}
+
 /** === Classic Editor === */
 
 /* Properly center-align captions in the classic-editor block */

+ 4 - 0
modern-business/style-rtl.css

@@ -1955,6 +1955,10 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
   margin-left: auto;
 }
 
+.fse-enabled .site-header .wp-block-image.alignfull {
+  max-width: inherit;
+}
+
 .site-branding {
   color: #686868;
   display: flex;

+ 4 - 0
modern-business/style.css

@@ -1961,6 +1961,10 @@ footer .wp-block-a8c-navigation-menu .sub-menu {
   margin-right: auto;
 }
 
+.fse-enabled .site-header .wp-block-image.alignfull {
+  max-width: inherit;
+}
+
 .site-branding {
   color: #686868;
   display: flex;