Pixel: update block styles (#6510)

* update block styles

* update site-logo alignment

* Comment pixel-header class.

* Fix comment.;

Co-authored-by: Jeff Ong <jonger4@gmail.com>
This commit is contained in:
Madhu Dollu 2022-09-08 20:08:52 +05:30 committed by GitHub
parent 1e7f9894a4
commit abacc8a768
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 6 deletions

View file

@ -1,13 +1,15 @@
<!-- wp:group {"layout":{"inherit":"true","type":"constrained"},"style":{"spacing":{"blockGap":"0","padding":{"top":"0","right":"calc(2 * var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002douter))","bottom":"0","left":"calc(2 * var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002douter))"}}}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:calc(2 * var(--wp--custom--spacing--outer));padding-bottom:0;padding-left:calc(2 * var(--wp--custom--spacing--outer))"><!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"},"align":"full","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30","top":"var:preset|spacing|30","right":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"0"},"border":{"width":"2px"}},"className":"pixel-shadow"} -->
<div class="wp-block-group alignfull pixel-shadow" style="border-width:2px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"layout":{"type":"flex"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|20","bottom":"0","left":"var:preset|spacing|20"}}}} -->
<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)">
<div class="wp-block-group" style="padding-top:0;padding-right:calc(2 * var(--wp--custom--spacing--outer));padding-bottom:0;padding-left:calc(2 * var(--wp--custom--spacing--outer))"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"top"},"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|40"}}} -->
<div class="wp-block-group alignfull"><!-- wp:site-logo {"width":44,"className":"pixel-shadow","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} /-->
<!-- wp:site-title /--></div>
<!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"},"align":"full","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30","top":"var:preset|spacing|30","right":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"0"},"border":{"width":"2px"}},"className":"pixel-shadow pixel-header"} -->
<div class="wp-block-group alignfull pixel-shadow pixel-header" style="border-width:2px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"layout":{"type":"flex"},"style":{"spacing":{"padding":{"right":"var:preset|spacing|20","bottom":"0","left":"var:preset|spacing|20"}}}} -->
<div class="wp-block-group" style="padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)"><!-- wp:site-title /--></div>
<!-- /wp:group -->
<!-- wp:navigation {"__unstableLocation":"primary","overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"}}}} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:spacer {"height":100} -->

View file

@ -67,3 +67,8 @@ a:where(:not(.wp-element-button)) {
font-weight: 300;
line-height: 1.6;
}
/* Necessary so the header containing the navigation fills the entire remaining horizontal space, since it is positioned in a flex group with the site logo. */
.pixel-header {
flex-grow: 1;
}

View file

@ -200,11 +200,11 @@
"blocks": {
"core/code": {
"border": {
"color": "#CCCCCC",
"radius": "0px",
"color": "var(--wp--preset--color--primary)",
"style": "solid",
"width": "2px"
},
"shadow": "var(--wp--custom--shadow)",
"spacing": {
"padding": {
"bottom": "var(--wp--custom--gap--vertical)",
@ -424,6 +424,14 @@
"text": "var(--wp--preset--color--foreground)"
}
},
"core/site-logo": {
"border": {
"color": "var(--wp--preset--color--primary)",
"radius": "0",
"style": "solid",
"width": "2px"
}
},
"core/site-tagline": {
"typography": {
"fontSize": "0.825rem"