Skip to content

Add source information for script/style dependencies and inline scripts/styles#4135

Merged
westonruter merged 22 commits intodevelopfrom
add/enqueued-dependency-sourcing
Feb 18, 2020
Merged

Add source information for script/style dependencies and inline scripts/styles#4135
westonruter merged 22 commits intodevelopfrom
add/enqueued-dependency-sourcing

Conversation

@westonruter
Copy link
Copy Markdown
Member

@westonruter westonruter commented Jan 19, 2020

Summary

Fixes #4134
Fixes #4133

  • Scripts and styles that are printed due to being dependencies of enqueued scripts and styles will now show the plugin/theme responsible for enqueueing as the source. This eliminates most of the unhelpful wp-includes entries from appearing as the validation error source. The handle of the dependent script/style is also listed among the sources.
  • Inline scripts now indicate among their sources all of the plugins and theme(s) that caused them to be added, as opposed to just one. Also indicated is whether the script was added via wp_localize_script() or wp_add_inline_script(). The source stack also includes the specific inline script that was added.
  • Inline styles added via wp_add_inline_style() are now attributed to theme/plugin sources for the first time. As with scripts, all plugins and theme(s) that contribute to a given inline script will now be listed among the sources.
  • Scripts and styles that are enqueued before wp_enqueue_scripts will now be properly attributed. This includes styles registered at wp_default_styles and scripts at wp_default_scripts.

Testing

  1. Activate the twentytwenty theme.
  2. Copy each file from this gist into the wp-content/plugins directory. These are separate plugins so they must be added as separate files in the plugins directory. Then do wp plugin activate add-inline-scripts add-more-inline-scripts.
  3. Clone another gist into the plugins directory with the name enqueue-assets-with-core-dependencies and activate via wp plugin activate enqueue-assets-with-core-dependencies.
  4. Clone yet another gist into the wp-content/plugins with the directory name of add-assets-before-enqueue-scripts. Then do wp plugin activate add-assets-before-enqueue-scripts.

Screenshots

Compare before and after:

Before After
Screen Shot 2020-01-23 at 22 32 36 Screen Shot 2020-01-23 at 22 33 19

The stylesheets have the same sourcing:

Before After
image image

The source stack now has information about how a given inline script was added, either via wp_add_inline_script() or wp_localize_script(). For example:

Before After
image image

If I activate a theme (like Hestia) that also has scripts that depend on jQuery, then I see both the plugin and the theme as sources:

image

Todo

  • My pull request is addressing an open issue (please create one otherwise).
  • My code is tested and passes existing tests. See Restore PHPUnit code coverage to 60%+ #4175.
    • Add tests for AMP_Validation_Callback_Wrapper.
    • Add tests for AMP_Validation_Manager::locate_sources()
  • My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).
  • Add stylesheet URL and enqueued handle as top level dl items? At least linkify the URL in the <link> original markup.

@googlebot googlebot added the cla: yes Signed the Google CLA label Jan 19, 2020
@westonruter westonruter added this to the v1.5 milestone Jan 19, 2020
@westonruter westonruter changed the title Add source information for script/style dependencies Add source information for script/style dependencies and inline scripts/styles Jan 23, 2020
@westonruter
Copy link
Copy Markdown
Member Author

The wp-block-library-theme stylesheet currently has wp-includes as the source:

image

This is fine because it comes from core, but technically it could have the current theme attributed as a source because wp_common_block_scripts_and_styles() conditionally enqueues it based on whether or not the theme has wp-block-styles theme support. It's not important, however. And it could be argued that having wp-includes is just fine.

@westonruter westonruter marked this pull request as ready for review January 24, 2020 00:32
@westonruter westonruter mentioned this pull request Jan 24, 2020
9 tasks
esc_html( basename( wp_parse_url( $validation_error['node_attributes']['src'], PHP_URL_PATH ) ) )
);
} else {
$title = esc_html__( 'Invalid inline script', 'amp' );
Copy link
Copy Markdown
Member Author

@westonruter westonruter Jan 24, 2020

Choose a reason for hiding this comment

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

Would be nice to add the handle (or basename) that the inline script is for.

@westonruter

This comment has been minimized.

@westonruter westonruter requested a review from amedina January 24, 2020 07:10
flush_rewrite_rules( false );
}

// The plugins_loaded action is the earliest we can run this since that is when pluggable.php has been required and wp_hash() is available.
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Why not replace wp_hash with something else, then? It doesn't need to be cryptographically secure, so any type of hash will work, really.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I think it would even make sense to include a hash function in the amp/common library, so that we have consistent hashing across all libraries.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Good question. It's not just purely a hash that we need. It's hashing using one of the WordPress secrets, which entails using wp_salt() which is in turn another pluggable function. Then the input for hashing is wp_nonce_tick() which is yet another pluggable function. So these three functions all require this to be run at plugins_loaded and I believe we need to depend on them specifically.

public static function get_amp_validate_nonce() {
return wp_hash( self::VALIDATE_QUERY_VAR . wp_nonce_tick(), 'nonce' );
}

@westonruter westonruter changed the base branch from add/sanitizer-augmented-validate-response-data to develop January 24, 2020 18:55
…ued-dependency-sourcing

* 'develop' of github.com:ampproject/amp-wp: (42 commits)
  Use static closure since $this is not needed
  Revert change in some tests, as they're not needed anymore
  Use suggested normalization, update tests
  Add a new method to normalize URLs
  Remove test case that is no longer handled
  Move urldecode() lower in the function
  Revert change to regex, in favor of trimming before it's passed
  Fix some phpcs errors, mainly => alignment
  Align => operators, from a recent commit
  Add a since tag to the new filter amp_to_amp_excluded_urls
  Commit Weston's suggestion to prevent conditional in Standard mode
  Handle case of something like #heading at end of URL
  Rename parameter 'excluded_amp_links' to 'excluded_urls'
  Change filter name to 'amp_to_amp_excluded_urls'
  Change DocBlock of 'amp_to_amp_excluded_links'
  As there's now a capturing group, remove lookahead
  Replace 2 calls of trim() with longer regex in parse_protocol()
  Commit Weston's suggestion for the Reader mode template
  Allow a URL to have a leading space without a validation error
  For WordPress.tv embed, Use an oembed filter instead of block filter (#4164)
  ...
@westonruter
Copy link
Copy Markdown
Member Author

westonruter commented Jan 24, 2020

Build for testing: amp.zip (1.5.0-alpha-20200124T194146Z-186d71920)

amp.zip (v1.5.0-alpha-20200227T053151Z-a478d1282)

@westonruter
Copy link
Copy Markdown
Member Author

Todo:

  • Shorten columns by dropping “Size” from “Original Size” and “Final Size”. Use “Percent” instead of “Percentage“.
  • Add hyperlink to URL in <link> original markup.

@westonruter
Copy link
Copy Markdown
Member Author

  • Shorten columns by dropping “Size” from “Original Size” and “Final Size”. Use “Percent” instead of “Percentage“.

Done in e54bb61.

Before:
Screen Shot 2020-01-24 at 17 13 49

After:
Screen Shot 2020-01-24 at 17 14 18

…ued-dependency-sourcing

* 'develop' of github.com:ampproject/amp-wp: (124 commits)
  Copy patches folder when building
  Re-run amphtml-update.sh to remove duplicate
  Use travis_retry on PHPUnit for external-http tests (#4298)
  Improve display of anyof/oneof attributes in details
  Add error code for DUPLICATE_ONEOF_ATTRS; add error messages
  Sort the attributes from GetMandatoryOf()
  Simplify amphtml-update.py, using Weston's suggestiony
  Improve conversion of resizable iframes and those containing placeholder/overflow
  Add tests
  Update patch
  Bump CSS cache group
  Add patch from external PR that resolves the issue
  In amphtml-update.py, remove extra spaces inside function
  Rename method to get_unsatisfied_number_of_rule()
  Add more unit tests, including allowed mandatory_*of
  Update the PHP logic for the changed mandator_*of in the spec
  Move the mandatory_*of rule to the 'tag_spec'
  Bump stable tag to 1.4.3
  Update readme and screenshots for Stories removal (#4259)
  Update dependency @wordpress/core-data to v2.12.0 (#4265)
  ...
@westonruter westonruter force-pushed the add/enqueued-dependency-sourcing branch from 1173e2f to 0861035 Compare February 16, 2020 05:46
…ued-dependency-sourcing

* 'develop' of github.com:ampproject/amp-wp: (38 commits)
  Revert "Use esc_html_e() rather than echoing esc_html()"
  Use esc_html_e() rather than echoing esc_html()
  Use more specific labels for MISSING_REQUIRED_PROPERTY_VALUE error
  Fix phpdoc
  Test robustness of AMP_Core_Theme_Sanitizer::guess_modal_role
  Add missing phpdocs for data providers
  Use `has_filter` function
  Make modal role guessing more robust
  Improve validation error details for invalid properties; improve tests
  Remove required-property logic from meta sanitizer and flesh out in tag and attribute sanitizer
  Handle case where multiple meta properties are invalid
  Only update attribute if properties changed
  Ignore code coverage for deprecated classes and methods
  Skip sending Content-Type header if headers already sent
  Make phpcs happy
  Rename 'property_value' to 'meta_property_value'
  Enfore UTF-8 content-type header
  Add more tests for AMP_Style_Sanitizer
  Add tests for AMP_Nav_Menu_Dropdown_Sanitizer
  Add tests for AMP_Customizer_Design_Settings
  ...
@westonruter westonruter requested a review from pierlon February 18, 2020 00:36
@pierlon
Copy link
Copy Markdown
Contributor

pierlon commented Feb 18, 2020

With the add-inline-scripts & add-more-inline-scripts plugiins activated, there seems to be an issue with how scripts added via wp_localize_script are shown:

image

The Hello_Underscores variable was added by add-inline-scripts, not add-more-inline-scripts. Scripts added via wp_add_inline_script don't seem to be affected.

@westonruter
Copy link
Copy Markdown
Member Author

@pierlon I think that is expected because \WP_Scripts::localize() concatenates the strings. So when the first time wp_localize_script() is called, only the first text is present. I think this can be improved by splitting the text by newlines. I'll try it.

@westonruter
Copy link
Copy Markdown
Member Author

@pierlon I believe 6059817 resolves this.

@pierlon
Copy link
Copy Markdown
Contributor

pierlon commented Feb 18, 2020

The patch for the mustache/mustache library (requirement of wp-cli/wp-cli) is failing to be patched since being upgraded to v2.13.0 via e35a144. Downgrading it to v2.12.0 should resolve the issue.

Co-Authored-By: Pierre Gordon <16200219+pierlon@users.noreply.github.com>
@westonruter westonruter requested a review from pierlon February 18, 2020 03:31
@westonruter
Copy link
Copy Markdown
Member Author

The patch for the mustache/mustache library (requirement of wp-cli/wp-cli) is failing to be patched since being upgraded to v2.13.0 via e35a144. Downgrading it to v2.12.0 should resolve the issue.

How do you recommend doing this? We don't directly have mustache/mustache as a dependency. Would we add it as a dev dependency and pin it at 2.12.0? We'd have to then tell Renovate to not try to update it, or else just reject updates.

@westonruter westonruter merged commit c4a3966 into develop Feb 18, 2020
@westonruter westonruter deleted the add/enqueued-dependency-sourcing branch February 18, 2020 03:42
@pierlon
Copy link
Copy Markdown
Contributor

pierlon commented Feb 18, 2020

The patch being applied by wp-cli/wp-cli is to make mustache/mustache PHP 7.4 compatible, which has been fixed in v2.13.0. The patch can be ignored by instructing cweagans/composer-patches to ignore it. Something like:

Index: composer.json
===================================================================
--- composer.json	(revision 6059817247734c2e7c1f15c39450e152100b0e6a)
+++ composer.json	(date 1581998688688)
@@ -44,6 +44,13 @@
         "Fix parsing CSS selectors which contain commas <https://github.com/sabberworm/PHP-CSS-Parser/pull/138>": "https://github.com/sabberworm/PHP-CSS-Parser/commit/fa139f65c5b098ae652c970b25e6eb03fc495eb4.diff",
         "Validate name-start code points for identifier <https://github.com/sabberworm/PHP-CSS-Parser/pull/185>": "patches/php-css-parser-pull-185.patch"
       }
+    },
+    "patches-ignore": {
+      "wp-cli/wp-cli": {
+        "mustache/mustache": {
+          "Patch no longer relevant as of mustache/mustache v2.13.0": "https://patch-diff.githubusercontent.com/raw/bobthecow/mustache.php/pull/349.patch"
+        }
+      }
     }
   },
   "autoload": {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

cla: yes Signed the Google CLA

Projects

None yet

4 participants