Skip to content
This repository has been archived by the owner on Jan 15, 2019. It is now read-only.

Update editor alignment to match front end #22

Merged
merged 13 commits into from
Oct 22, 2018
Merged

Update editor alignment to match front end #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
edab5f7
Add additional editor stylesheet, plus page title styles.
kjellr Oct 16, 2018
d7edac1
Introduce left alignment of editor styles.
kjellr Oct 16, 2018
43f9a56
Merge branch 'master' into try/updating-editor-alignment
kjellr Oct 22, 2018
ddf3b94
Add clarifying file comment.
kjellr Oct 22, 2018
c223eb3
Correct the math behind alignfull image size + position
kjellr Oct 22, 2018
8709e23
Make alignright blocks extend off to the right.
kjellr Oct 22, 2018
da1810f
Use standard media query, adjust block appender margins.
kjellr Oct 22, 2018
c8f673c
Fix issue where cover image text overflowed the container.
kjellr Oct 22, 2018
98c70ca
Styling the default appender text
kjellr Oct 22, 2018
5aa7b49
Minor
kjellr Oct 22, 2018
1f4ca11
Add style-editor-frame.css to package.json
kjellr Oct 22, 2018
c74c1b3
Fix linting error.
kjellr Oct 22, 2018
9acb003
Swapping out CSS Grid with plain old max-width and margins.
kjellr Oct 22, 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
9 changes: 9 additions & 0 deletions functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,15 @@ function twentynineteen_scripts() {
}
add_action( 'wp_enqueue_scripts', 'twentynineteen_scripts' );

/**
* Enqueue supplemental block editor styles
*/
function twentynineteen_editor_frame_styles() {
wp_enqueue_style( 'twentynineteen-editor-frame-styles', get_theme_file_uri( '/style-editor-frame.css' ), false, '1.0', 'all' );
}

add_action( 'enqueue_block_editor_assets', 'twentynineteen_editor_frame_styles' );

/**
* SVG Icons class.
*/
Expand Down
17 changes: 9 additions & 8 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@
},
"rtlcssConfig": {
"options": {
"autoRename": false,
"autoRenameStrict": false,
"blacklist":{},
"clean": true,
"greedy": false,
"processUrls": false,
"stringMap":[]
"autoRename": false,
"autoRenameStrict": false,
"blacklist": {},
"clean": true,
"greedy": false,
"processUrls": false,
"stringMap": []
},
"plugins": [ ],
"plugins": [],
"map": false
},
"browserslist": [
Expand All @@ -34,6 +34,7 @@
"scripts": {
"build:style": "node-sass style.scss style.css --output-style expanded && postcss -r style.css",
"build:style-editor": "node-sass style-editor.scss style-editor.css --output-style expanded && postcss -r style-editor.css",
"build:style-editor-frame": "node-sass style-editor-frame.scss style-editor-frame.css --output-style expanded && postcss -r style-editor-frame.css",
"build:rtl": "rtlcss style.css style-rtl.css",
"build:print": "node-sass print.scss print.css --output-style expanded && postcss -r print.css",
"build": "run-p \"build:*\"",
Expand Down
60 changes: 60 additions & 0 deletions style-editor-frame.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/*!
Twenty Nineteen Editor Frame Styles

NOTE: This file customizes items that are out of the normal scope of style-editor.css due to the auto-prefixing functionality associated with add_editor_style(). When that file is able to edit the post title and a container similar to .edit-post-layout, these styles should be migrated into style-editor.css.
*/
/** === Includes === */
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
* layers of box-shadow to add the border visually, which will render the border smoother. */
/** === Title === */
body.gutenberg-editor-page .gutenberg .editor-post-title__block:before {
background: #767676;
content: "\020";
display: block;
height: 2px;
margin: 1rem 0;
width: 1em;
}

body.gutenberg-editor-page .gutenberg .editor-post-title__block:before {
width: 2.8125em;
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;
position: relative;
top: 0.5em;
}

body.gutenberg-editor-page .gutenberg .editor-post-title__block .editor-post-title__input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 2.8125em;
}

/** === Default Appender === */
body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-size: 22px;
}

/** === Off-Center Content === */
@media only screen and (min-width: 768px) {
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-writing-flow {
max-width: 80%;
margin: 0 10%;
}
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-post-title__block,
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-default-block-appender,
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block {
margin-left: 0;
margin-right: 0;
}
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="full"] {
width: calc( 125% + 88px + 28px);
position: relative;
left: calc( -12.5% - 46px - 14px);
}
body.gutenberg-editor-page .gutenberg .edit-post-layout .editor-block-list__block[data-align="right"] {
max-width: 125%;
}
}
67 changes: 67 additions & 0 deletions style-editor-frame.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/*!
Twenty Nineteen Editor Frame Styles

NOTE: This file customizes items that are out of the normal scope of style-editor.css due to the auto-prefixing functionality associated with add_editor_style(). When that file is able to edit the post title and a container similar to .edit-post-layout, these styles should be migrated into style-editor.css.
*/

/** === Includes === */

@import "sass/variables-site/variables-site";
@import "sass/variables-site/colors";
@import "sass/mixins/mixins-master";

/** === Title === */

body.gutenberg-editor-page .gutenberg .editor-post-title__block {
@include post-section-dash;

&:before {
width: $font__size-xxl;
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;
position: relative;
top: 0.5em;
}

.editor-post-title__input {
font-family: $font__heading;
font-size: $font__size-xxl;
}
}

/** === Default Appender === */

body.gutenberg-editor-page .gutenberg .editor-default-block-appender__content {
font-family: $font__body;
font-size: $font__size_base;
}

/** === Off-Center Content === */

body.gutenberg-editor-page .gutenberg .edit-post-layout {

@include media(tablet) {
.editor-writing-flow {
max-width: 80%;
margin: 0 10%;
}

.editor-post-title__block,
.editor-default-block-appender,
.editor-block-list__block {
margin-left: 0;
margin-right: 0;
}

.editor-block-list__block[data-align="full"] {
width: calc( 125% + 88px + 28px );
position: relative;
left: calc( -12.5% - 46px - 14px );
}

.editor-block-list__block[data-align="right"] {
max-width: 125%;
}
}
}
32 changes: 9 additions & 23 deletions style-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,24 +139,6 @@ figcaption {
font-size: 2.25em;
font-weight: bold;
line-height: 1.4;
width: calc(100vw - (2 * 1rem));
max-width: calc(100vw - (2 * 1rem));
}

@media only screen and (min-width: 768px) {
.wp-block-cover-image h2,
.wp-block-cover-image .wp-block-cover-image-text {
width: calc(8 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
}
}

@media only screen and (min-width: 1168px) {
.wp-block-cover-image h2,
.wp-block-cover-image .wp-block-cover-image-text {
width: calc(6 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
}

.wp-block-cover-image.has-left-content {
Expand Down Expand Up @@ -185,11 +167,15 @@ body[data-type="core/cover-image"][data-align="right"] .wp-block-cover-image-tex
max-width: 305px;
}

body[data-type="core/cover-image"][data-align="wide"] h2,
body[data-type="core/cover-image"][data-align="wide"] .wp-block-cover-image-text,
body[data-type="core/cover-image"][data-align="full"] h2,
body[data-type="core/cover-image"][data-align="full"] .wp-block-cover-image-text {
padding: 0;
@media only screen and (min-width: 1168px) {
body[data-type="core/cover-image"][data-align="wide"] h2,
body[data-type="core/cover-image"][data-align="wide"] .wp-block-cover-image-text,
body[data-type="core/cover-image"][data-align="full"] h2,
body[data-type="core/cover-image"][data-align="full"] .wp-block-cover-image-text {
padding: 0;
width: calc(6 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
}

/** === Gallery === */
Expand Down
23 changes: 7 additions & 16 deletions style-editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,19 +132,6 @@ figcaption {
font-size: $font__size-xl;
font-weight: bold;
line-height: 1.4;

width: calc(100vw - (2 * #{ $size__spacing-unit}));
max-width: calc(100vw - (2 * #{ $size__spacing-unit}));

@include media(tablet) {
width: calc(8 * (100vw / 12));
max-width: calc(8 * (100vw / 12));
}

@include media(desktop) {
width: calc(6 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
}

&.has-left-content {
Expand Down Expand Up @@ -179,9 +166,13 @@ body[data-type="core/cover-image"][data-align="right"] {
body[data-type="core/cover-image"][data-align="wide"],
body[data-type="core/cover-image"][data-align="full"] {

h2,
.wp-block-cover-image-text {
padding: 0;
@include media(desktop) {
h2,
.wp-block-cover-image-text {
padding: 0;
width: calc(6 * (100vw / 12));
max-width: calc(6 * (100vw / 12));
}
}
}

Expand Down