Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move "opinionated" Gutenberg block styles to theme.scss #7624

Merged
merged 2 commits into from
Jul 6, 2018
Merged

Move "opinionated" Gutenberg block styles to theme.scss #7624

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55dda57
Move opinionated styles to separate opt-in theme.scss files
Jun 29, 2018
4e5d4b3
Add newline at end of file.
jasmussen Jul 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions core-blocks/code/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import './editor.scss';
import './theme.scss';
import { PlainText } from '@wordpress/editor';

export default function CodeEdit( { attributes, setAttributes, className } ) {
Expand Down
8 changes: 8 additions & 0 deletions core-blocks/code/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.wp-block-code {
font-family: $editor-html-font;
font-size: $text-editor-font-size;
color: $dark-gray-800;
padding: .8em 1.6em;
border: 1px solid $light-gray-500;
border-radius: 4px;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Next person to edit this file, if they're using the provided EditorConfig, will introduce a trailing new line to the file.

I'd suggest installing a plugin for your editor so we can be consistent on this:

https://editorconfig.org/#download

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

┻━┻ ︵ヽ(`Д´)ﾉ︵ ┻━┻

I have ESlint installed, and it's not giving me any errors:

screen shot 2018-07-06 at 15 25 12

screen shot 2018-07-06 at 15 25 17

My apologies, and I have added the newline, and now I will not relent unless I get VSCode to behave. This is embarrasing!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Different tool than ESLint 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Found it. Turns out that's a VSCode setting that defaults to off, which confused me because I switched from Atom where it defaults to on:

screen shot 2018-07-06 at 15 27 41

I've now fixed this, and made a backup of my user config. Sorry about that.

1 change: 1 addition & 0 deletions core-blocks/embed/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import apiRequest from '@wordpress/api-request';
*/
import './style.scss';
import './editor.scss';
import './theme.scss';

// These embeds do not work in sandboxes
const HOSTS_NO_PREVIEWS = [ 'facebook.com' ];
Expand Down
7 changes: 0 additions & 7 deletions core-blocks/embed/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
.wp-block-embed figcaption {
margin-top: 0.5em;
color: $dark-gray-300;
text-align: center;
font-size: $default-font-size;
}

// Apply max-width to floated items that have no intrinsic width
.editor-block-list__block[data-type="core/embed"][data-align="left"] .editor-block-list__block-edit,
.editor-block-list__block[data-type="core/embed"][data-align="right"] .editor-block-list__block-edit,
Expand Down
3 changes: 3 additions & 0 deletions core-blocks/embed/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.wp-block-embed figcaption {
@include caption-style();
}
10 changes: 5 additions & 5 deletions core-blocks/gallery/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,16 @@
}

figcaption {
position: absolute;
width: 100%;
max-height: 100%;
overflow: auto;
padding: 40px 10px 5px;
color: $white;
text-align: center;
font-size: $default-font-size;
background: linear-gradient( 0deg, rgba( $color: $black, $alpha: 0.7 ) 0, rgba($color: $black, $alpha: 0.3) 60%, transparent );
position: absolute;
width: 100%;
max-height: 100%;
overflow: auto;


img {
display: inline;
}
Expand Down
1 change: 1 addition & 0 deletions core-blocks/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { createBlobURL } from '@wordpress/blob';
* Internal dependencies
*/
import './style.scss';
import './theme.scss';
import edit from './edit';

export const name = 'core/image';
Expand Down
7 changes: 0 additions & 7 deletions core-blocks/image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
.wp-block-image {
width: fit-content;

figcaption {
margin-top: 0.5em;
color: $dark-gray-300;
text-align: center;
font-size: $default-font-size;
}

&.aligncenter {
display: block;
margin-left: auto;
Expand Down
5 changes: 5 additions & 0 deletions core-blocks/image/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.wp-block-image {
figcaption {
@include caption-style();
}
}
3 changes: 0 additions & 3 deletions core-blocks/preformatted/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
.wp-block-preformatted {
pre {
white-space: pre-wrap;
font-family: $editor-html-font;
font-size: $text-editor-font-size;
color: $dark-gray-800;
}
}
1 change: 1 addition & 0 deletions core-blocks/preformatted/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { RichText } from '@wordpress/editor';
* Internal dependencies
*/
import './editor.scss';
import './theme.scss';

export const name = 'core/preformatted';

Expand Down
7 changes: 7 additions & 0 deletions core-blocks/preformatted/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.wp-block-preformatted {
pre {
font-family: $editor-html-font;
font-size: $text-editor-font-size;
color: $dark-gray-800;
}
}
1 change: 1 addition & 0 deletions core-blocks/pullquote/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
*/
import './editor.scss';
import './style.scss';
import './theme.scss';

const toRichTextValue = ( value ) => map( value, ( ( subValue ) => subValue.children ) );
const fromRichTextValue = ( value ) => map( value, ( subValue ) => ( {
Expand Down
6 changes: 0 additions & 6 deletions core-blocks/pullquote/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
.wp-block-pullquote {
border-top: 4px solid $dark-gray-500;
border-bottom: 4px solid $dark-gray-500;
color: $dark-gray-600;
padding: 3em 0;
text-align: center;

Expand All @@ -21,9 +18,6 @@

cite,
footer {
color: $dark-gray-600;
position: relative;
text-transform: uppercase;
font-size: $default-font-size;
}
}
12 changes: 12 additions & 0 deletions core-blocks/pullquote/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.wp-block-pullquote {
border-top: 4px solid $dark-gray-500;
border-bottom: 4px solid $dark-gray-500;
color: $dark-gray-600;

cite,
footer {
color: $dark-gray-600;
text-transform: uppercase;
font-size: $default-font-size;
}
}
12 changes: 3 additions & 9 deletions core-blocks/quote/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
.wp-block-quote {
cite,
footer {
margin-top: 1em;
position: relative;
font-style: normal;
}

&.is-style-large, &.is-large {
&.is-style-large,
&.is-large {
margin: 0 0 16px;
padding: 0 1em;

Expand All @@ -18,7 +12,7 @@

cite,
footer {
font-size: 19px;
font-size: 18px;
text-align: right;
}
}
Expand Down
7 changes: 3 additions & 4 deletions core-blocks/quote/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@
footer {
color: $dark-gray-300;
font-size: $default-font-size;
}

p {
margin-bottom: 16px;
margin-top: 1em;
position: relative;
font-style: normal;
}
}

Expand Down
1 change: 1 addition & 0 deletions core-blocks/table/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import {
*/
import './editor.scss';
import './style.scss';
import './theme.scss';
import TableBlock from './table-block';

const tableContentSchema = {
Expand Down
17 changes: 0 additions & 17 deletions core-blocks/table/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,4 @@
.wp-block-table {
overflow-x: auto;
display: block;
border-collapse: collapse;
width: 100%;

tbody {
width: 100%;
display: table;
min-width: $break-mobile / 2;
}

td,
th {
padding: 0.5em;
border: 1px solid currentColor;
}

// Fixed layout toggle
&.has-fixed-layout tbody {
table-layout: fixed;
Expand Down
18 changes: 18 additions & 0 deletions core-blocks/table/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.wp-block-table {
overflow-x: auto;
display: block;
border-collapse: collapse;
width: 100%;

tbody {
width: 100%;
display: table;
min-width: $break-mobile / 2;
}

td,
th {
padding: 0.5em;
border: 1px solid currentColor;
}
}
1 change: 1 addition & 0 deletions core-blocks/video/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { RichText } from '@wordpress/editor';
* Internal dependencies
*/
import './style.scss';
import './theme.scss';
import edit from './edit';

export const name = 'core/video';
Expand Down
9 changes: 0 additions & 9 deletions core-blocks/video/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,4 @@
.wp-block-video {
margin: 0;

figcaption {
margin-top: 0.5em;
color: $dark-gray-300;
text-align: center;
font-size: $default-font-size;
}

&.aligncenter {
text-align: center;
}
Expand Down
5 changes: 5 additions & 0 deletions core-blocks/video/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.wp-block-video {
figcaption {
@include caption-style();
}
}
12 changes: 12 additions & 0 deletions edit-post/assets/stylesheets/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,3 +278,15 @@
right: $sidebar-width;
}
}


/**
* Styles that are reused verbatim in a few places
*/

@mixin caption-style() {
margin-top: 0.5em;
color: $dark-gray-300;
text-align: center;
font-size: $default-font-size;
}