-
Notifications
You must be signed in to change notification settings - Fork 381
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
Improve URL Listing view #1397
Improve URL Listing view #1397
Conversation
|
||
if ( isset( $source['type'], $source['name'] ) ) { | ||
$invalid_sources[ $source['type'] ][] = $source['name']; | ||
foreach ( $sources['sources'] as $source ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
^ Changed this since the sources were not properly displaying in the table -- the type
and name
were never set since the actual structure of $validation_error
seems to be like this:
Meaning that the type
and name
would be set in $validation_error['sources']['sources'][0]
, not in $validation_error['sources']
.
However, this change broke the tests since the input data of test is assuming that a validation error looks like this instead:
Is the structure of validation error incorrect for some reason and it should be as assumed in the tests? Maybe the fix should be removing the second nested sources
instead, or is it like this for some reason? Thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @miina,
That's interesting. I couldn't reproduce that issue.
It looks like there aren't double-nested 'sources'
arrays, like in your first screenshot when I run the develop
branch:
Maybe the validation error data model changed.
It might help to delete all validation error posts and terms, and regenerate them (thanks to Weston, though I might not have copied it right):
wp post delete $(wp post list --post_type='amp_invalid_url' --format=ids)
wp term list amp_validation_error --field=term_id | xargs wp term delete amp_validation_error
You might already have some logic to output validation errors, but here's a simple plugin I've used (also partially copied from Weston)
And the WP-CLI script can then regenerate errors:
wp amp validate-site --limit=5
It look like there aren't double-nested 'source' arrays. So remove the nested foreach loop.
In the develop branch, filter_views_edit() is removed entirely, while it was simply edited in this branch: 1362-improved_url_listing_view So favor the develop branch, where it's removed.
For example, change 'To Fix Later' to 'Rejected'. Also, update the labels. I don't think all of them need to have 'Errors by URL', like 'No errors by URL found'.
Updates the unit tests to the latest changes They now pass locally.
The build failed, with: Equals sign not aligned with surrounding assignments. So address this by aligning the =
Request For Review Hi @westonruter, Thanks, Weston! |
} | ||
if ( isset( $sources['theme'] ) ) { | ||
$output[] = '<div class="source">'; | ||
$output[] = sprintf( '<span class="dashicons dashicons-admin-appearance"></span><strong>%s</strong>', esc_html( $sources['theme']['name'] ) ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm getting a PHP notice here:
The name isn't stored in the validation error (no should it be). The $sources['theme']
variable contains an array like [ 'twentyseventeen' ]
. So this should be looping over each $theme
and get wp_get_theme( $theme )->get('Name')
. If the theme does not exist, then the slug should be shown instead (and obviously the result is stale in this case).
} | ||
$output[] = '<div class="' . $sources_container_classes . '">'; | ||
$output[] = implode( '<br/>', array_unique( $sources['plugin'] ) ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should obtain the actual names of the plugins using get_plugin_data()
and getting the Name
returned. If the plugin doesn't exist then show the slug (and this result is obviously stale).
/** | ||
* Enqueue style. | ||
*/ | ||
public static function enqueue_admin_assets() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can this name be made more specific? There is enqueue_edit_post_screen_scripts
. So should it be enqueue_post_list_screen_scripts
?
assets/js/amp-admin-tables.js
Outdated
}, | ||
|
||
addViewErrorsByTypeLinkButton: function() { | ||
$( '.wp-heading-inline' ).after( '<a href="' + ampAdminTables.errorsByTypeLink + '" class="page-title-action">View errors by <strong>Type</strong></a>' ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This shouldn't be using string concatenation for constructing HTML. It would be preferable to do var link = $( '<a>...</a>' );
And then do link.prop('href', ampAdminTables.errorsByTypeLink).
assets/js/amp-admin-tables.js
Outdated
}, | ||
|
||
addViewErrorsByTypeLinkButton: function() { | ||
$( '.wp-heading-inline' ).after( '<a href="' + ampAdminTables.errorsByTypeLink + '" class="page-title-action">View errors by <strong>Type</strong></a>' ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The text here is not translatable. I suggest doing this: at the admin footer action whenever you are printing scripts, output right to the page the entire link tag with esc_url()
and esc_html_e()
and such. Give that link an ID and include a hidden
attribute. Then in this addViewErrorsByTypeLinkButton
function, just move the element in the DOM and remove the hidden
attribute.
assets/js/amp-admin-tables.js
Outdated
$( '.wp-heading-inline' ).after( '<a href="' + ampAdminTables.errorsByTypeLink + '" class="page-title-action">View errors by <strong>Type</strong></a>' ); | ||
}, | ||
|
||
boldURLInPageTitle: function() { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can remove this if we go with “Invalid URL” per Slack convo.
assets/js/amp-admin-tables.js
Outdated
( function( $ ) { | ||
'use strict'; | ||
|
||
var adminTables = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some of the code here might be duplicated with https://github.com/Automattic/amp-wp/blob/develop/assets/src/amp-validation-error-detail-toggle.js
Can we unify them?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@westonruter I started working on this but realized a dependency of the script you mentioned is wp-dom-ready
which is a part of Gutenberg. So this script doesn't load for me since on my test site Gutenberg is not activated. Are we assuming that everyone will have Gutenberg as well or why is this a dependency? Or did I miss something in the build process?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @westonruter and @jacobschweitzer,
Do you think we should add dom-ready
to package.json, like how i18n
is included there:
"@wordpress/dom-ready": "^2.0.0",
"@wordpress/i18n": "^1.1.0",
Still, npm run dev
seemed to build amp-validation-error-detail-toggle.js fine in my local, and that script ran without error on the 'AMP Validation Error Index' page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@kienstra I've added that line to package.json
and ran npm run build
/ npm run dev
but the script still won't load on the Error Index page. Am I missing something here? I did have to install webpack and wp-cli but I have those now so I'm not sure if there is another dependency I'm missing since there aren't any errors in the build process now.
@@ -286,25 +318,34 @@ public static function display_invalid_url_validation_error_counts_summary( $pos | |||
|
|||
$result = array(); | |||
if ( $counts['new'] ) { | |||
$result[] = esc_html( sprintf( | |||
if ( current_theme_supports( 'amp' ) && AMP_Validation_Manager::is_sanitization_forcibly_accepted() ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can probably remove current_theme_supports( 'amp' ) &&
AMP_Validation_Error_Taxonomy::REMOVED_ELEMENTS => esc_html__( 'Removed Elements', 'amp' ), | ||
AMP_Validation_Error_Taxonomy::REMOVED_ATTRIBUTES => esc_html__( 'Removed Attributes', 'amp' ), | ||
AMP_Validation_Error_Taxonomy::SOURCES_INVALID_OUTPUT => esc_html__( 'Incompatible Sources', 'amp' ), | ||
'error_status' => sprintf( '%s<span class="dashicons dashicons-editor-help"></span>', esc_html__( 'Status', 'amp' ) ), // @todo Create actual tooltip. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The 'error_status'
here can be replaced with the AMP_Validation_Error_Taxonomy::ERROR_STATUS
constant I believe.
/* translators: %s is count */ | ||
__( '❌ Rejected: %s', 'amp' ), | ||
__( '<span class="dashicons dashicons-warning rejected"></span><span class="error-status rejected">%1$s: %2$s</span>', 'amp' ), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think the span
shouldn't be included in the translation string.
__( '✅ Accepted: %s', 'amp' ), | ||
$result[] = sprintf( | ||
/* translators: 1. Title, 2. %s is count */ | ||
__( '<span class="amp-logo-icon"></span><span class="error-status accepted">%1$s: %2$s</span>', 'amp' ), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think the span
shouldn't be included in the translation string.
/* translators: %s is count */ | ||
__( '❓ New: %s', 'amp' ), | ||
__( '<span class="dashicons dashicons-%1$s identified"></span><span class="error-status identified">%2$s: %3$s</span>', 'amp' ), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think the span
shouldn't be included in the translation string.
@westonruter , @kienstra found that if you remove the Otherwise these changes are ready for review. Thanks @westonruter ! |
* Output theme name if available instead of theme slug. * Fix logic for obtaining plugin name when plugin is not in directory or plugin file doesn't use slug. * Use innerText instead of innerHTML for security hardening. * Better encapsulate logic in \AMP_Validation_Error_Taxonomy::render_link_to_errors_by_url(). * Add missing @wordpress/dom-ready dependency to fix workaround 56915da described in #1397 (comment) * Update button from "View errors by URL" to "View Invalid URLs".
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@westonruter , @kienstra found that if you remove the
domReady
from the webpack config, remove it as a dependency of the script loading, and donpm run dev
again we can get the script to run successfully. It is included here: 56915da but it is a workaround, so if you can come up with a fix or have another idea that'd be awesome.
I think the problem is just that @wordpress/dom-ready
hasn't been saved as a dependency in package.json
. If I add it as a dependency then it builds and works. Your change in 56915da is mostly right anyway as wp-dom-ready
is not a registered script, but rather it is an internal dependency that is added to the built script. Fix applied in 716a869.
} | ||
const heading = document.querySelector( '.wp-heading-inline' ); | ||
const link = document.createElement( 'a' ); | ||
link.innerHTML = errorIndexAnchor; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
innerText
should be used instead of innerHTML
because the latter is susceptible to an injection attack, if errorIndexAnchor
is coming from an untrusted source.
link.setAttribute( 'href', errorIndexLink ); | ||
link.setAttribute( 'class', 'page-title-action' ); | ||
heading.after( link ); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Either this function or AMP_Validation_Error_Taxonomy::render_link_to_errors_by_url()
should be refactored to be taking the same approach.
$plugin_names = array(); | ||
$plugin_slugs = array_unique( $sources['plugin'] ); | ||
foreach ( $plugin_slugs as $plugin_slug ) { | ||
$plugin_data = get_plugin_data( WP_PLUGIN_DIR . '/' . $plugin_slug . '/' . $plugin_slug . '.php' ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
$output[] = '<span class="dashicons dashicons-admin-appearance"></span>'; | ||
$themes = array_unique( $sources['theme'] ); | ||
foreach ( $themes as $theme_slug ) { | ||
$output[] = sprintf( '<strong>%s</strong><br/>', esc_html( $theme_slug ) ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Still needing to get wp_get_theme( $theme_slug )->get( 'Name' )
here.
Fixes #1362.
Updates the Error by URLs view according to this sketch.