Skip to content

Commit

Permalink
Theme: Refine padding and margins.
Browse files Browse the repository at this point in the history 
See #6
  • Loading branch information
@iandunn
iandunn committed Sep 29, 2021
1 parent 5f52207 commit fa25d31
Show file tree
Hide file tree
Showing 14 changed files with 91 additions and 44 deletions.
5 changes: 0 additions & 5 deletions bs-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,6 @@ module.exports = {
paths.globalHeaderFooter + watchedFilesPattern
],

"ignore": [
paths.theme + '/sass/**/*.*',
paths.globalHeaderFooter + '/postcss/**/*.*'
],

"open": false,
"reloadOnRestart": true,
"notify": false,
Expand Down
5 changes: 3 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "wporg-news-2021-project",
"version": "1.0.0",
"description": "",
"description": "The codebase and development environment for w.org/news.",
"author": "WordPress.org",
"license": "GPL-2.0-or-later",
"private": true,
Expand All @@ -24,6 +24,7 @@
"sync": "browser-sync start --config bs-config.js"
},
"workspaces": [
"source/wp-content/themes/wporg-news-2021"
"source/wp-content/themes/wporg-news-2021",
"source/wp-content/mu-plugins/wporg-mu-plugins"
]
}
1 change: 1 addition & 0 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,4 @@ These must be run in the project's root folder, _not_ in theme/plugin subfolders

* Build all assets once: `yarn workspaces run build`
* Rebuild all assets on change: `yarn workspaces run start`
* Reload browser when files change: `npm run sync`
5 changes: 3 additions & 2 deletions source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
<hr class="wp-block-separator alignfull has-text-color has-background has-light-grey-background-color has-light-grey-color is-style-wide"/>
<!-- /wp:separator -->

<!-- wp:group {"tagName":"nav","align":"wide","className":"post-navigation"} -->
<nav class="wp-block-group alignwide post-navigation">
<!-- wp:group {"tagName":"nav","align":"full","className":"post-navigation"} -->
<nav class="wp-block-group alignfull post-navigation">
<!-- wp:group {"className":"post-navigation-previous"} -->
<div class="wp-block-group post-navigation-previous">
<!-- wp:post-navigation-link {"type":"previous","showTitle":true,"label":"Previous"} /-->
</div>
<!-- /wp:group -->

<!-- wp:group {"className":"post-navigation-next"} -->
<div class="wp-block-group post-navigation-next">
<!-- wp:post-navigation-link {"type":"next","showTitle":true,"label":"Next"} /-->
Expand Down
4 changes: 2 additions & 2 deletions source/wp-content/themes/wporg-news-2021/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "wporg-news-2021",
"name": "wporg-news-2021-theme",
"version": "1.0.0",
"description": "",
"description": "A Full Site Editing theme for w.org/news, with a jazz-inspired design.",
"author": "WordPress.org",
"license": "GPL-2.0-or-later",
"private": true,
Expand Down
32 changes: 25 additions & 7 deletions source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
//FRONTEND
.wp-site-blocks { // top level of the view
//In this situation we want to introduce a standardized gap between content and the edge of the screen.
padding-left: var(--wp--custom--post-content--padding--left);
.site-content-container {

This comment has been minimized.

Sign in to view

Copy link
@coreymckrill

coreymckrill Sep 29, 2021

Contributor

Huh, I didn't notice this before, but this breaks the layout of the content column. @iandunn does this affect things in the global header/footer also? I wonder if we could just take it out entirely...

This comment has been minimized.

Sign in to view

Copy link
@iandunn

iandunn Sep 30, 2021

Author Member

IIRC I reduced the scope b/c it seemed like all of this was only relevant to post content, and it was messing up the header/footer stuff.

I'll play around w/ it tomorrow and see what impact it'd have remove this, or if it'd be better to add something to fix the content column layout.

LMK if you have any thoughts, or context for this. Is it all generic stuff from Blockbase, or did you tweak some of it for News?

This comment has been minimized.

Sign in to view

Copy link
@iandunn

iandunn Sep 30, 2021

Author Member

er, not sure if GH sends email notifs for replies to commit comments, so here's an explicit mention @coreymckrill

This comment has been minimized.

Sign in to view

Copy link
@coreymckrill

coreymckrill Sep 30, 2021

Contributor

(I did get a notif for the reply)

I think this is all generic stuff from Blockbase. I tried removing lines 1-54 in this file and it fixed the content layout, but didn't seem to affect anything else.

This comment has been minimized.

Sign in to view

Copy link
@iandunn

iandunn Sep 30, 2021

Author Member

Huh, I am seeing some negative changes when I remove some (but not all) of those lines. I'll dig deeper and open a PR

This comment has been minimized.

Sign in to view

Copy link
@iandunn

iandunn Sep 30, 2021

Author Member

moved to #37
// In this situation we want to introduce a standardized gap between content and the edge of the screen.
padding-top: var(--wp--custom--post-content--padding--top);
padding-right: var(--wp--custom--post-content--padding--right);
padding-bottom: var(--wp--custom--post-content--padding--bottom);
padding-left: var(--wp--custom--post-content--padding--left);

.alignfull {
// these elements we want to "bust out" of the gap created above
// These elements we want to "bust out" of the gap created above
margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
width: unset;
// however any containers that "bust out" should re-apply that gap but this time using padding instead of margins.

// However any containers that "bust out" should re-apply that gap but this time using padding instead of margins.
&.wp-block-template-part,
&.wp-block-columns,
&.wp-block-group {
Expand All @@ -18,12 +22,26 @@
}
}

@include break-tablet {
.site-content-container {
padding-top: var(--wp--custom--post-content--breakpoint--tablet--padding--top);
padding-right: var(--wp--custom--post-content--breakpoint--tablet--padding--right);
padding-bottom: var(--wp--custom--post-content--breakpoint--tablet--padding--bottom);
padding-left: var(--wp--custom--post-content--breakpoint--tablet--padding--left);

.alignfull {
margin-left: calc(-1 * var(--wp--custom--post-content--breakpoint--tablet--padding--left)) !important;
margin-right: calc(-1 * var(--wp--custom--post-content--breakpoint--tablet--padding--right)) !important;
}
}
}

// EDITOR (NOTE: It PROBABLY would be OK to bring these together to "simplify" the stylesheet. However the selectors are quite different
// and it's a lot easier to understand and ensure intent separated in this way.
.is-root-container { //top level of the editor
.is-root-container { // Top level of the editor.
padding-left: var(--wp--custom--post-content--padding--left);
padding-right: var(--wp--custom--post-content--padding--right);
.wp-block[data-align="full"] { //blocks configured to be "align full" in "editorspeak"
.wp-block[data-align="full"] { // Blocks configured to be "align full" in "editorspeak".
margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
width: unset;
Expand Down
7 changes: 7 additions & 0 deletions source/wp-content/themes/wporg-news-2021/sass/base/_breakpoints.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,10 @@
@content;
}
}

// Custom breakpoints should be synced with `global-header-footer` in `wporg-mu-plugins`.
@mixin break-tablet() {
@media (min-width: 876px) {
@content;
}
}
18 changes: 0 additions & 18 deletions source/wp-content/themes/wporg-news-2021/sass/base/_header.scss
View file

This file was deleted.

6 changes: 6 additions & 0 deletions source/wp-content/themes/wporg-news-2021/sass/base/_headings.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

h1, h2, h3, h4, h5, h6 {
&.has-background {
padding: var(--wp--custom--padding--vertical) var(--wp--custom--padding--horizontal);
}
}
8 changes: 5 additions & 3 deletions source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@
min-height: 100vh;
display: flex;
flex-direction: column;
}

.site-footer-container {
margin-top: auto;
/*
* Make sure the footer is always at the bottom of the viewport, even on pages with little content.
* Otherwise there'd be empty space below the footer
*/
justify-content: space-between;
}

body.admin-bar {
Expand Down
2 changes: 1 addition & 1 deletion source/wp-content/themes/wporg-news-2021/sass/base/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@import "breakpoints";

@import "alignment";
@import "header";
@import "headings";
@import "layout";
@import "text";
@import "utility";
2 changes: 0 additions & 2 deletions source/wp-content/themes/wporg-news-2021/sass/blocks/_paragraph.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
p {


// Override `color: inherit` from Core styles.
&.has-text-color a {
color: var( --wp--style--color--link, var(--wp--custom--color--primary) );
Expand Down
20 changes: 20 additions & 0 deletions source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,23 @@
[class*="wp-container-"] > .post-navigation {
padding-top: 0;
padding-right: var(--wp--custom--post-content--padding--right);
padding-bottom: 19px;
padding-left: var(--wp--custom--post-content--padding--left);

& * {
margin-top: 0;
}
}

@include break-tablet {
[class*="wp-container-"] > .post-navigation {
padding-top: 0;
padding-right: 88px;
padding-bottom: 26px;
padding-left: var(--wp--custom--post-content--breakpoint--tablet--padding--left);
}
}

.post-navigation {
display: flex;
justify-content: space-between;
Expand Down
20 changes: 18 additions & 2 deletions source/wp-content/themes/wporg-news-2021/theme.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"//README": "Comments should be added to document important things. Use the `//{property}` format. See https://github.com/WordPress/gutenberg/issues/35099.",
"$schema": "https://json.schemastore.org/theme-v1.json",
"version": 1,
"settings": {
"border": {
Expand Down Expand Up @@ -338,8 +340,20 @@
},
"post-content": {
"padding": {
"left": "20px",
"right": "20px"
"top": "32px",
"bottom": "70px",
"left": "var(--wp--style--block-gap)",
"right": "var(--wp--style--block-gap)"
},
"breakpoint": {
"tablet": {
"padding": {
"top": "80px",
"bottom": "80px",
"left": "80px",
"right": "180px"
}
}
}
},
"pullquote": {
Expand Down Expand Up @@ -395,6 +409,8 @@
"wideSize": "var(--wp--custom--layout--wide-size)"
},
"spacing": {
"//blockGap": "The design calls for a 24px gap. Coincidentally, that's the default value that Gutenberg defines. The default could change in the future, though, so this should be explicitly set.",
"blockGap": "24px",
"customPadding": true,
"units": [
"%",
Expand Down

0 comments on commit fa25d31

Please sign in to comment.