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.

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

Polish block UI, inspector, add contributors, fix quote styles #2001

Merged
merged 13 commits into from
Jul 27, 2017
Merged
10 changes: 10 additions & 0 deletions CONTRIBUTORS.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,3 +70,13 @@ This list is manually curated to include valuable contributions by volunteers th
| @shaunandrews | |
| @hugobaeta | |
| @mizejewski | |
| @buzztone | |
| @mathetos | |
| @GaryJones | |
| @jasonagnew | |
| @brickbones | |
| @iamgabrielma | |
| @swissspidy | |
| @dixitadusara | |
| @ameeker | |
| @StaggerLeee | |
8 changes: 8 additions & 0 deletions blocks/editable/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@
min-height: $editor-font-size * $editor-line-height;
}

> p:first-child {
margin-top: 0;
}

&.mce-content-body > p { // needs specificity
line-height: inherit;
}

&:focus {
outline: none;
}
Expand Down
4 changes: 4 additions & 0 deletions blocks/library/gallery/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,7 @@
.blocks-gallery__placeholder-instructions {
margin: 1.8em 0;
}

.editor-visual-editor__block[data-type="core/gallery"] .editor-visual-editor__block-edit {
overflow: hidden;
}
2 changes: 1 addition & 1 deletion editor/assets/stylesheets/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ $z-layers: (
'.editor-inserter__tabs': 1,
'.editor-inserter__tab.is-active': 1,
'.components-panel__header': 1,
'.editor-block-mover': 10,
'.editor-header': 20,
'.editor-post-visibility__dialog': 30,
'.editor-post-schedule__dialog': 30,
'.editor-block-mover': 30,

// Show drop zone above most standard content, but below any overlays
'.components-drop-zone': 100,
Expand Down
9 changes: 7 additions & 2 deletions editor/block-mover/style.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
.editor-block-mover {
position: absolute;
top: 10px;
top: 0;
left: 0;
padding: 0 14px 20px 0; // handles hover area
height: $text-editor-font-size * 4; // same height as an empty paragraph
padding: 6px 14px 6px 0; // handles hover area
z-index: z-index( '.editor-block-mover' );

// Mobile, to be revisited
Expand Down Expand Up @@ -34,4 +35,8 @@
.dashicon {
display: block;
}

&:first-child {
margin-bottom: 4px;
}
}
11 changes: 8 additions & 3 deletions editor/block-settings-menu/style.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
.editor-block-settings-menu {
position: absolute;
top: 10px;
top: 0;
right: 0;
height: $text-editor-font-size * 4; // same height as an empty paragraph
padding: 6px 0 6px 14px; // handles hover area

// Mobile, to be revisited
// Mobile
display: none;

@include break-small {
Expand All @@ -22,7 +24,6 @@
width: 20px;
height: 20px;
border-radius: 50%;
margin-bottom: 8px;

&[aria-disabled="true"] {
cursor: default;
Expand All @@ -33,4 +34,8 @@
.dashicon {
display: block;
}

&:first-child {
margin-bottom: 4px;
}
}
19 changes: 10 additions & 9 deletions editor/modes/visual-editor/block-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -249,15 +249,16 @@ class VisualEditorBlockList extends Component {
);
} ) }
{ ! blocks.length &&
<input
type="text"
readOnly
className="editor-visual-editor__placeholder"
value={ __( 'Write your story' ) }
onFocus={ this.appendDefaultBlock }
onClick={ noop }
onKeyDown={ noop }
/>
<div className="editor-visual-editor__placeholder">
<input
type="text"
readOnly
value={ __( 'Write your story' ) }
onFocus={ this.appendDefaultBlock }
onClick={ noop }
onKeyDown={ noop }
/>
</div>
}
<div
className={ continueWritingClassname }
Expand Down
96 changes: 71 additions & 25 deletions editor/modes/visual-editor/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -246,21 +246,41 @@
display: none;
}

.editor-block-settings-menu {
top: -24px;
right: 10px;
@include break-wide() {
.editor-block-mover {
display: block;
}

.editor-block-mover {
top: -30px;
left: 10px;
height: auto;
}

.editor-block-mover__control {
float: left;
margin-right: 8px;
}
}

.editor-block-settings-menu__control {
float: left;
margin-right: 8px;
}

.editor-block-settings-menu {
top: -30px;
right: 10px;
height: auto;
}
}

&[data-align="full"],
&[data-align="wide"] {
.editor-visual-editor__block-controls {
width: $visual-editor-max-width - $block-padding - $block-padding;
@include break-small() {
width: $visual-editor-max-width - $block-padding - $block-padding;
}
margin-left: auto;
margin-right: auto;
}
Expand Down Expand Up @@ -349,38 +369,60 @@ $sticky-bottom-offset: 20px;
}
}

.editor-visual-editor__placeholder[type=text] {
.editor-visual-editor__placeholder {
max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
padding: 0;
clear: left;
margin: 2px auto;
max-width: $visual-editor-max-width;
margin: 0 auto;
position: relative;
padding: $block-padding;
outline: 1px solid transparent;
border: none;
background: none;
box-shadow: none;
display: block;
transition: 0.2s outline;
text-align: left;
width: 100%;
color: $dark-gray-300;
font-size: $editor-font-size;
line-height: $editor-line-height;
cursor: text;
left: -1px;

&:hover {
outline: 1px solid $light-gray-500;

@include break-small() {
padding: 0 ( $block-padding + $block-mover-padding-visible );
}

input[type=text] {
height: $text-editor-font-size * 4; // same height as an empty paragraph
margin-top: 0px;
margin-bottom: 5px;
outline: 1px solid transparent;
border: none;
background: none;
box-shadow: none;
display: block;
transition: 0.2s outline;
text-align: left;
width: 100%;
color: $dark-gray-300;
font-size: $editor-font-size;
line-height: $editor-line-height;
cursor: text;
left: -1px;

&:hover {
outline: 1px solid $light-gray-500;
}

padding: ( $block-padding - 2px ) $block-padding;

@include break-small() {
margin-left: -$block-padding;
margin-right: -$block-padding;
}
}
}

.editor-visual-editor__continue-writing {
display: flex;
align-items: baseline;
max-width: $visual-editor-max-width;
max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
margin: 0 auto;
clear: both;

padding: 0;
@include break-small() {
padding: 0 ( $block-mover-padding-visible );
}

> .editor-inserter__block {
opacity: 0;
transition: opacity 150ms;
Expand All @@ -389,6 +431,10 @@ $sticky-bottom-offset: 20px;
font-family: $default-font;
font-size: $default-font-size;
box-shadow: none;

&:active {
background: none;
}
}

&:hover > .editor-inserter__block,
Expand Down
11 changes: 8 additions & 3 deletions editor/post-permalink/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,20 @@
display: inline-flex;
align-items: center;
position: absolute;
top: -36px;
left: $block-padding;
right: $block-padding;
top: -34px;
box-shadow: $shadow-popover;
border: 1px solid $light-gray-500;
background: $white;
padding: 5px;
font-family: $default-font;
font-size: $default-font-size;
left: 0;
right: 0;

@include break-small() {
left: $block-padding + $block-mover-padding-visible - 2px;
right: $block-padding + $block-mover-padding-visible - 2px;
}
}

.editor-post-permalink__label {
Expand Down
19 changes: 12 additions & 7 deletions editor/post-title/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,25 @@
margin-left: auto;
margin-right: auto;
position: relative;
margin-bottom: 10px;
max-width: $visual-editor-max-width - ( 2 * $block-mover-margin );
max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
padding: 5px 0;

@include break-small {
max-width: $visual-editor-max-width;
@include break-small() {
padding: 5px ( $block-padding + $block-mover-padding-visible );
}

h1 {
outline: 1px solid transparent;
margin: 0;
padding: #{ $block-padding / 2 } #{ $block-padding - 2px };
font-size: $editor-font-size;
transition: 0.2s outline;
margin-top: 0;
margin-bottom: 0;
padding: $block-padding;

@include break-small() {
margin-left: -$block-padding;
margin-right: -$block-padding;
}
}

&:hover h1 {
Expand All @@ -38,7 +44,6 @@
}

@include break-large() {
max-width: $text-editor-max-width;
margin: 0 auto;
padding: 0;
}
Expand Down
4 changes: 3 additions & 1 deletion editor/sidebar/block-inspector/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
.editor-block-inspector__no-blocks {
display: block;
font-size: $default-font-size;
margin: 32px 16px;
background: $white;
padding: ( $panel-padding * 2 ) $panel-padding;
border-bottom: 1px solid $light-gray-500;
text-align: center;
}
12 changes: 4 additions & 8 deletions editor/sidebar/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,14 @@
overflow: auto;
height: 100%;
padding-top: $sidebar-panel-header-height;
margin-top: -1px;
margin-bottom: -1px;

@include break-small() {
overflow: inherit;
height: auto;
padding-top: 0;
}

&:first-child {
margin-top: -1px;
}

&:last-child {
margin-bottom: -1px;
}
}

> .components-panel .components-panel__header {
Expand Down Expand Up @@ -111,6 +105,8 @@
.components-panel__header.editor-sidebar__panel-tabs {
justify-content: flex-start;
padding-left: 0;
padding-right: $panel-padding / 2;
border-top: 0;

.components-icon-button {
margin-left: auto;
Expand Down