Add Support for Gutenberg

[mrjarbenne]

Currently the Unlisted option is not present in the Visibility options within the new editor.

This ReadMe page covers how to extend that panel, and add additional features, but I can't find any specific info on adding to the Visibility setting to extend it to include our Unlisted option.

https://github.com/ryanwelcher/gutenberg/blob/8efddae270b3cb451b39568fefac87e50f5097e7/edit-post/README.md#pluginpoststatusinfo

[r-a-y]

The current iteration for the Classic Editor is a hack job anyway as I'm using JS to reposition the input fields and our Unlisted visibility option.

I'm guessing adding Gutenberg support would require similar workarounds. I'll see what can be done. Thanks for the link, that might come in handy down the road.

[r-a-y]

An update: Gutenberg currently doesn't allow anyone to add options to the Post Visibility options list. I opened a ticket at the Gutenberg repo here - WordPress/gutenberg#13794

And it was closed 😢

So as a workaround, I've added a checkbox to the "Status & Visibility" section. This is what it currently looks like:

If the post is currently Public and you check the Unlisted? checkbox, the Visibility will automatically change to Private. This is good, however, I am unable to listen to changes to the Visibility field itself to reverse the process.

For example, if the Unlisted? checkbox is selected and you change the Visibility to Public or Password Protected, the Unlisted? checkbox should be unchecked in an ideal world, but I'm unable to do this accurately. The wp.data.subscribe method described here - https://riad.blog/2018/06/07/efficient-client-data-management-for-wordpress-plugins/ - is unreliable. This is kind of a dealbreaker from a UX perspective as currently the user would have to manually uncheck the "Unchecked?" box if the Visibility is either Public or Password Protected.

I'll keep plugging away at this when I have some spare time, but thought I'd put something up for testing.

If you want to test, you should download a ZIP from the develop branch:
https://github.com/r-a-y/unlisted-posts/archive/develop.zip

develop branch also streamlines the code so portions of it is loaded as it is needed by WordPress.

[jakub-klapka]

Hello,
actually I don't know anything about your plugin :) but i've stubled upon this thread dealing with similar issue on my project. I don't know about previous versions of Gutenberg, but with WP 5.2, I've been able to sucessfully hook onto status changes with this:

wp.data.subscribe( () => {
    let changes = wp.data.select( 'core/editor' ).getPostEdits();
    if( typeof changes.status !== 'undefined' && changes.status !== 'private' ) {
        console.log('Deactivating secured post');
    }
} );

Maybe that will help you.

[r-a-y]

@jakub-klapka - Thanks for your comment.

I've already tried a variation of your code before and the data.subscribe hook runs way too frequently. Add a console.log( changes.status ); line after your let changes line and see how often it runs in your javascript console.

It runs so often especially when attempting to change the post visibility that I get a "lodash.js Uncaught RangeError: Maximum call stack size exceeded" error.

Update: - Actually, I think it's due to the way I'm trying to use wp.data.dispatch to set the post meta in the data.subscribe block that is causing an infinite loop. Need to do more investigating.

[r-a-y]

So I figured out the problem.

In the data.subscribe block because this plugin updates a postmeta value to determine unlisted status, I have to check the initial postmeta value in the data.subscribe block before I can update the postmeta to prevent the infinite loop caused by using data.dispatch .

I still don't like the one-size fits-all approach to wp.data.subscribe, but that's a Gutenberg thing.

@mrjarbenne - This is live on HWDSB for testing.

[jakub-klapka]

Yes, I agree, that hooking into every action is not ideal. You just have to bail early within your callback. But at least, is official way, so they hopefully won't break it in future versions.

(For inspiration: https://github.com/jakub-klapka/wp-secure-post-with-link/blob/gutenberg/assets/admin-ui-gutenberg.js)

[r-a-y]

@jakub-klapka - Thanks for your reference. You might want to switch from using getPostEdits() to getEditedPostVisibility().