Skip to content

Commit

Permalink
Gutenberg: Use Fullscreen mode in Calypsoify (#10368)
Browse files Browse the repository at this point in the history 
#### Changes proposed in this Pull Request:

Calypsoify uses now the Gutenberg Fullscreen Mode instead of injecting the close button and including custom CSS.

We realized that the Gutenberg Fullscreen Mode is providing a UI very similar to Calypso, so by using it we can simplify the code and make it more maintainable. 

~This PR also includes a small fix for an 500 error raised when Jetpack is checking if Gutenberg is enabled.~ Fixed on #10389.

Fixes Automattic/wp-calypso#27937

#### Testing instructions:

* Edit a post in Gutenberg
* Append `&calypsoify=1` to the URL and reload the post editor.
* Make sure that the editor is displayed in Fullscreen Mode.
* Check that there are no options for disabling the Fullscreen Mode when clicking on the "More" button.
* Confirm that the back button uses now an icon and it redirects to the posts list in Calypso when clicking on it.

#### Screenshots:

Before
<img width="1275" alt="screen shot 2018-10-22 at 14 12 45" src="https://user-images.githubusercontent.com/1233880/47292141-68ba7c80-d606-11e8-9372-b9de36037b21.png">

After
<img width="1278" alt="screen shot 2018-10-22 at 15 17 53" src="https://user-images.githubusercontent.com/1233880/47294639-f9e12180-d60d-11e8-8031-b715aab319d2.png">

#### Proposed changelog entry for your changes:

I don't think this is needed given Calypsoify is mainly used internally. Anyway, if needed, this is my proposed changelog:

> Calypsoify uses now the Gutenberg Fullscreen Mode instead of injecting the close button and including custom CSS.
  • Loading branch information
@mmtr @jeherve
mmtr authored and jeherve committed Oct 30, 2018
1 parent a86744d commit 303a55c
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 317 deletions.
23 changes: 11 additions & 12 deletions modules/calypsoify/mods-gutenberg.js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
/* global calypsoifyGutenberg */
/* eslint-disable no-var */
/* global wp, calypsoifyGutenberg */

jQuery( function( $ ) {
if ( wp && wp.data && wp.data.select && ! wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' ) ) {
wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

var editPostHeaderInception = setInterval( function() {
var $editPostHeader = $( '.edit-post-header' );
if ( $editPostHeader.length < 1 ) {
var $closeButton = $( '.edit-post-fullscreen-mode-close__toolbar a' );
if ( $closeButton.length < 1 ) {
return;
}
clearInterval( editPostHeaderInception );

$( '<button/>', {
'class': 'editor-ground-control__back',
html: calypsoifyGutenberg.closeLabel
} )
.bind( 'click', function() {
window.location.href = calypsoifyGutenberg.closeUrl;
} )
.prependTo( $editPostHeader );
$closeButton.attr( 'href', calypsoifyGutenberg.closeUrl );
} );

$( 'body.revision-php a' ).each( function() {
var href = $( this ).attr( 'href' );
$( this ).attr( 'href', href.replace( '&classic-editor', '' ) );
}, 300 );
} );
} );
327 changes: 23 additions & 304 deletions modules/calypsoify/style-gutenberg.css
View file
Original file line number Diff line number Diff line change
@@ -1,327 +1,46 @@
html {
padding-top: 0px !important;
}

body.revision-php {
background: #f3f6f8;
}

#wpadminbar,
#adminmenumain,
#wp-admin-bar-menu-toggle {
/* Hides the Fullscreen option from the View modes */
.edit-post-more-menu__content .components-menu-group:first-child .components-menu-item__button:last-child {
display: none;
}

#wpcontent {
margin-left: 0 !important;
}

#wpbody {
padding-top: 0;
}

#screen-meta-links {
display: none !important;
}

#wpfooter {
display: none !important;
}

.gutenberg__editor {
min-height: 100vh !important;
}

.edit-post-header {
left: 0 !important;
top: 0 !important;
}

.editor-post-publish-panel {
top: 0 !important;
}

@media screen and (min-width: 600px) {
.edit-post-sidebar {
top: 56px;
}
}

/* BUTTONS */

.components-button.is-button,
.wp-core-ui .button {
border-radius: 4px;
border-width: 1px 1px 2px;
box-shadow: none;
font-size: 14px;
font-weight: 500;
height: auto;
line-height: 21px;
padding: 7px 12px;
text-shadow: none;
}

.components-button.is-button.is-small {
font-size: 12px;
line-height: 12px;
padding: 7px;
}

.components-button.is-button:active,
.wp-core-ui .button:active {
border-width: 2px 1px 1px;
}

.components-button.is-button.is-default,
.components-button.is-button.is-default:active:not(:disabled):not([aria-disabled=true]),
.wp-core-ui .button,
.wp-core-ui .button:active {
background-color: #fff;
border-color: #c8d7e1;
box-shadow: none;
color: #2e4453;
}
.components-button.is-button.is-default:hover,
.components-button.is-button.is-default:focus:not(:disabled):not([aria-disabled=true]),
.wp-core-ui .button:hover,
.wp-core-ui .button:focus {
background-color: #fff;
border-color: #a8bece;
box-shadow: none;
color: #2e4453;
}
.components-button.is-button.is-default:disabled,
.components-button.is-button.is-default[disabled],
.wp-core-ui .button:disabled,
.wp-core-ui .button[disabled] {
background-color: #fff !important;
border-color: #e9eff3 !important;
color: #e9eff3 !important;
cursor: default;
text-shadow: none !important;
}

.components-button.is-button.is-primary,
.components-button.is-button.is-toggled,
.wp-core-ui .button.button-primary {
background-color: #00aadc;
border-color: #008ab3;
color: #fff;
}
.components-button.is-button.is-primary:active:not(:disabled):not([aria-disabled=true]),
.components-button.is-button.is-toggled:active:not(:disabled):not([aria-disabled=true]),
.wp-core-ui .button.button-primary:active {
background-color: #00aadc;
border-color: #005082;
color: #fff;
box-shadow: none;
}
.components-button.is-button.is-primary:hover:not(:disabled):not([aria-disabled=true]),
.components-button.is-button.is-primary:focus:not(:disabled):not([aria-disabled=true]),
.components-button.is-button.is-toggled:hover:not(:disabled):not([aria-disabled=true]),
.components-button.is-button.is-toggled:focus:not(:disabled):not([aria-disabled=true]),
.wp-core-ui .button.button-primary:hover,
.wp-core-ui .button.button-primary:focus {
background-color: #00aadc;
border-color: #005082;
box-shadow: none;
color: #fff;
}
.components-button.is-button.is-primary:disabled,
.components-button.is-button.is-primary[disabled],
.wp-core-ui .button.button-primary:disabled,
.wp-core-ui .button.button-primary[disabled] {
background-color: #fff !important;
border-color: #e9eff3 !important;
color: #e9eff3 !important;
cursor: default;
text-shadow: none !important;
}
.components-button.is-button.is-primary.is-busy {
background-image: linear-gradient(-45deg, #00aadc 28%, #0096c3 28%, #0096c3 72%, #00aadc 72%) !important;
}

.components-button.components-icon-button {
color: #537994;
}
.components-icon-button:not(:disabled):not([aria-disabled=true]):not(.is-default):hover,
.components-icon-button:not(:disabled):not([aria-disabled=true]):not(.is-default):focus {
background-color: #f3f6f8;
border: none;
box-shadow: none;
color: #2e4453;
outline: none;
}
.components-button.components-icon-button[disabled] {
color: #e9eff3;
cursor: default;
}
.components-button.components-icon-button.is-toggled {
background-color: #2e4453;
color: #fff;
}
.components-icon-button:not(:disabled):not([aria-disabled=true]):not(.is-default).is-toggled:hover,
.components-icon-button:not(:disabled):not([aria-disabled=true]):not(.is-default).is-toggled:focus {
background-color: #2e4453;
color: #fff;
}

.components-button:disabled,
.components-button[disabled] {
opacity: 1;
}

/* HEADER */

.edit-post-header {
padding: 0 10px 0 0;
}

.editor-ground-control__back {
background-color: transparent;
border: none;
border-right: 1px solid #d9e3ea;
color: #0087be;
cursor: pointer;
font-size: 14px;
font-weight: 500;
height: 56px;
margin-right: 10px;
min-width: 80px;
padding: 0 16px;
}
.editor-ground-control__back:hover {
color: #00aadc;
}

.edit-post-header-toolbar {
width: 100%;
}

.edit-post-header .components-button.is-button {
font-size: 14px;
height: auto;
line-height: 21px;
margin: 0 4px;
padding: 7px 12px;
}

.edit-post-header__settings button:last-of-type svg {
transition: transform 0.3s ease-in-out;
}
.edit-post-header__settings button:last-of-type.is-toggled svg {
transform: rotate(45deg);
}

/* PUBLISH PANEL */

.editor-post-publish-panel__header {
padding-right: 8px;
}

.post-publish-panel__postpublish-buttons {
margin-top: 10px;
}

@media screen and (max-width: 782px) {
.editor-post-publish-panel .editor-post-visibility__dialog-radio:checked:before {
margin: 6px 0 0 6px;
}
}

.components-time-picker .components-time-picker__am-button {
border-radius: 4px 0 0 4px;
}
.components-time-picker .components-time-picker__pm-button {
border-radius: 0 4px 4px 0;
}
.components-time-picker .components-time-picker__am-button.is-toggled,
.components-time-picker .components-time-picker__pm-button.is-toggled {
transform: none;
/* Hides the Manage Reusable Blocks links */
.editor-inserter__manage-reusable-blocks,
a.components-menu-item__button[href*="post_type=wp_block"] {
display: none;
}

/* NOTICES */
/* REVISIONS */

.edit-post-layout .components-notice-list {
left: 0 !important;
top: 0 ;
}
@media screen and (min-width: 600px) {
.edit-post-layout .components-notice-list {
top: inherit;
}
.revision-php {
background: #f3f6f8;
}

.components-notice {
background-color: #2e4453 !important;
border: none;
color: #fff;
min-height: auto !important;
padding: 13px 13px 13px 60px !important;
position: relative;
.wp-toolbar .revision-php {
margin-top: -32px;
}

.components-notice a {
color: #a8bece;
}
.components-notice a:hover {
color: #fff;
.revision-php #wpadminbar,
.revision-php #adminmenumain,
.revision-php #wp-admin-bar-menu-toggle {
display: none;
}

.components-notice p {
font-size: 14px;
margin: 0;
.revision-php #wpcontent {
margin-left: 0 !important;
}

.components-notice.is-dismissable {
padding-right: 48px !important;
.revision-php #wpbody {
padding-top: 0;
}

.components-notice .components-notice__dismiss {
color: #a8bece;
margin: 0;
padding: 9px 10px 6px 10px;
}
.edit-post-layout .components-notice-list .components-notice .components-notice__dismiss {
margin: 0;
}
.components-notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-default):hover,
.components-notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-default):focus {
color: #fff !important;
background-color: transparent !important;
}
.components-notice .components-notice__dismiss svg {
height: 32px;
width: 32px;
.revision-php #screen-meta-links {
display: none !important;
}

.components-notice:before {
content: "\f534";
display: block;
font: 400 24px/20px dashicons;
height: 100%;
left: 0;
padding: 15px 0;
position: absolute;
text-align: center;
top: 0;
width: 48px;
}
.components-notice.is-warning:before {
background-color: #f0b849;
}
.components-notice.is-error:before {
background-color: #d94f4f;
}
.components-notice.is-success:before {
background-color: #4ab866;
content: "\f147";
font-size: 32px;
.revision-php #wpfooter {
display: none !important;
}

/* REVISIONS */

.revision-tickmarks {
margin-top: 8px;
}
Expand Down
1 change: 0 additions & 1 deletion modules/class.jetpack-calypsoify.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ public function enqueue_for_gutenberg() {
'calypsoify_wpadminmods_js',
'calypsoifyGutenberg',
array(
'closeLabel' => __( 'Close', 'jetpack' ),
'closeUrl' => $this->get_close_gutenberg_url(),
)
);
Expand Down

0 comments on commit 303a55c

Please sign in to comment.