feat(content-distribution): Block the editor for incoming posts #181
Conversation
There was a problem hiding this comment.
Good solution blocking the block editor!
When editing a linked post, I'm still able to use the side panel forms:
These should either render disabled inputs or nothing at all. Not sure which route, WDYT?
When a distributed post comes in, it's expectedly a draft. When trying to publish, the button is disabled, possibly because of the lockPostSaving(). We still need to allow a post to be published (or any status change), can we find a way around that?
When a post gets unlinked, I'm still getting the editor blocked. I should be allowed to make changes when unlinking a post.
I'm also missing the ability to unlink/link. Will it be tackled separately? It might be convenient to handle in the same PR, since that change has a direct impact in how this UI should behave.
| 'This post is linked to the origin post. Edits to the origin post will update this version', | ||
| 'newspack-network' | ||
| ) | ||
| : __( | ||
| 'This post has been unlinked from the origin post. Edits to the origin post will not update this version', |
There was a problem hiding this comment.
NIT:
| 'This post is linked to the origin post. Edits to the origin post will update this version', | |
| 'newspack-network' | |
| ) | |
| : __( | |
| 'This post has been unlinked from the origin post. Edits to the origin post will not update this version', | |
| 'This post is linked to the origin post. Edits to the origin post will update this version.', | |
| 'newspack-network' | |
| ) | |
| : __( | |
| 'This post has been unlinked from the origin post. Edits to the origin post will not update this version.', |
| useEffect(() => { | ||
| lockPostSaving('distributed-incoming-post-lock'); | ||
| lockPostAutosaving('distributed-incoming-post-lock'); | ||
| }); |
There was a problem hiding this comment.
This should probably be conditioned to isLinked
|
Thanks for the review! I realized I am missing quite a few things here, so I'm back at the drawing board :) I'll add/fix the things you are pointing out |
|
OK, here is take two. The CSS is still all that enforces the "blocking". Parts of it became a bit more fragile than I like, so I'm open to suggestions. I added a component How to test:
|
There was a problem hiding this comment.
Thank you for the revisions! It's looking great!
I added a component distribute-panel that we could re-use for the distribute panel for what is in the JS distribute component now (and maybe rename that to outgoing-post), but we can do that in a separate PR also.
I loved that idea! Let's do this after this gets merged.
I left a couple of comments below, but also wanted your thoughts on the relinking action. When a post is unlinked, you're able to make changes to it and relinking will overwrite those changes. On the backend this is working well, but on the editor you'll only see the resynced content after a page refresh, not right after relinking is complete.
Ideally, we'd have that content resync instantly, but I'm not familiar with a way to make Gutenberg pull content and refresh its store from the backend. Do you have ideas?
|
I re-did things a bit and spent a bunch of time researching whether it's possible to replace all content in the editor on relinking. The post content and title is easy enough, but I could find no way to guarantee that I would not overwrite the tags, categories, or whatever else was edited, so I went with just reloading the page on relinking. That created its own problems to avoid the browser dialogue with "You have unsaved changes" so I have quite a lot of async chaining in the code to work around that. Suggestions welcome to make that more sleek! I also renamed the panel component and fixed up the CSS a bit more. |
There was a problem hiding this comment.
Thank you for the revisions, @naxoc! It's working well and the UI is solid.
I found 2 things that we can tackle in another PR:
- When the post is linked (UI blocked), if I navigate to the post settings panel and click on the "Block" tab, I can't click back to the "Post" tab. Something about the UI blocking strategy takes over that area as well.
- An oversight on my part, we should also block the ability to change the featured image:
|
Hey @naxoc, good job getting this PR merged! 🎉 Now, the Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label. If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label. Thank you! ❤️ |
This fixes 2 things that came out of #181 * Also blocks the "Featured image" button so that is not editable on linked posts * Fixes a bug where it was not possible to click from the "Block" tab in the sidebar to the "Post" tab. ## How to test On a linked post – ensure that the sidebar blocks what it should (and no more) and that you can click between the tabs in the sidebar.
This fixes 2 things that came out of #181 * Also blocks the "Featured image" button so that is not editable on linked posts * Fixes a bug where it was not possible to click from the "Block" tab in the sidebar to the "Post" tab. ## How to test On a linked post – ensure that the sidebar blocks what it should (and no more) and that you can click between the tabs in the sidebar.
# [2.5.0-alpha.1](v2.4.0...v2.5.0-alpha.1) (2025-01-23) ### Bug Fixes * **content-distribution:** block additional UI components ([#197](#197)) ([3f30cdb](3f30cdb)) * **content-distribution:** handling multiple post meta ([#199](#199)) ([c93084d](c93084d)) * **content-distribution:** Improve CSS for blocked editor ([#193](#193)) ([295bdad](295bdad)), closes [#181](#181) * **content-distribution:** persist site hash ([#186](#186)) ([120b759](120b759)) * **content-distribution:** prevent consecutive dispatches ([#198](#198)) ([2149a62](2149a62)) * **content-distribution:** refactor outgoing post js ([#188](#188)) ([cc08edc](cc08edc)) * **memberships:** remove managed fields on cancel or expire ([#192](#192)) ([67a5cf0](67a5cf0)) ### Features * **content-distribution:** Block the editor for incoming posts ([#181](#181)) ([48b4cae](48b4cae)) * **content-distribution:** confirm dialog for unlinking and relinking posts ([#190](#190)) ([f36bb28](f36bb28)) * **content-distribution:** migrator ([#185](#185)) ([06ec18a](06ec18a)) * **content-distribution:** post status on create ([#189](#189)) ([1ad3e0c](1ad3e0c)) * sync multiple user roles ([#187](#187)) ([9fa833c](9fa833c))
|
🎉 This PR is included in version 2.5.0-alpha.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This adds the UI editor "blocking" for incoming posts.
The editor is disabled and save is not possible (from the UI). I haven't put any protections in place in PHP on save by API calls or similar. I can add that if we think it's necessary.
Note that I changed the text from "This post is linked to the origin post. Edits to the origin post will update this remote version" to "This post is linked to the origin post. Edits to the origin post will update this version" in the sidebar for linked posts.
I added the function
get_original_site_url()– I stole it from #177 :)