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.

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

fix(content-distribution): refactor outgoing post js #188

Merged
merged 18 commits into from
Jan 20, 2025
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
Add buttons and a bunch more logic
naxoc committed Jan 9, 2025
commit 91d3ceb7a54c516dd992d37385cd114854169efc
4 changes: 0 additions & 4 deletions includes/content-distribution/class-api.php
Original file line number Diff line number Diff line change
@@ -79,10 +79,6 @@ public static function toggle_unlink( $request ): WP_REST_Response|WP_Error {
return new WP_Error( 'newspack_network_content_distribution_error', $e->getMessage(), [ 'status' => 400 ] );
}

'post_id' => $post_id,
'is_linked' => $incoming_post->is_linked(),
'status' => 'success',

return rest_ensure_response( [
'post_id' => $post_id,
'unlinked' => ! $incoming_post->is_linked(),
4 changes: 2 additions & 2 deletions includes/content-distribution/class-editor.php
Original file line number Diff line number Diff line change
@@ -128,8 +128,8 @@ private static function enqueue_block_editor_assets_for_incoming_post( WP_Post $
'newspack-network-incoming-post',
'newspack_network_incoming_post',
[
'original_url' => $incoming->get_original_site_url(),
'unlinked_meta_key' => Incoming_Post::UNLINKED_META,
'originalUrl' => $incoming->get_original_site_url(),
'unlinked' => ! $incoming->is_linked(),
]
);
}
8 changes: 3 additions & 5 deletions src/content-distribution/distribute-panel/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import React, { memo } from 'react';

/**
* WordPress dependencies.
*/
@@ -13,7 +11,7 @@ import { globe } from '@wordpress/icons';
*/
import './style.scss';

const DistributePanel = memo( ( { header, body, footer, buttons } ) => {
const DistributePanel = ({ header, body, footer, buttons }) => {
return (
<PluginSidebar
name="newspack-network-distribute-panel"
@@ -37,6 +35,6 @@ const DistributePanel = memo( ( { header, body, footer, buttons } ) => {
</Panel>
</PluginSidebar>
);
} );
};

export default DistributePanel;
export default DistributePanel;
74 changes: 30 additions & 44 deletions src/content-distribution/incoming-post/index.js
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
import apiFetch from '@wordpress/api-fetch';
import { __, sprintf } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { useDispatch, useSelect } from '@wordpress/data';
import { Button } from '@wordpress/components';
import { globe } from '@wordpress/icons';
import { registerPlugin } from '@wordpress/plugins';
@@ -17,86 +17,72 @@ import { registerPlugin } from '@wordpress/plugins';
import './style.scss';
import DistributePanel from "../distribute-panel";

const originalUrl = newspack_network_incoming_post.original_url;
const unlinkedMetaKey = newspack_network_incoming_post.unlinked_meta_key;
const originalUrl = newspack_network_incoming_post.originalUrl;
const unlinked = newspack_network_incoming_post.unlinked;

function IncomingPost() {

const { createNotice } = useDispatch( 'core/notices' );
const { lockPostSaving, lockPostAutosaving } = useDispatch( 'core/editor' );
const { lockPostAutosaving, unlockPostAutosaving } = useDispatch( 'core/editor' );
const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
const [ isLinkedToggling, setIsLinkedToggling ] = useState( false );
const [ isUnLinked, setIsUnLinked ] = useState( false );

const { postId, postStatus, postIsUnlinked, isAutosaveLocked, isPostSaveLocked } = useSelect( select => {
const { postId } = useSelect( select => {
const {
getCurrentPostId,
getCurrentPostAttribute,
isPostSavingLocked,
isPostAutosavingLocked,
} = select( 'core/editor' );
return {
postId: getCurrentPostId(),
postStatus: getCurrentPostAttribute( 'status' ),
postIsUnlinked: getCurrentPostAttribute( 'meta' )?.[unlinkedMetaKey] || false,
isPostSaveLocked: isPostSavingLocked(), // These are inital states taht we should honor?
isAutosaveLocked: isPostAutosavingLocked(),
};
} );


useEffect( () => {
const lockName = 'distributed-incoming-post-lock';

if (isUnLinked && !isPostSaveLocked && !isAutosaveLocked) {
unlockPostSaving( lockName );
unlockPostAutosaving( lockName );
} else {
// Save should not be allowed on a linked post.
lockPostSaving( lockName );
lockPostAutosaving( lockName );

// But we do need to deal with publish/unpublish
// TODO
}
console.log('Locking effects', isUnLinked, isPostSaveLocked, isAutosaveLocked);
}, [ isUnLinked, postStatus ] );
setIsUnLinked( unlinked );
}, [ unlinked ] );

useEffect( () => {
setIsUnLinked( postIsUnlinked );
}, [ postIsUnlinked ] );

setTimeout( () => {
openGeneralSidebar(
'newspack-network-incoming-post/newspack-network-distribute-panel'
);
}, 10 ); // TODO. There must be a better way
}, [] );

useEffect( () => {
createNotice(
'warning',
isUnLinked
? sprintf( __( 'Distributed from %s.', 'newspack-network' ), originalUrl )
: sprintf( __( 'Originally distributed from %s.', 'newspack-network' ), originalUrl ),
? sprintf( __( 'Originally distributed from %s.', 'newspack-network' ), originalUrl )
: sprintf( __( 'Distributed from %s.', 'newspack-network' ), originalUrl ),

{
id: 'newspack-network-incoming-post-notice',
}
);

setTimeout( () => {
openGeneralSidebar(
'newspack-network-incoming-post/newspack-network-distribute-panel'
);
}, 10 );
const lockName = 'distributed-incoming-post-lock';
if ( isUnLinked ) {
unlockPostAutosaving( lockName );
} else {
lockPostAutosaving( lockName );
}
// Toggle the CSS overlay.
document.querySelector( '#editor' )?.classList.toggle( 'newspack-network-incoming-post-linked', ! isUnLinked );

}, [ isUnLinked ] );

const toggleLinked = () => {
setIsLinkedToggling( true );
console.log( isUnLinked ? 'unlinked' : 'linked' );
apiFetch( {
path: `newspack-network/v1/content-distribution/unlink/${ postId }`,
method: 'POST',
data: {
unlinked: !isUnLinked,
},
} ).then( data => {
console.log( 'data', data );
setIsUnLinked( data.unlinked );
createNotice( 'info', 'yay', {
createNotice( 'info', __( sprintf( 'Post has been %s.', isUnLinked ? 'unlinked' : 'relinked' ), 'newspack-network' ), {
type: 'snackbar',
isDismissible: true,
} );
@@ -111,15 +97,14 @@ function IncomingPost() {
<DistributePanel
header={
isUnLinked ? __(
'This post has been unlinked from the origin post. Edits to the origin post will not update this version',
'This post has been unlinked from the origin post. Edits to the origin post will not update this version.',
'newspack-network'
)
: __(
'This post is linked to the origin post. Edits to the origin post will update this version',
'This post is linked to the origin post. Edits to the origin post will update this version.',
'newspack-network'
)
}
body={ `isUnLinked: ${ isUnLinked }` }
buttons={
<>
<Button
@@ -132,6 +117,7 @@ function IncomingPost() {
<Button
variant={ isUnLinked ? 'primary' : 'secondary' }
isDestructive={ !isUnLinked }
disabled={ isLinkedToggling }
onClick={ () => {
toggleLinked();
} }
68 changes: 56 additions & 12 deletions src/content-distribution/incoming-post/style.scss
Original file line number Diff line number Diff line change
@@ -1,22 +1,66 @@
// Aggressively grey out and "disable" the editor.
.edit-post-visual-editor {
@mixin grey-out-outer {
position: relative;

&::before {
content: "";
position: absolute;
inset: 0;
z-index: 9999;
z-index: 9998;
pointer-events: auto;
cursor: not-allowed;
}
}

.block-editor-writing-flow {
opacity: 0.5;
pointer-events: none !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
@mixin grey-out-inner {
opacity: 0.5;
pointer-events: none !important;
user-select: none !important;
}

// Aggressively grey out and "disable" the editor and sidebar on linked posts.
.newspack-network-incoming-post-linked {

.edit-post-visual-editor {
@include grey-out-outer;

.block-editor-writing-flow {
@include grey-out-inner;
}
}

.editor-sidebar:not(#newspack-network-incoming-post\:newspack-network-distribute-panel, #edit-post\:document) {
@include grey-out-outer;

.components-panel {
@include grey-out-inner;
}
}

// This will grey out most – but not the top part with status, trash, etc. That part is not in a panel.
#edit-post\:document {
.components-panel__body {
@include grey-out-outer;

* {
@include grey-out-inner;
}
}
}


.edit-post-meta-boxes-area {
@include grey-out-outer;

* {
@include grey-out-inner;
}
}

// This is very fragile, but there are no handles on the prepublish panel children.
.editor-post-publish-panel__prepublish > .components-panel__body:nth-child(n+6) {
@include grey-out-outer;

* {
@include grey-out-inner;
}
}
}