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

Old style for classic block #4948

Merged
merged 8 commits into from
Apr 13, 2018
Merged

Old style for classic block #4948

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
08aff4d
Old style for classic block
ellatrix Feb 8, 2018
36e99db
Force toolbar rendering by focus
ellatrix Mar 10, 2018
4da48d7
Add placeholder when MCE toolbar is not created yet
ellatrix Apr 12, 2018
e23bfb1
Polish the font, hide the hover label.
Apr 13, 2018
37b8067
Blocks: Remove some obsolete style overrides for Classic block
gziolo Apr 13, 2018
8655168
Blocks: Update snaphsot for freeform test
gziolo Apr 13, 2018
d8d9f9a
Fix toolbar space.
Apr 13, 2018
28a1566
Revert past change.
Apr 13, 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
181 changes: 38 additions & 143 deletions blocks/library/freeform/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,26 +116,47 @@
}
}

// freeform toolbar
.editor-block-list__layout .editor-block-list__block[data-type="core/freeform"] {
.editor-block-list__block-edit:before {
outline: 1px solid #e2e4e7;
}

// Don't show normal block toolbar
.editor-block-contextual-toolbar {
display: none;
}

// Don't show block type label for classic block
&.is-hovered .editor-block-breadcrumb {
display: none;
}
}


div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
margin-top: 0;
padding-top: 0;
}

.freeform-toolbar {
position: sticky;
width: auto;
top: -1px; // stack borders
margin-top: -$block-controls-height - 16px;
border: 1px solid $light-gray-500;
z-index: z-index( '.freeform-toolbar' );
background-color: $white;
min-height: $block-controls-height;
margin-bottom: 14px;

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

.freeform-toolbar.has-advanced-toolbar {
margin-top: -89px; // pull upwards the classic block toolbar when enabled, height is manually entered
.freeform-toolbar:empty {
height: $block-toolbar-height;
background: #f5f5f5;
border-bottom: 1px solid #e2e4e7;

&:before {
font-family: $default-font;
font-size: $default-font-size;
content: attr( data-placeholder );
color: #555d66;
line-height: 37px;
padding: $block-padding;
}
}

// Overwrite inline styles.
Expand All @@ -149,145 +170,19 @@
width: 100% !important;
}

.freeform-toolbar .mce-tinymce-inline .mce-flow-layout {
white-space: normal;
}

.freeform-toolbar .mce-container-body.mce-abs-layout {
overflow: visible;
}

.freeform-toolbar .mce-menubar {
position: static;
}

.freeform-toolbar .mce-menubar,
.freeform-toolbar div.mce-toolbar-grp {
background-color: transparent;
border: none;
position: static;
}

.freeform-toolbar div.mce-toolbar-grp > div {
padding: 0;
}

.freeform-toolbar .mce-toolbar-grp .mce-toolbar:not(:first-child) {
display: none;
border-top: 1px solid $light-gray-500;
}

.freeform-toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar {
display: block;
}

.freeform-toolbar div.mce-btn-group {
padding: 0;
margin: 0;
border: 0;
}

.freeform-toolbar .mce-toolbar-grp .mce-toolbar .mce-btn {
margin: 0;
padding: 3px;
background: none;
outline: none;
color: $dark-gray-500;
cursor: pointer;
position: relative;
min-width: $icon-button-size;
height: $icon-button-size;

// Overwrite
border: none;
box-sizing: border-box;
box-shadow: none;
border-radius: 0;

&:hover,
/* the ":not(:disabled)" is needed to make it specific enough */
&:hover:not(:disabled),
&:focus,
&:focus:active {
color: $dark-gray-500;
outline: none;
box-shadow: none;
background: inherit;
}

&.mce-active,
&.mce-active:hover {
background: none;
color: $white;
}

&:disabled {
cursor: default;
}

&> button {
border: 1px solid transparent;
padding: 4px;
box-sizing: content-box;
}

&:hover button,
&:focus button {
color: $dark-gray-500;
}

&:not(:disabled) {
&.mce-active button,
&:hover button,
&:focus button {
border: 1px solid $dark-gray-500;
}
}

&.mce-active button,
&.mce-active:hover button {
background-color: $dark-gray-500;
color: $white;
}

&.mce-active .mce-ico {
color: $white;
}

&.mce-listbox,
&.mce-colorbutton {
width: auto;
border: none;
box-shadow: none;
}

&.mce-colorbutton .mce-preview {
bottom: 8px;
left: 8px;
}
}

.components-toolbar__control .dashicon {
display: block;
}


.mce-widget.mce-tooltip {
display: block;
opacity: initial;

.mce-tooltip-inner {
padding: 4px 12px;
background: $dark-gray-400;
border-width: 0;
color: white;
white-space: nowrap;
box-shadow: none;
font-size: $default-font-size;
border-radius: 0;
}

.mce-tooltip-arrow {
border-top-color: $dark-gray-400;
border-bottom-color: $dark-gray-400;
}
}
27 changes: 25 additions & 2 deletions blocks/library/freeform/old-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export default class OldEditor extends Component {
super( props );
this.initialize = this.initialize.bind( this );
this.onSetup = this.onSetup.bind( this );
this.focus = this.focus.bind( this );
}

componentDidMount() {
Expand Down Expand Up @@ -78,6 +79,8 @@ export default class OldEditor extends Component {
const { attributes: { content }, setAttributes } = this.props;
const { ref } = this;

this.editor = editor;

if ( content ) {
editor.on( 'loadContent', () => editor.setContent( content ) );
}
Expand Down Expand Up @@ -109,18 +112,38 @@ export default class OldEditor extends Component {
editor.dom.toggleClass( ref, 'has-advanced-toolbar', active );
},
} );

editor.on( 'init', () => {
const rootNode = this.editor.getBody();

// Create the toolbar by refocussing the editor.
if ( document.activeElement === rootNode ) {
rootNode.blur();
this.editor.focus();
}
} );
}

focus() {
if ( this.editor ) {
this.editor.focus();
}
}

render() {
const { isSelected, id } = this.props;
const { id } = this.props;

return [
// Disable reason: Clicking on this visual placeholder should create
// the toolbar, it can also be created by focussing the field below.
/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
<div
key="toolbar"
id={ `toolbar-${ id }` }
ref={ ref => this.ref = ref }
className="freeform-toolbar"
style={ ! isSelected ? { display: 'none' } : {} }
onClick={ this.focus }
data-placeholder={ __( 'Classic' ) }
/>,
<div
key="editor"
Expand Down
2 changes: 1 addition & 1 deletion blocks/library/freeform/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ exports[`core/freeform block edit matches snapshot 1`] = `
Array [
<div
class="freeform-toolbar"
data-placeholder="Classic"
id="toolbar-undefined"
style="display:none"
/>,
<div
class="wp-block-freeform blocks-rich-text__tinymce"
Expand Down