ellatrix / wp-front-end-editor

Front-end Editor for WordPress
https://wordpress.org/plugins/wp-front-end-editor/
341 stars 87 forks source link

Issues with custom post type not saving to correct ID #286

Closed steveangstrom closed 7 years ago

steveangstrom commented 7 years ago

This may be a bug, or it may be my error. I'll present it in bug report form for clarity. Further info available on request.

Expected behaviour and actual behaviour

EXPECTED I expect to edit my CPT post, and the title and content to be editable . If I am editing mydomain.tld/custom_posts/this-post-here then expect to press "save" and to reload the page and the CPT post to refresh and display that titled page with the respective content.

Additionally: when pressing the Edit button repeatedly I expect one FEE toolbar to instantiate.

ACTUAL When editing a CPT post the content is editable but the title is not. I can enter the content using FEE, and pressing the save button produces odd results. The outcome is a BLOG post with an ID for a title and the content as entered into the CPT. So on refreshing mydomain/custom_posts/thispost I will see the previous revision. Any further edits will be saved into a new blog posts with incrementing IDs.

When pressing the Edit button repeatedly several FEE toolbars instantiate overlaid.

Steps to reproduce the problem

create CPT in a plugin. In a multisite

register_post_type( 'pher_portfolio', 
        array( 'labels' => array(
            'name' => __( 'Portfolio', 'pherichetheme' ), 
            'singular_name' => __( 'Portfolio Item', 'pherichetheme' ), 
            'all_items' => __( 'All Portfolios', 'pherichetheme' ), 
            'add_new' => __( 'Add New Portfolio', 'pherichetheme' ), 
            'add_new_item' => __( 'Add New Portfolios', 'pherichetheme' ), 
            'edit' => __( 'Edit', 'pherichetheme' ),
            'edit_item' => __( 'Edit Portfolio', 'pherichetheme' ),
            'new_item' => __( 'New Portfolio', 'pherichetheme' ),
            'view_item' => __( 'View Portfolio', 'pherichetheme' ), 
            'search_items' => __( 'Search Portfolios', 'pherichetheme' ),
            'not_found' =>  __( 'Nothing found in the Database.', 'pherichetheme' ), 
            'not_found_in_trash' => __( 'Nothing found in Trash', 'pherichetheme' ),
            'parent_item_colon' => ''
            ), 
            'description' => __( 'The Portfolios available in the system', 'pherichetheme' ), 
            'public' => true,
            'publicly_queryable' => true,
            'exclude_from_search' => false,
            'show_ui' => true,
            'query_var' => true,
            'show_in_vav_menus' =>true,
            'menu_position' => 5, 
            'menu_icon'=> 'dashicons-format-gallery', 
            'rewrite'   => array( 'slug' => 'portfolio', 'with_front' => 'portfolio'), 
            'has_archive' => false, 
            'capability_type' => 'page',
            'hierarchical' => true,
                        'show_in_rest'       => true,
            'rest_controller_class' => 'WP_REST_Posts_Controller',
            'supports' => array( 'title', 'editor', 'thumbnail', 'revisions', 'front-end-editor')
        )
    );

Specifications

JS: `TypeError: post.get(...) is undefined on/<.setup/editor.load() fee.js:90 Editor.prototype.initContentBody() tinymce.js:37764 Editor.prototype.init() tinymce.js:37381 loadScripts/<() tinymce.js:37236 ScriptLoader/this.loadScripts/loadScripts/<() tinymce.js:9589 each() tinymce.js:3605 ScriptLoader/this.loadScripts/loadScripts() tinymce.js:9588 ScriptLoader/this.loadScripts() tinymce.js:9596 ScriptLoader/this.loadQueue() tinymce.js:9526 loadScripts() tinymce.js:37234 Editor.prototype.render() tinymce.js:37242 createEditor() tinymce.js:39776 initEditors/<() tinymce.js:39812 each() tinymce.js:3605 initEditors() tinymce.js:39808 EventUtils/self.bind() tinymce.js:1298 DOMUtils.prototype.bind() tinymce.js:9162 EditorManager.init() tinymce.js:39818 on() fee.js:80

fee.js:243 n.event.dispatch() jquery.js:3 n.event.add/r.handle() jquery.js:3` **JSON params read:** Code: "rest_post_invalid_id" Content: raw:"

Dictas eleifend has ne, et nam elit nonumy assentior...." etc. data: Object status 404 message:"Invalid post id." status:"publish" IMAGES FEE working OK on this template. ![fee-ok-page-has-title](https://cloud.githubusercontent.com/assets/8482649/17249932/179f2b1e-559a-11e6-95e8-c66cdd892a5a.jpg) The problem ![fee-error-cpt-no-title](https://cloud.githubusercontent.com/assets/8482649/17249928/13150d16-559a-11e6-9b9e-1b6a7b368e3e.jpg) This is where they all save to due to the error. anonymous posts ![fee-error-cptsaves-as-post](https://cloud.githubusercontent.com/assets/8482649/17250114/d300ab80-559a-11e6-8747-1b9b22d31608.jpg) --- Any assistance greatly appreciated. Also, great plugin, it's a real shame it seems to have fallen off the "features-as-plugins" roadmap.

ellatrix commented 7 years ago

Yes, this is because I only added the post and page endpoints. When registering the custom post type you should add support for the REST API as well as this front end editor. See http://v2.wp-api.org/extending/custom-content-types/. I still need to disable the editor for post types that don't support the REST API though, and fix the endpoints.

steveangstrom commented 7 years ago

Hi, I thought I had done exactly that. If you see in my CPT definition from above it does contain the lines 'show_in_rest' => true, 'rest_controller_class' => 'WP_REST_Posts_Controller', 'supports' => array( 'title', 'editor', 'thumbnail', 'revisions', 'front-end-editor')

this is as per WP_REST v2 instructions, was that not correct? I omitted the (optional) base definition because it defaults to the posttype anyway.

Without REST enabled a different error is produced. (I had previously tried disabling REST API support for this CPT to see what happened.)

ellatrix commented 7 years ago

Aha, I did not see them in your example. But as said before, I still need to fix some stuff for custom post types. I'll take a look at it right now.

ellatrix commented 7 years ago

I believe this works now after ba5de75f8f3969aec9c10aebe3bcc95046849133.

steveangstrom commented 7 years ago

Hi, thanks a huge amount for your work on this, unfortunately it's not quite functional on my site. I'm sure it must be my error.

On a fresh install both Pages, posts and CPTs now highlight the editable area and all looks very promising but all save attempts fail with: {"code":"rest_invalid_param","message":"Invalid parameter(s): date","data":{"status":400,"params":{"date":"The date you provided is invalid."}}}

So, the CPT is sending a nearly functional request (with ID) now, but all post types are failing to save with FEE. That means all Pages, Posts and CPTs fail with null date. Here is a representative request from the homepage, showing a null date :

{"id":5,"date":null,"guid":{"rendered":"http://dev.mysite.com/feetest/?page_id=5","raw":"http://dev.mysite.com/feetest/?page_id=5"},"modified":"2016-08-08T18:13:57","modified_gmt":"2016-08-08T18:13:57","password":"","slug":"home-page","status":"publish","type":"page","link":"http://dev.mysite.com/feetest/","title":{"raw":"Home this is the page"},"content":{"raw":"<p>this is the body text. is this working, lets see what response we get this is this is the body text. is this working, lets see what response we get </p>"},"excerpt":"","author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","_fee_session":1470682046511}

Do you have any suggestions?

BTW - (unrelated) In this version of FEE the toolbar now shoots off the top of the page as soon as I try to edit anything and I have to shrink my window and wiggle the scrollbar to get it to return. Apologies for stacking issues!

ellatrix commented 7 years ago

Thanks for the feedback! That is odd. What's does it look like when you GET the post? Is the date also null? Or does it change somewhere in between getting it and saving it?

No worries. So the intention was that the toolbar shows scrolling up and hides scrolling down. But this is subject to change based on feedback.

steveangstrom commented 7 years ago

Hi there, The GET has both the date/ date_gmt .

This a representative GET , as I see it in Postman for the above POST request on ID 5 : GET http: //dev.mysite.com/feetest/wp-json/wp/v2/pages/5
(not my real TLD) { "id": 5, "date": "2014-07-24T19:57:07", "date_gmt": "2014-07-24T19:57:07", "guid": { "rendered": "http://dev.mysite.com/feetest/?page_id=5" }, "modified": "2016-08-08T18:13:57", "modified_gmt": "2016-08-08T18:13:57", "slug": "home-page", "type": "page", "link": "http://dev.mysite.com/feetest/", "title": { "rendered": "Home this is the page" }, "content": { "rendered": "<div id=\"lipsum\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae nulla in est ullamcorper ullamcorper vel eu orci. Quisque vitae tristique leo. Duis auctor a nunc vel volutpat. Suspendisse pharetra, nisl sed tristique egestas, enim diam ma

(I've obfuscated this example domain BTW ;-) )

Of course, at the moment I'm buried under client jobs, but all I can think about is this. Heh. Typical.

steveangstrom commented 7 years ago

Additional investigation & more mysteries dept. I put a console.log into fee.js to see what's happening. At line 112 in fee.js, var debouncedSave = _.debounce(function () { console.log('DEBUG '+JSON.stringify( post)); /* DEBUG investigations*/ post.save() }, 1000) and that produced the output to the js console:

DEBUG {"id":5,"date":"2014-07-24T19:57:07","date_gmt":"2014-07-24T19:57:07","guid":{"rendered":"http://dev.mysite.com/feetest/?page_id=5","raw":"http://dev.mysite.com/feetest/?page_id=5"},"modified":"2016-08-08T18:13:57","modified_gmt":"2016-08-08T18:13:57","password":"","slug":"home-page","status":"publish","type":"page","link":"http://dev... etc

So, that js post object of yours has the date OK. And that fee post object is sending it to the API , if I'm understanding your method correctly. So, I'm still baffled where it loses it.

Hmm.

ellatrix commented 7 years ago

It'll be better if you log the object in the save method, there it might be different. Not sure. In any case I'll make it so it only sends data from the front end editor to the server. There's another bug with the template.

ellatrix commented 7 years ago

So in b6dc416d564ad51cac156305bf0bdf7ad6668105 we pick only the used attributes, see if there are any changes, and send only those to the server if so. Does that fix it for you?

steveangstrom commented 7 years ago

YESSSSssssss!! I mean. Um, yep https://github.com/iseulde/wp-front-end-editor/commit/b6dc416d564ad51cac156305bf0bdf7ad6668105 fixed it.

The home page now saves, and even more thrilling for me - the CPTs now save. So as far as I can tell it all works fine now.

Internet high-five to you & thanks for your work on this project.

ellatrix commented 7 years ago

Great! :D I will release it to the WP repo then.

ellatrix commented 7 years ago

Don't hesitate to report any other problems or suggestions. :)