Display a welcome notice on the main 'AMP Settings' page #1442

kienstra · 2018-09-18T02:29:08Z

Adds a placeholder notice to the 'AMP Settings' page, until the copy is available
Once the user dismisses this, it will never appear again

@todo

@todo: Add the full copy for this notice when it is decided. Once this notice is dismissed, it won't display again.

That notice is important also, but the welcome notice will only appear until it is dismissed.

kienstra · 2018-09-18T02:45:17Z

includes/options/class-amp-options-manager.php

+
+		$notice_id = 'welcome-notice-1';
+		$dismissed = get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true );
+		if ( in_array( $notice_id, explode( ',', strval( $dismissed ) ), true ) ) {


Question About Admin Pointer User Meta

Hi @westonruter,
What do you think about how this uses the user meta for admin pointers to keep track of whether this notice was dismissed?

This is very similar to how this admin pointer PR does this.

Of course, this isn't actually an admin pointer, so it's not ideal.

But this is a little simpler, as it can reuse the dismiss-wp-pointer action handler when the user dismisses it.

Thanks, Weston!

My main concern is what happens over time. If each new version of the plugin will include new information that is shown in this message, then the dismissed_wp_pointers usermeta will grow endlessly.

You could instead consider what was added for the Try Gutenberg screen:

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/js/dashboard.js#L34-L75

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/includes/ajax-actions.php#L1487-L1498

But maybe this is all overkill. For a one-off, I don't see a reason why to not use the admin-pointers. They're being used for non-pointer things already, including the theme and plugin editor warnings:

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/plugin-editor.php#L282-L294

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/theme-editor.php#L301-L313

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/js/theme-plugin-editor.js#L134-L150

So I'd say go ahead with pointers.

When it was called for the second time, it was empty. So simply store it in a variable.

westonruter · 2018-09-18T03:33:27Z

includes/options/class-amp-options-manager.php

+			return;
+		}
+
+		$notice_id = 'welcome-notice-1';


This should have some amp prefix.

Good point. 8f02acf#diff-6dc720c5e5352d31e656ef4973984528R344 makes this amp-welcome-notice-1

westonruter · 2018-09-18T03:35:13Z

includes/options/class-amp-options-manager.php

+		( function( $ ) {
+			$( function() {
+				// On dismissing the notice, make a POST request to store this notice with the dismissed WP pointers so it doesn't display again.
+				$( document ).on( 'click', '#<?php echo $notice_id; // WPCS: XSS OK. ?> .notice-dismiss', function() {


Instead of: '#<?php echo $notice_id; // WPCS: XSS OK. ?> .notice-dismiss'
Do this: <?php echo wp_json_encode( "#$notice_id .notice-dismiss" ); ?>

Thanks, 8f02acf#diff-6dc720c5e5352d31e656ef4973984528R357 applies your suggestion.

westonruter · 2018-09-18T03:35:44Z

includes/options/class-amp-options-manager.php

+				$( document ).on( 'click', '#<?php echo $notice_id; // WPCS: XSS OK. ?> .notice-dismiss', function() {
+					console.log( 'clicked' );
+					$.post( ajaxurl, {
+						pointer: '<?php echo $notice_id; // WPCS: XSS OK. ?>',


As above, better to do pointer: <?php echo wp_json_encode( $notice_id ); ?>,

Thanks, 8f02acf#diff-6dc720c5e5352d31e656ef4973984528R360 applies your snippet.

westonruter · 2018-09-18T03:47:59Z

includes/options/class-amp-options-manager.php

+
+		$notice_id = 'welcome-notice-1';
+		$dismissed = get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true );
+		if ( in_array( $notice_id, explode( ',', strval( $dismissed ) ), true ) ) {


My main concern is what happens over time. If each new version of the plugin will include new information that is shown in this message, then the dismissed_wp_pointers usermeta will grow endlessly.

You could instead consider what was added for the Try Gutenberg screen:

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/js/dashboard.js#L34-L75

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/includes/ajax-actions.php#L1487-L1498

But maybe this is all overkill. For a one-off, I don't see a reason why to not use the admin-pointers. They're being used for non-pointer things already, including the theme and plugin editor warnings:

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/plugin-editor.php#L282-L294

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/theme-editor.php#L301-L313

https://github.com/WordPress/wordpress-develop/blob/5d477aa70613850a2e78cdaecb7e2de365de7134/src/wp-admin/js/theme-plugin-editor.js#L134-L150

So I'd say go ahead with pointers.

On Weston's suggestion, as this is more secure.

…ething The copy can still change, but this now has Leo's copy for all 3 template modes.

…aves something" This is intended for Issue 1399, and I meant to commit this to a separate branch for that. This reverts commit 3ec5334.

westonruter · 2018-09-18T18:40:36Z

includes/options/class-amp-options-manager.php

+		( function( $ ) {
+			$( function() {
+				// On dismissing the notice, make a POST request to store this notice with the dismissed WP pointers so it doesn't display again.
+				$( document ).on( 'click', <?php echo wp_json_encode( "#$notice_id .notice-dismiss" ); ?>, function() {


Another point, this code is using event delegation when it doesn't need to. It should instead just be:

$( <?php echo wp_json_encode( "#$notice_id .notice-dismiss" ); ?> ).on( 'click', function() {...});

Hi Weston, good point.

But it looks like the button.notice-dismiss might be created with JS when the is-dismissible class is present, and might not yet exist at the time the <script> above runs.

<button type="button" class="notice-dismiss">

So the click handler with that selector doesn't run.

Maybe if this script ran later, the button.notice-dismiss would be present.

ok, that makes sense

At least we can do this:

$( <?php echo wp_json_encode( "#$notice_id" ); ?> ).on( 'click', '.notice-dismiss', function() {

That will scope the delegated event to the containing element.

Also, add an icon in the top left. And copy the styling for this icon, slightly modifiying it. Like the margin: 5px;

kienstra · 2018-09-19T00:52:38Z

Notice Copy Applied
6e9a09e applies the notice copy from #1381 (comment):

kienstra · 2018-09-19T00:56:36Z

includes/options/class-amp-options-manager.php

+			<span class="amp-logo-icon"></span>
+			<h1><?php esc_html_e( 'Welcome to the AMP for WordPress plugin v1.0', 'amp' ); ?></h1>
+			<p><?php esc_html_e( 'Thank you for installing! Bring the speed and features of the open source AMP project to your site, the WordPress way, complete with the tools to support content authoring and website development.', 'amp' ); ?></p>
+			<h2><?php esc_html_e( 'What&#39;s New', 'amp' ); ?></h2>


The ' character here might not be the best way to render the '

That's right. It should be ’ instead.

kienstra · 2018-09-19T00:59:20Z

Request For Another Round Of Review

Hi @westonruter,
Could you please have another look at this PR, especially the latest commit that applies the notice copy?

Thanks, Weston!

kienstra · 2018-09-19T01:01:03Z

'Thank you for installing!' text

Ideally, this would display 'Thank you for installing!' only on installing v1.0, not upgrading from 0.7.2 to this.

* Refactor jQuery ready call. * Remove debug code. * Use regular img element for SVG as opposed to background image. * Use curly quote instead of straight apostrophe. * Improve event delegation.

westonruter · 2018-09-19T05:36:55Z

includes/options/class-amp-options-manager.php

+			<span class="amp-logo-icon"></span>
+			<h1><?php esc_html_e( 'Welcome to the AMP for WordPress plugin v1.0', 'amp' ); ?></h1>
+			<p><?php esc_html_e( 'Thank you for installing! Bring the speed and features of the open source AMP project to your site, the WordPress way, complete with the tools to support content authoring and website development.', 'amp' ); ?></p>
+			<h2><?php esc_html_e( 'What&#39;s New', 'amp' ); ?></h2>


That's right. It should be ’ instead.

westonruter · 2018-09-19T05:38:20Z

includes/options/class-amp-options-manager.php

+		( function( $ ) {
+			$( function() {
+				// On dismissing the notice, make a POST request to store this notice with the dismissed WP pointers so it doesn't display again.
+				$( document ).on( 'click', <?php echo wp_json_encode( "#$notice_id .notice-dismiss" ); ?>, function() {


At least we can do this:

$( <?php echo wp_json_encode( "#$notice_id" ); ?> ).on( 'click', '.notice-dismiss', function() {

That will scope the delegated event to the containing element.

westonruter · 2018-09-19T05:39:59Z

includes/options/class-amp-options-manager.php

+
+		<style>
+			.amp-logo-icon {
+				background-image: url( "<?php echo esc_url( amp_get_asset_url( 'images/amp-logo-icon.svg' ) ); ?>" );


HTML entities don't render properly inside of CSS. So best to just remove esc_url() I believe.

westonruter · 2018-09-19T05:40:33Z

includes/options/class-amp-options-manager.php

+			$( function() {
+				// On dismissing the notice, make a POST request to store this notice with the dismissed WP pointers so it doesn't display again.
+				$( document ).on( 'click', <?php echo wp_json_encode( "#$notice_id .notice-dismiss" ); ?>, function() {
+					console.log( 'clicked' );


Debug code to be removed.

Oh, wow. That shouldn't have been there.

westonruter · 2018-09-19T05:41:05Z

includes/options/class-amp-options-manager.php

+
+		<script>
+		( function( $ ) {
+			$( function() {


This function should be combined with its parent function:

jQuery( function( $ ) { /* ... */ } );

westonruter · 2018-09-19T05:44:35Z

includes/options/class-amp-options-manager.php

+
+		?>
+		<div class="notice notice-info is-dismissible" id="<?php echo esc_attr( $notice_id ); ?>">
+			<span class="amp-logo-icon"></span>


I think this should just be a regular img.

jwold · 2018-09-20T03:30:33Z

@kienstra

I'd like to suggest the following changes to the welcome banner (note that I changed a few lines of text as well). What do you think?

And the icon:

icon.svg.zip

cc @postphotos

jwold · 2018-09-20T03:31:20Z

Going to actually post this to 1381, since that's the real issue :)

Output a placeholder notice on the main 'AMP Settings' page

c4bacac

@todo: Add the full copy for this notice when it is decided. Once this notice is dismissed, it won't display again.

kienstra mentioned this pull request Sep 18, 2018

Implement settings splash notice #1381

Closed

6 tasks

Move welcome notice above persistent object caching notice

3081d6e

That notice is important also, but the welcome notice will only appear until it is dismissed.

kienstra commented Sep 18, 2018

View reviewed changes

Address Travis error by storing ob_get_clean() in variable

84df779

When it was called for the second time, it was empty. So simply store it in a variable.

westonruter reviewed Sep 18, 2018

View reviewed changes

kienstra added 3 commits September 18, 2018 01:23

Prefix notice ID, use wp_json_encode to in script

8f02acf

On Weston's suggestion, as this is more secure.

Replace the 'Settings saved' notice the first time the user saves som…

3ec5334

…ething The copy can still change, but this now has Leo's copy for all 3 template modes.

Revert "Replace the 'Settings saved' notice the first time the user s…

10b5b5f

…aves something" This is intended for Issue 1399, and I meant to commit this to a separate branch for that. This reverts commit 3ec5334.

westonruter reviewed Sep 18, 2018

View reviewed changes

Add the message copy from Issue 1381

6e9a09e

Also, add an icon in the top left. And copy the styling for this icon, slightly modifiying it. Like the margin: 5px;

kienstra commented Sep 19, 2018

View reviewed changes

westonruter self-requested a review September 19, 2018 04:08

westonruter changed the title ~~[WIP] Display a welcome notice on the main 'AMP Settings' page~~ Display a welcome notice on the main 'AMP Settings' page Sep 19, 2018

Apply code review feedback for welcome message

1d231bb

* Refactor jQuery ready call. * Remove debug code. * Use regular img element for SVG as opposed to background image. * Use curly quote instead of straight apostrophe. * Improve event delegation.

westonruter reviewed Sep 19, 2018

View reviewed changes

westonruter approved these changes Sep 19, 2018

View reviewed changes

westonruter added this to the v1.0 milestone Sep 19, 2018

westonruter merged commit 808a8da into develop Sep 19, 2018

westonruter deleted the add/1381-settings-notice branch September 19, 2018 06:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Display a welcome notice on the main 'AMP Settings' page #1442

Display a welcome notice on the main 'AMP Settings' page #1442

kienstra commented Sep 18, 2018

kienstra Sep 18, 2018 •

edited

Loading

westonruter Sep 18, 2018

westonruter Sep 18, 2018

kienstra Sep 18, 2018

westonruter Sep 18, 2018

kienstra Sep 18, 2018

westonruter Sep 18, 2018

kienstra Sep 18, 2018

westonruter Sep 18, 2018

westonruter Sep 18, 2018

kienstra Sep 18, 2018 •

edited

Loading

westonruter Sep 18, 2018

westonruter Sep 19, 2018

kienstra commented Sep 19, 2018

kienstra Sep 19, 2018 •

edited

Loading

westonruter Sep 19, 2018

kienstra commented Sep 19, 2018

kienstra commented Sep 19, 2018 •

edited

Loading

westonruter Sep 19, 2018

westonruter Sep 19, 2018

westonruter Sep 19, 2018

westonruter Sep 19, 2018

kienstra Sep 19, 2018

westonruter Sep 19, 2018

westonruter Sep 19, 2018

jwold commented Sep 20, 2018

jwold commented Sep 20, 2018

Display a welcome notice on the main 'AMP Settings' page #1442

Display a welcome notice on the main 'AMP Settings' page #1442

Conversation

kienstra commented Sep 18, 2018

kienstra Sep 18, 2018 • 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

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

kienstra Sep 18, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra commented Sep 19, 2018

kienstra Sep 19, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra commented Sep 19, 2018

kienstra commented Sep 19, 2018 • 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jwold commented Sep 20, 2018

jwold commented Sep 20, 2018

kienstra Sep 18, 2018 •

edited

Loading

kienstra Sep 18, 2018 •

edited

Loading

kienstra Sep 19, 2018 •

edited

Loading

kienstra commented Sep 19, 2018 •

edited

Loading