Add Gutenberg prepublish panel to Autotweet post #44

johnwatkins0 · 2019-09-17T23:17:31Z

This is intended to resolve #13. ~~It depends on #37.~~

Description of the Change

This adds a PrePublishPanel to the Gutenberg editor when the user is working on a new post in a post type supporting autotweet.

While publishing, the user sees:

After publication, we also add a PostStatusInfo message resembling the message that shown in the pre-Gutenberg implementation:

Alternate Designs

Although #13 mentions PluginPostPublishPanel, I instead used Plugin*Pre*PublishPanel because the pre-publish panel allows us to re-use most of the existing backend code. The existing backend code sends the Tweet on post save; for a post-publish panel, we might have to create a whole different REST endpoint to handle a separate request to publish the post.

I also subjectively feel the prepublish panel is a better UX because it allows the user to think about the tweet along with the post content rather than as an afterthought. If there is a good reason to use PluginPostPublishPanel, however, the work in this PR would not need to be adjusted very much.

Benefits

Pre-5.0 functionality provided by this plugin is now provided via the Gutenberg editor.

Possible Drawbacks

A few things have come up that I believe should be added as to-dos for the next release:

After publication, there is no way to Tweet a post if a user initially opted out of tweeting or accidentally neglected to tweet.
There is also no way to Tweet a post that was already Tweeted, which it's possible to imagine some users wanting to do.
A user creating a new post doesn't see anything Autotweet-related until after clicking the Publish button, which could be confusing for new plugin users.

Verification Process

Verify that existing functionality still works when using a pre-Gutenberg version of WordPress
Using the Gutenberg editor, create a new post of a post type supporting Autotweet
When publishing a post, look for the prepublish panel related to Autotweet.
Opt in to autotweet. Override the message if desired
Verify that featured images are included in all scenarios
After publishing the post (both with and without tweeting the post), verify that the appropriate post status info message shows

Checklist:

I have read the CONTRIBUTING document.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added tests to cover my change.
All new and existing tests passed.

Changelog Entry

Adds Autotweet functionality to the Gutenberg editor.

johnwatkins0 · 2019-09-17T23:18:47Z

package.json

@@ -4,7 +4,7 @@
 	"description": "Automatically tweets a post title, URL, and optional description.",
 	"scripts": {
 		"watch": "webpack -wd",
-		"build": "webpack -p",
+		"build": "webpack src/js/externals/api-fetch.js -o dist/api-fetch.js -p --module-bind js=babel-loader && webpack -p --config webpack.gutenberg.config.js",


Building the external api-fetch script via webpack CLI.

can we add a separate build:externals command, and keep the main build simpler? We would ideally store this in a more persistent externals output location and only rebuild when a new version of some external package is released.

johnwatkins0 · 2019-09-17T23:19:44Z

src/js/index.js

+const AutotweetPrePublishPanelPlugin = () => {
+	const [ enabledText, setEnabledText ] = useState( '' );
+
+	useEffect( () => {


Do we need to use class components for the earlier 5.* WP versions that don't have React with hooks?

Right, we do need to make this work with WP 5.0 & 5.1 for now, which means classes for state.

adamsilverstein · 2019-09-23T19:58:34Z

@johnwatkins0 Thank you for the work here! A few notes:

After publication, there is no way to Tweet a post if a user initially opted out of tweeting or accidentally neglected to tweet.

Would changing the status to draft then re-publishing give you that opportunity?

There is also no way to Tweet a post that was already Tweeted, which it's possible to imagine some users wanting to do.

Outside the scope of this issue

PluginPrePublishPanel

Yes, this makes more sense. Thanks.

I am going to do more testing with this. Some initial feedback:

I am prevented from typing more than 280 characters. Instead lets match the existing behavior: turn the counter red. It may be better to prevent typing more as you have it, so lets open a separate issue to discuss that and hopefully get some UX feedback (the whole counter component needs some refinement). cc: @oszkarnagy
the counter number needs a little whitespace to its left after the colon:

adamsilverstein · 2019-09-23T21:14:58Z

src/js/store/index.js

+export const STORE = '10up/autotweet';
+
+export function createAutotweetStore() {
+	const store = registerStore( STORE, { reducer, actions, selectors } );


adamsilverstein · 2019-09-23T21:16:37Z

tests/phpunit/integration/TestPostMeta.php

+		$failed_filter = function( $data, $id, $key ) use ( $post ) {
+			if ( intval( $post ) === intval( $id ) && $key === TWITTER_STATUS_KEY ) {
+				return [
+					'status'     => 'error',


nitpick: extra space here before ->

adamsilverstein · 2019-09-23T21:16:43Z

tests/phpunit/integration/TestPostMeta.php

+		$unknown_filter = function( $data, $id, $key ) use ( $post ) {
+			if ( intval( $post ) === intval( $id ) && $key === TWITTER_STATUS_KEY ) {
+				return [
+					'status'     => 'unknown',


adamsilverstein · 2019-09-23T21:16:51Z

tests/phpunit/integration/TestPostMeta.php

+		$other_filter = function( $data, $id, $key ) use ( $post ) {
+			if ( intval( $post ) === intval( $id ) && $key === TWITTER_STATUS_KEY ) {
+				return [
+					'status'     => 'other',


adamsilverstein · 2019-09-23T21:17:37Z

tests/phpunit/integration/TestPostMeta.php

@@ -0,0 +1,112 @@
+<?php
+/**
+ * Tests functions admin/post-meta.php.


Nice, thanks for adding these tests.

adamsilverstein · 2019-09-23T21:20:56Z

It would be great to display a confirmation and link to the tweet when a post is tweeted in the post publication section:

adamsilverstein · 2019-09-23T21:24:15Z

Note trying to tweet with the text field full it failed:

adamsilverstein · 2019-09-23T21:26:52Z

A user creating a new post doesn't see anything Autotweet-related until after clicking the Publish button, which could be confusing for new plugin users.

Another good follow up issue: might be as simple as adding a Gutenberg section in the Readme.

adamsilverstein · 2019-09-27T13:47:05Z

src/js/externals/api-fetch.js

@@ -1,3 +1,3 @@
 import apiFetch from '@wordpress/api-fetch';

-wp.apiFetch = apiFetch;
+global.wp.apiFetch = apiFetch;


why is global needed here?

It's not. I left it there by accident. Removing it.

adamsilverstein · 2019-09-27T13:49:09Z

webpack.gutenberg.config.js

+		filename: '[name].js',
+		path: path.resolve( './dist' ),
+	},
+	externals: {


adamsilverstein · 2019-09-27T13:49:48Z

@johnwatkins0 Excellent! This is looking really good.

Reusing the PluginPostStatusInfo is perfect and it makes sense that it would work here.

I left a few small comments/questions and am going to test this locally then will approve.

adamsilverstein · 2019-09-27T14:01:00Z

src/js/AutotweetPrePublishPanel.js

+								label={
+									<span className="autotweet-prepublish__message-label">
+										<span>{ __( 'Custom message:', 'autotweet' ) }</span>
+										<span id="tenup-auto-tweet-counter-wrap" className={ overrideLengthClass() }>{ tweetText.length }</span>


The space is collapsing between the text and the count. (https://cl.ly/4f04884a8b03) fix by keeping closing span and opening span on same line with space (</span> <span>...)

I struggled with this a bit trying to make this suggestion work, and ended up using   inside the first span.

that works! React loves to collapse whitespace, it usually preserves it if on the same line.

adamsilverstein · 2019-09-27T14:03:38Z

assets/css/admin-auto_tweet.css

@@ -52,6 +94,11 @@ span#tenup-auto-tweet-counter-wrap{
 	background: rgba(0, 0, 0, 0.07);
 	font-family: Consolas, Monaco, monospace;
 }
+
+span.near-limit{
+	color: orange;


improve the contrast, orange was hard to see

Suggested change

color: orange;

color: darkorange;

adamsilverstein · 2019-09-27T14:20:19Z

src/js/AutotweetPrePublishPanel.js

+		// and save data when they update.
+		this.state = { autotweetEnabled: null, tweetText: null };
+
+		this.saveData = debounce( this.saveData.bind( this ), 1000 );


Let's lower the debounce to 250. I was able to click the tweet this checkbox then the publish button in under a second and the post didn't publish :) https://cl.ly/6ac0e9399675

Suggested change

this.saveData = debounce( this.saveData.bind( this ), 1000 );

this.saveData = debounce( this.saveData.bind( this ), 250 );

adamsilverstein

Excellent work here @johnwatkins0 - this is looking really good and worked well in my testing. I left a few small core change requests, once these are in I will approve for merge!

johnwatkins0 · 2019-09-27T15:16:28Z

@adamsilverstein Thanks @adamsilverstein . Pushed a few very tiny commits based on your most recent round of feedback. Let me know if you see anything else.

johnwatkins0 · 2019-09-27T16:09:08Z

I'll look at those conflicts.

johnwatkins0 · 2019-09-27T16:39:46Z

@adamsilverstein I've fixed the conflicts following the merging of #42

includes/utils.php

adamsilverstein

Fantastic!

johnwatkins0 added 9 commits September 13, 2019 16:55

Set up Gutberg app

1d87568

Merge branch 'develop' into feature/publish-panel

4a9ec24

Autotweet prepublish panel

c8654ee

Merge branch 'feature/tweet-image' into feature/publish-panel

b7686af

Set autotweet status from REST field so it will update on save post

62a69b7

Typo fix

1978e54

Build external via wp-cli

4ad5577

Re-set api-fetch version

02a7f94

Clarify comment

9d8b68f

johnwatkins0 commented Sep 17, 2019

View reviewed changes

jeffpaul assigned johnwatkins0 Sep 17, 2019

jeffpaul added the type:enhancement New feature or request. label Sep 17, 2019

jeffpaul added this to the 1.0.0 milestone Sep 17, 2019

jeffpaul requested a review from adamsilverstein September 17, 2019 23:21

johnwatkins0 added 5 commits September 17, 2019 23:01

Add webpack config option to watch script

f12183e

Replace console log with proper error handling

5d1f416

Remove irrelevant comment

c9d0665

Make function name and comment more accurate

997855e

Fix typo

08750e3

adamsilverstein reviewed Sep 23, 2019

View reviewed changes

Merge branch 'feature/tweet-image' into feature/publish-panel

0330f00

adamsilverstein reviewed Sep 27, 2019

View reviewed changes

webpack.gutenberg.config.js

filename: '[name].js',

path: path.resolve( './dist' ),

},

externals: {

Copy link

adamsilverstein Sep 27, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent!

adamsilverstein reviewed Sep 27, 2019

View reviewed changes

adamsilverstein self-requested a review September 27, 2019 14:20

adamsilverstein suggested changes Sep 27, 2019

View reviewed changes

johnwatkins0 added 6 commits September 27, 2019 09:45

Remove -js from autotweet pot file

223c5c9

CSS style fixes

dcdc50b

Restore whitespace line

8579c54

Convert ellipsis to …

bb44262

Change orange to darkorange

b86952c

Initialize state in componentDidMount

76b6d61

adamsilverstein mentioned this pull request Sep 27, 2019

Prep for 1.0.0 release #34

Merged

12 tasks

johnwatkins0 added 3 commits September 27, 2019 10:07

Use   for space separating two spans

69c378b

Remove global when setting apiFetch on wp object

9cd68de

Restore ellipsis

90eae3e

johnwatkins0 added 2 commits September 27, 2019 11:09

Merge branch 'develop' of https://github.com/10up/autotweet into develop

8c01085

Merge branch 'develop' into feature/publish-panel

f10021a

johnwatkins0 requested a review from adamsilverstein September 27, 2019 16:40

adamsilverstein reviewed Sep 27, 2019

View reviewed changes

includes/utils.php Show resolved Hide resolved

Update includes/utils.php

db8cbac

adamsilverstein approved these changes Sep 27, 2019

View reviewed changes

johnwatkins0 merged commit 77c22e6 into develop Sep 27, 2019

johnwatkins0 deleted the feature/publish-panel branch September 27, 2019 18:48

jeffpaul mentioned this pull request Oct 31, 2019

Improve meta box message UI [2 hrs.] #11

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Gutenberg prepublish panel to Autotweet post #44

Add Gutenberg prepublish panel to Autotweet post #44

johnwatkins0 commented Sep 17, 2019 •

edited

Loading

johnwatkins0 Sep 17, 2019

adamsilverstein Sep 23, 2019

johnwatkins0 Sep 17, 2019

adamsilverstein Sep 23, 2019

adamsilverstein commented Sep 23, 2019

adamsilverstein Sep 23, 2019

adamsilverstein Sep 23, 2019

adamsilverstein Sep 23, 2019

adamsilverstein Sep 23, 2019

adamsilverstein Sep 23, 2019

adamsilverstein commented Sep 23, 2019

adamsilverstein commented Sep 23, 2019

adamsilverstein commented Sep 23, 2019

adamsilverstein Sep 27, 2019

johnwatkins0 Sep 27, 2019

adamsilverstein Sep 27, 2019

adamsilverstein commented Sep 27, 2019

adamsilverstein Sep 27, 2019 •

edited

Loading

johnwatkins0 Sep 27, 2019

adamsilverstein Sep 27, 2019

adamsilverstein Sep 27, 2019

adamsilverstein Sep 27, 2019

adamsilverstein left a comment

johnwatkins0 commented Sep 27, 2019

johnwatkins0 commented Sep 27, 2019

johnwatkins0 commented Sep 27, 2019

adamsilverstein left a comment

	this.saveData = debounce( this.saveData.bind( this ), 1000 );
	this.saveData = debounce( this.saveData.bind( this ), 250 );

Add Gutenberg prepublish panel to Autotweet post #44

Add Gutenberg prepublish panel to Autotweet post #44

Conversation

johnwatkins0 commented Sep 17, 2019 • edited Loading

Description of the Change

Alternate Designs

Benefits

Possible Drawbacks

Verification Process

Checklist:

Changelog Entry

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

adamsilverstein commented Sep 23, 2019

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

adamsilverstein commented Sep 23, 2019

adamsilverstein commented Sep 23, 2019

adamsilverstein commented Sep 23, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adamsilverstein commented Sep 27, 2019

adamsilverstein Sep 27, 2019 • edited Loading

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

adamsilverstein left a comment

Choose a reason for hiding this comment

johnwatkins0 commented Sep 27, 2019

johnwatkins0 commented Sep 27, 2019

johnwatkins0 commented Sep 27, 2019

adamsilverstein left a comment

Choose a reason for hiding this comment

johnwatkins0 commented Sep 17, 2019 •

edited

Loading

adamsilverstein Sep 27, 2019 •

edited

Loading