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

Allow editing actual posts and pages #356

Merged
merged 4 commits into from
Apr 3, 2017
Merged

Allow editing actual posts and pages #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec122e1
Restructure editor to accept and load actual post content
nylen Mar 30, 2017
2152958
Add links to edit posts and pages in the Gutenberg editor
nylen Mar 30, 2017
d032dc0
Load real or test post content into the same global variable
nylen Mar 31, 2017
3c3c8d7
Avoid unused variable error
nylen Mar 31, 2017
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
6 changes: 3 additions & 3 deletions editor/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
import EditorLayout from './layout';

export default class Editor {
constructor( id, settings ) {
constructor( id, post ) {
this.id = id;
this.settings = settings;
this.post = post;
this.render();
}

render() {
wp.element.render(
<EditorLayout initialContent={ this.settings.content } />,
<EditorLayout initialContent={ this.post.content.raw } />,
document.getElementById( this.id )
);
}
Expand Down
120 changes: 111 additions & 9 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,56 @@ function gutenberg_register_scripts() {
}
add_action( 'init', 'gutenberg_register_scripts' );

/**
* Adds the filters to register additional links for the Gutenberg editor in
* the post/page screens.
*
* @since 0.1.0
*/
function gutenberg_add_edit_links_filters() {
// For hierarchical post types
add_filter( 'page_row_actions', 'gutenberg_add_edit_links', 10, 2 );
// For non-hierarchical post types
add_filter( 'post_row_actions', 'gutenberg_add_edit_links', 10, 2 );
}
add_action( 'admin_init', 'gutenberg_add_edit_links_filters' );

/**
* Registers additional links in the post/page screens to edit any post/page in
* the Gutenberg editor.
*
* @since 0.1.0
*/
function gutenberg_add_edit_links( $actions, $post ) {
$can_edit_post = current_user_can( 'edit_post', $post->ID );
$title = _draft_or_post_title( $post->ID );

if ( $can_edit_post && 'trash' !== $post->post_status ) {
// Build the Gutenberg edit action. See also:
// WP_Posts_List_Table::handle_row_actions()
$gutenberg_url = menu_page_url( 'gutenberg', false );
$gutenberg_action = sprintf(
'<a href="%s" aria-label="%s">%s</a>',
add_query_arg( 'post_id', $post->ID, $gutenberg_url ),
esc_attr( sprintf(
/* translators: %s: post title */
__( 'Edit &#8220;%s&#8221; in the Gutenberg editor', 'gutenberg' ),
$title
) ),
__( 'Gutenberg', 'gutenberg' )
);
// Insert the Gutenberg action immediately after the Edit action.
$edit_offset = array_search( 'edit', array_keys( $actions ), true );
$actions = array_merge(
array_slice( $actions, 0, $edit_offset + 1 ),
array( 'gutenberg hide-if-no-js' => $gutenberg_action ),
array_slice( $actions, $edit_offset + 1 )
);
Copy link
Member Author

Choose a reason for hiding this comment

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

This is a bit annoying, but $actions is an associative array and we need to insert a key into the middle of it. Technique from http://stackoverflow.com/a/9847709/106302.

}

return $actions;
}

/**
* Scripts & Styles.
*
Expand All @@ -56,16 +106,68 @@ function gutenberg_register_scripts() {
* @since 0.1.0
*/
function gutenberg_scripts_and_styles( $hook ) {
if ( 'toplevel_page_gutenberg' === $hook ) {
// Scripts
wp_register_script( 'gutenberg-content', plugins_url( 'post-content.js', __FILE__ ) );
wp_enqueue_script( 'wp-editor', plugins_url( 'editor/build/index.js', __FILE__ ), array( 'wp-blocks', 'wp-element', 'gutenberg-content' ), false, true );
wp_add_inline_script( 'wp-editor', 'wp.editor.createEditorInstance( \'editor\', { content: window.content } );' );

// Styles
wp_enqueue_style( 'wp-editor-font', 'https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i', false );
Copy link
Member Author

Choose a reason for hiding this comment

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

The third false parameter here was incorrect. This is the $deps parameter, which is set to array() if it's not an array.

wp_enqueue_style( 'wp-editor', plugins_url( 'editor/build/style.css', __FILE__ ) );
if ( 'toplevel_page_gutenberg' !== $hook ) {
return;
}

/**
* Scripts
*/

// The editor code itself
wp_enqueue_script(
'wp-editor',
plugins_url( 'editor/build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element' ),
false, // $ver
true // $in_footer
);

// Load an actual post if an ID is specified
$post_to_edit = null;
if ( isset( $_GET['post_id'] ) && (int) $_GET['post_id'] > 0 ) {
$request = new WP_REST_Request(
'GET',
sprintf( '/wp/v2/posts/%d', (int) $_GET['post_id'] )
);
$request->set_param( 'context', 'edit' );
$response = rest_do_request( $request );
if ( 200 === $response->get_status() ) {
Copy link
Member

Choose a reason for hiding this comment

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

Noting that we'll want to better handle the else condition here at some point (not found, not allowed).

Copy link
Member Author

Choose a reason for hiding this comment

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

I figured we weren't ready to do much about this yet. Anything else you'd like to see in this PR?

Copy link

Choose a reason for hiding this comment

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

Load a placeholder editor-style.css.

Copy link
Member Author

Choose a reason for hiding this comment

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

@joyously I think this should be done in a separate PR.

Copy link
Member Author

Choose a reason for hiding this comment

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

@joyously if this is something you're interested in seeing sooner rather than later, can you please create an issue explaining a bit about what editor-style.css is used for and why we need to support it?

$post_to_edit = $response->get_data();
}
}

// Initialize the post data...
if ( $post_to_edit ) {
// ...with a real post
wp_localize_script( 'wp-editor', '_wpGutenbergPost', $post_to_edit );
} else {
// ...with some test content
// TODO: replace this with error handling
wp_add_inline_script(
'wp-editor',
file_get_contents( plugin_dir_path( __FILE__ ) . 'post-content.js' )
);
}

// Initialize the editor
wp_add_inline_script(
'wp-editor',
'wp.editor.createEditorInstance( \'editor\', _wpGutenbergPost );'
);

/**
* Styles
*/

wp_enqueue_style(
'wp-editor-font',
'https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i'
);
wp_enqueue_style(
'wp-editor',
plugins_url( 'editor/build/style.css', __FILE__ )
);
}

add_action( 'admin_enqueue_scripts', 'gutenberg_scripts_and_styles' );
Expand Down
59 changes: 33 additions & 26 deletions post-content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,40 @@
window.content = [
'<!-- wp:core/heading -->',
'<h1>1.0 Is The Loneliest Number</h1>',
'<!-- /wp:core/heading -->',
/**
* Temporary test post content
*/
window._wpGutenbergPost = {
content: {
raw: [
'<!-- wp:core/heading -->',
'<h1>1.0 Is The Loneliest Number</h1>',
'<!-- /wp:core/heading -->',

'<!-- wp:core/text -->',
'<p>I imagine prior to the launch of the iPod, or the iPhone, there were teams saying the same thing: the copy + paste guys are <em>so close</em> to being ready and we know Walt Mossberg is going to ding us for this so let\'s just not ship to the manufacturers in China for just a few more weeks… The Apple teams were probably embarrassed. But <strong>if you\'re not embarrassed when you ship your first version you waited too long</strong>.</p>',
'<!-- /wp:core/text -->',
'<!-- wp:core/text -->',
'<p>I imagine prior to the launch of the iPod, or the iPhone, there were teams saying the same thing: the copy + paste guys are <em>so close</em> to being ready and we know Walt Mossberg is going to ding us for this so let\'s just not ship to the manufacturers in China for just a few more weeks… The Apple teams were probably embarrassed. But <strong>if you\'re not embarrassed when you ship your first version you waited too long</strong>.</p>',
'<!-- /wp:core/text -->',

'<!-- wp:core/image -->',
'<figure><img src="https://cldup.com/Bc9YxmqFnJ.jpg" /></figure>',
'<!-- /wp:core/image -->',
'<!-- wp:core/image -->',
'<figure><img src="https://cldup.com/Bc9YxmqFnJ.jpg" /></figure>',
'<!-- /wp:core/image -->',

'<!-- wp:core/text -->',
'<p>A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.</p>',
'<!-- /wp:core/text -->',
'<!-- wp:core/text -->',
'<p>A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.</p>',
'<!-- /wp:core/text -->',

'<!-- wp:core/quote -->',
'<blockquote><p>Real artists ship.</p><footer><p><a href="http://www.folklore.org/StoryView.py?story=Real_Artists_Ship.txt">Steve Jobs, 1983</a></p></footer></blockquote>',
'<!-- /wp:core/quote -->',
'<!-- wp:core/quote -->',
'<blockquote><p>Real artists ship.</p><footer><p><a href="http://www.folklore.org/StoryView.py?story=Real_Artists_Ship.txt">Steve Jobs, 1983</a></p></footer></blockquote>',
'<!-- /wp:core/quote -->',

'<!-- wp:core/image -->',
'<figure><img src="https://cldup.com/vuGcj2VB8M.jpg" /><figcaption>Beautiful landscape</figcaption></figure>',
'<!-- /wp:core/image -->',
'<!-- wp:core/image -->',
'<figure><img src="https://cldup.com/vuGcj2VB8M.jpg" /><figcaption>Beautiful landscape</figcaption></figure>',
'<!-- /wp:core/image -->',

'<!-- wp:core/text -->',
'<p>By shipping early and often you have the unique competitive advantage of hearing from real people what they think of your work, which in best case helps you anticipate market direction, and in worst case gives you a few people rooting for you that you can email when your team pivots to a new idea. Nothing can recreate the crucible of real usage.</p>',
'<!-- /wp:core/text -->',
'<!-- wp:core/text -->',
'<p>By shipping early and often you have the unique competitive advantage of hearing from real people what they think of your work, which in best case helps you anticipate market direction, and in worst case gives you a few people rooting for you that you can email when your team pivots to a new idea. Nothing can recreate the crucible of real usage.</p>',
'<!-- /wp:core/text -->',

'<!-- wp:core/embed url:https://www.youtube.com/watch?v=Nl6U7UotA-M -->',
'<iframe width="560" height="315" src="//www.youtube.com/embed/Nl6U7UotA-M" frameborder="0" allowfullscreen></iframe>',
'<!-- /wp:core/embed -->'
].join( '' );
'<!-- wp:core/embed url:https://www.youtube.com/watch?v=Nl6U7UotA-M -->',
'<iframe width="560" height="315" src="//www.youtube.com/embed/Nl6U7UotA-M" frameborder="0" allowfullscreen></iframe>',
'<!-- /wp:core/embed -->',
].join( '' ),
},
};