Toggle Distributor controls when post status changes #1022

ggutenberg · 2023-03-02T16:58:42Z

Description of the Change

Renders the Distributor element in the admin bar whether the post status is distributable or not. If it's not, the element is hidden by CSS. When the post status becomes distributable, the element is displayed.

Also adds a watch command to the npm scripts.

Closes #141

How to test the Change

Edit a Draft post. Note that the Distributor button in the admin bar is not available, and the Distributor element in the Inspector says "Distribution options available once published".
Publish the post. Note that the Distributor button in the admin bar is now available, and the Distributor element has a button to "Distribute page".
Reload the editor page. Note that the Distributor button in the admin bar is still available, as is the "Distribute page" button.
Click Switch to draft and unpublish the post. Note that the admin bar and Distributor Inspector element are as they were in step 1.

Changelog Entry

Changed - Toggles the Distributor admin bar element in Gutenberg based on the post status.

Credits

Props @ggutenberg

Checklist:

I agree to follow this project's Code of Conduct.
I have updated the documentation accordingly.
I have added tests to cover my change.
All new and existing tests pass.

peterwilsoncc

I've added a few notes. the main item that needs improvement is to prevent the errors on the new post screen.

When hacking the syndicatable() function to test this out (by adding return true at the start ;) I noticed that the post title needs to be updated via JavaScript too.

The UI shows the post title on page load rather than the post title at publication. In this screen shot it shows as "Auto Draft" as that's the default title WP uses.

peterwilsoncc · 2023-03-03T02:23:55Z

package.json

@@ -37,6 +37,7 @@
 	},
 	"scripts": {
 		"build": "wp-scripts build",
+		"watch": "wp-scripts build --watch",


The start script on line 54 already does this (wp-scripts start being an alias).

Did you add this because watch is a more common name than start? I've been considering the same because it's a more common name.

Ah, I didn't realize start does the same thing. I did a search in package.json for the word watch and couldn't find anything, so I added it.

Do you want me to remove this or alias it to npm run start?

Do you want me to remove this or alias it to npm run start?

Let's remove it for now. I'll review our other open-source plugins for the common names, whether it be dev, watch or something else.

includes/push-ui.php

assets/js/gutenberg-plugin.js

peterwilsoncc

I think this is really close, just a few things I've noticed.

Instead of using dtGutenberg to store the title, use the dt object. That's available wherever the admin bar is: classic editor, block editor and on the front end.

I've pushed 3367955 to include the page title at load in the dt object, that will ensure it's present for the front end and the classic editor.

I noticed on the classic editor, the menu bar shows and allows a user to distribute a draft.

For the classic editor, I think we'll need to do something to prevent the Distributor menu from displaying on unpublished posts (the classic editor uses a full refresh) so it can be hidden. Maybe check use_block_editor_for_post(). You'll need to confirm the classic-editor-remember meta data has been added to the auto-draft at that point.

I'm trying to figure out if we'll need to protect against users unhiding the menu bar in Gutenberg and pushing a draft/non-distributable status to another site. Unfortunately, I haven't been able to figure out how we might go about this.

Thanks for the progress so far, it's looking really nice.

peterwilsoncc · 2023-03-06T00:34:40Z

assets/js/gutenberg-plugin.js

+		select( 'core/editor' ).getCurrentPost()
+	);
+	// Make the post title available to the top menu.
+	dtGutenberg.postTitle = post.title;


Suggested change

dtGutenberg.postTitle = post.title;

dt.postTitle = post.title;

This is strange. If I modify the const { document, dtGutenberg, MouseEvent } = window; line and change it to const { document, dtGutenberg, MouseEvent, dt } = window;, dt is undefined. However if I don't make that modification I'm able to reference it in code directly via dt.postTitle or window.dt.postTitle. Going with window.dt.postTitle for now as it's more explicit and doesn't require an eslint exception, but please let me know if you have a better suggestion.

peterwilsoncc · 2023-03-06T00:35:04Z

assets/js/push.js

+		// If the post title has changed, we need to reload the template.
+		if (
+			distributorPushWrapper.classList.contains( 'loaded' ) &&
+			dtGutenberg.postTitle === dtGutenberg.previousPostTitle


Suggested change

dtGutenberg.postTitle === dtGutenberg.previousPostTitle

dt.postTitle === dt.previousPostTitle

peterwilsoncc · 2023-03-06T00:35:17Z

assets/js/push.js

 			return;
 		}
+		dtGutenberg.previousPostTitle = dtGutenberg.postTitle;


Suggested change

dtGutenberg.previousPostTitle = dtGutenberg.postTitle;

dt.previousPostTitle = dt.postTitle;

peterwilsoncc · 2023-03-06T00:35:32Z

assets/js/push.js

@@ -394,13 +399,15 @@ jQuery( window ).on( 'load', () => {
 							connections: mustacheData.connections,
 							foundConnections: mustacheData.connections.length,
 							showSearch: 5 < mustacheData.connections.length,
+							postTitle: dtGutenberg.postTitle,


Suggested change

postTitle: dtGutenberg.postTitle,

postTitle: dt.postTitle,

peterwilsoncc · 2023-03-06T00:35:42Z

assets/js/push.js

 						}
 					);

 					setDisabledConnections();
 				} else {
 					distributorPushWrapper.innerHTML = template( {
 						connections: dtConnections,
+						postTitle: dtGutenberg.postTitle,


Suggested change

postTitle: dtGutenberg.postTitle,

postTitle: dt.postTitle,

ggutenberg · 2023-03-06T22:35:52Z

@peterwilsoncc

You'll need to confirm the classic-editor-remember meta data has been added to the auto-draft at that point.

Are you referring to the draft created on the source side, or on the target side? I've done some digging and familiarized myself with the Classic Editor plugin and how it uses this metadata, but am still unsure what the goal of this requirement is.

peterwilsoncc · 2023-03-06T23:07:31Z

Are you referring to the draft created on the source side, or on the target side? I've done some digging and familiarized myself with the Classic Editor plugin and how it uses this metadata, but am still unsure what the goal of this requirement is.

I'm referring to the source site, so the check you pushed to syndicatable() looks correct but it could do with a comment.

This is strange. If I modify the const { document, dtGutenberg, MouseEvent } = window; line and change it to const { document, dtGutenberg, MouseEvent, dt } = window;, dt is undefined. However if I don't make that modification I'm able to reference it in code directly via dt.postTitle or window.dt.postTitle.

It looks like the dt-push script is enqueued after the dt-gutenberg-syndicated-post script. You might need to force the order by adding dt-push as a dependency if it doesn't cause any problems:

$asset_file = DT_PLUGIN_PATH . '/dist/js/gutenberg-syndicated-post.min.asset.php';
// Fallback asset data.
$asset_data = array(
	'version'      => DT_VERSION,
	'dependencies' => array(),
);
if ( file_exists( $asset_file ) ) {
	$asset_data = require $asset_file;
}
$asset_data['dependencies'][] = 'dt-push'; // NEW LINE.

wp_enqueue_script( 'dt-gutenberg-syndicated-post', plugins_url( '/dist/js/gutenberg-syndicated-post.min.js', __DIR__ ), $asset_data['dependencies'], $asset_data['version'], true );

ggutenberg · 2023-03-07T15:44:12Z

@peterwilsoncc Thanks. PR updated.

peterwilsoncc

Looks good to me, thanks so much for your patience over the last few days.

I took the liberty of pushing an E2E test in d9f355a to ensure the distributor panel works as expected.

As the block editors selectors change from time-to-time, it may fail in which case I will revert and merge the existing work as is.

…blish." This reverts commit d9f355a.

Toggle Distributor controls when post status changes

fd7761a

ggutenberg requested a review from a team as a code owner March 2, 2023 16:58

ggutenberg requested review from iamdharmesh and removed request for a team March 2, 2023 16:58

jeffpaul assigned ggutenberg Mar 2, 2023

jeffpaul requested a review from peterwilsoncc March 2, 2023 17:24

jeffpaul added this to the 2.0.0 milestone Mar 2, 2023

peterwilsoncc reviewed Mar 3, 2023

View reviewed changes

ggutenberg added 2 commits March 3, 2023 09:59

Address PR comments

f384c5d

Update post title in top menu when it changes

8a66886

ggutenberg requested a review from peterwilsoncc March 3, 2023 15:45

Include the original post title when loading pages.

3367955

peterwilsoncc reviewed Mar 6, 2023

View reviewed changes

Address PR comments

f538b9d

ggutenberg requested a review from peterwilsoncc March 6, 2023 22:37

ggutenberg and others added 2 commits March 7, 2023 10:41

Make dt a dependency of dtGutenberg

e66b2f8

Merge branch 'develop' into feature/toggle-controls-on-status-change

b0aa889

Add test to ensure the button distributor panel toggles on publish.

d9f355a

peterwilsoncc previously approved these changes Mar 8, 2023

View reviewed changes

Revert "Add test to ensure the button distributor panel toggles on pu…

9031503

…blish." This reverts commit d9f355a.

peterwilsoncc dismissed their stale review via 9031503 March 8, 2023 04:29

peterwilsoncc approved these changes Mar 8, 2023

View reviewed changes

peterwilsoncc merged commit db587b0 into develop Mar 8, 2023

peterwilsoncc deleted the feature/toggle-controls-on-status-change branch March 8, 2023 04:37

peterwilsoncc mentioned this pull request Mar 8, 2023

Tweak: create pot file with WP CLI and move translations to JS files #1014

Merged

5 tasks

peterwilsoncc mentioned this pull request Jul 14, 2023

Store and update post status in dt object. #1114

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Toggle Distributor controls when post status changes #1022

Toggle Distributor controls when post status changes #1022

ggutenberg commented Mar 2, 2023

peterwilsoncc left a comment

peterwilsoncc Mar 3, 2023

ggutenberg Mar 3, 2023 •

edited

Loading

peterwilsoncc Mar 6, 2023

peterwilsoncc left a comment

peterwilsoncc Mar 6, 2023

ggutenberg Mar 6, 2023

peterwilsoncc Mar 6, 2023

peterwilsoncc Mar 6, 2023

peterwilsoncc Mar 6, 2023

peterwilsoncc Mar 6, 2023

ggutenberg commented Mar 6, 2023

peterwilsoncc commented Mar 6, 2023

ggutenberg commented Mar 7, 2023

peterwilsoncc left a comment

	dtGutenberg.postTitle = post.title;
	dt.postTitle = post.title;

	dtGutenberg.postTitle === dtGutenberg.previousPostTitle
	dt.postTitle === dt.previousPostTitle

	dtGutenberg.previousPostTitle = dtGutenberg.postTitle;
	dt.previousPostTitle = dt.postTitle;

Toggle Distributor controls when post status changes #1022

Toggle Distributor controls when post status changes #1022

Conversation

ggutenberg commented Mar 2, 2023

Description of the Change

How to test the Change

Changelog Entry

Credits

Checklist:

peterwilsoncc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ggutenberg Mar 3, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

peterwilsoncc left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ggutenberg commented Mar 6, 2023

peterwilsoncc commented Mar 6, 2023

ggutenberg commented Mar 7, 2023

peterwilsoncc left a comment

Choose a reason for hiding this comment

ggutenberg Mar 3, 2023 •

edited

Loading