Skip to content
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

Add AMP validation checking for Gutenberg blocks #1019

Merged
merged 49 commits into from
Apr 16, 2018

Commits on Mar 14, 2018

  1. Add source comments around each Gutenberg block to track validation i…

    …ssues
    
    Remove requirement that amp_debug query var have a value
    westonruter committed Mar 14, 2018
    Configuration menu
    Copy the full SHA
    8413457 View commit details
    Browse the repository at this point in the history
  2. Defer mustache tag replacements to right before serialization and onl…

    …y target template elements
    westonruter committed Mar 14, 2018
    Configuration menu
    Copy the full SHA
    07aeee2 View commit details
    Browse the repository at this point in the history

Commits on Mar 17, 2018

  1. Configuration menu
    Copy the full SHA
    01691e5 View commit details
    Browse the repository at this point in the history

Commits on Mar 18, 2018

  1. Revert commit that removed REST API logic.

    Commit ba9365 removed this,
    as it wasn't needed for 0.7.
    This restores the logic for the REST API,
    but not the wp-cron logic.
    
    See PR #971.
    Ryan Kienstra committed Mar 18, 2018
    Configuration menu
    Copy the full SHA
    27e8bec View commit details
    Browse the repository at this point in the history
  2. Prototype asynchronous notices for blocks.

    The POST to the REST API in the JS file doesn't work yet.
    And this doesn't apply a requirement in PR #1019:
    'Pass validation errors back in REST API response when Gutenberg saves a post.'
    But this is a prototype of a way to display notices for each block, async.
    The UX would be like that in the previous PR #902.
    As Weston mentioned earlier, edit() is synchronous.
    And REST requests to validate content could delay it.
    So add a component for 'edit.'
    Display a notice, based on the state of isValidAMP.
    The REST API request will update the state.
    Ryan Kienstra committed Mar 18, 2018
    Configuration menu
    Copy the full SHA
    590cd76 View commit details
    Browse the repository at this point in the history

Commits on Mar 19, 2018

  1. Rever commit 27e8b, which added REST API endpoint.

    The approach changed,
    and I'm going to add a response field to
    existing endpoints.
    Ryan Kienstra committed Mar 19, 2018
    Configuration menu
    Copy the full SHA
    8218919 View commit details
    Browse the repository at this point in the history
  2. Add amp_validation field to REST API response.

    @todo: implement the output callback.
    Thanks to Weston's suggestion,
    This will enable displaying notices in blocks.
    Ryan Kienstra committed Mar 19, 2018
    Configuration menu
    Copy the full SHA
    9c3568d View commit details
    Browse the repository at this point in the history
  3. Output validation errors in REST API response.

    In new field 'amp_validation_errors'.
    @todo: we might not always want to output this.
    It's mainly useful in the Gutenberg editor.
    Ryan Kienstra committed Mar 19, 2018
    Configuration menu
    Copy the full SHA
    ab82e8d View commit details
    Browse the repository at this point in the history

Commits on Mar 20, 2018

  1. Remove jQuery dependency and ES6 class.

    As Weston mentioned,
    we can't use ES6 classes in IE11.
    The script is probably going to change drastically,
    in how it displays notices for validation errors.
    So remove almost all of the existing logic.
    Ryan Kienstra committed Mar 20, 2018
    Configuration menu
    Copy the full SHA
    ea1c37a View commit details
    Browse the repository at this point in the history
  2. Change which post types have the added field.

    Per Weston's suggestion,
    if this is Native AMP (canonical),
    it will be all posts with 'editor' support.
    Otherwise, all REST objects that have 'amp' support.
    Ryan Kienstra committed Mar 20, 2018
    Configuration menu
    Copy the full SHA
    96297fc View commit details
    Browse the repository at this point in the history

Commits on Mar 21, 2018

  1. In REST API response, validate front-end if no errors exist.

    Abstract existing logic into:
    get_existing_validation_errors().
    And reuse this for rest_field_amp_validation().
    If this doesn't return errors,
    make a request to the front-end for them.
    Ryan Kienstra committed Mar 21, 2018
    Configuration menu
    Copy the full SHA
    ed4b03b View commit details
    Browse the repository at this point in the history
  2. Skip Gutenberg-based tests for WP version < 4.9.

    Gutenberg doesn't init if the version is below this.
    This addresses a failed Travis build.
    Ryan Kienstra committed Mar 21, 2018
    Configuration menu
    Copy the full SHA
    561af32 View commit details
    Browse the repository at this point in the history
  3. Begin to add notices to blocks based on errors.

    So far, this only finds if there is an error somewhere.
    And it displays a notice below the block.
    But it has access to the errors by block name,
    though not the specific ID of the block.
    Ryan Kienstra committed Mar 21, 2018
    Configuration menu
    Copy the full SHA
    f64ab2e View commit details
    Browse the repository at this point in the history
  4. Address Travis error by aligning array values vertically.

    Ryan Kienstra committed Mar 21, 2018
    Configuration menu
    Copy the full SHA
    b9bd206 View commit details
    Browse the repository at this point in the history

Commits on Mar 22, 2018

  1. Get the block types with errors from the REST API response.

    The response can have a 'block_name' value.
    When it does,
    store that specific block's errors,
    This enables lookup by the block name
    in the edit() method of the block.
    @todo: consider keeping this in a store.
    And find the specific block to which they belong.
    Not only the block name.
    Ryan Kienstra committed Mar 22, 2018
    Configuration menu
    Copy the full SHA
    bcdff5f View commit details
    Browse the repository at this point in the history
  2. Update test to reflect change in text.

    To address a failed Travis build.
    Also, change the text,
    so that it can apply to singular an plural.
    'invalid AMP' instead of 'AMP errors.'
    Ryan Kienstra committed Mar 22, 2018
    Configuration menu
    Copy the full SHA
    049e482 View commit details
    Browse the repository at this point in the history
  3. Store the block validation errors, avoiding lookup in every edit().

    Before, this got the block errors from getCurrentPost(),
    in every block's edit() method.
    Instead, store these in the module,
    every time there is an action.
    It would be better to use a reducer
    for a specific action.
    But so far, I haven't found a way to do that
    for REQUEST_POST_UPDATE_SUCCESS.
    Ryan Kienstra committed Mar 22, 2018
    Configuration menu
    Copy the full SHA
    fe34e8e View commit details
    Browse the repository at this point in the history
  4. Get validation errors for specific blocks, not only for block names.

    module.blocksWithErrors stores errors by block name.
    In the block edit() method,
    it needs to find if it has the specific errors.
    So find if the errors exist in the content
    by searching it for the node_name,
    and the attributes and properties.
    @todo: account for other errors,
    like enqueued scripts.
    Ryan Kienstra committed Mar 22, 2018
    Configuration menu
    Copy the full SHA
    49b66ae View commit details
    Browse the repository at this point in the history
  5. Address Travis errors by raising variable declaration.

    This is now at the top of the function scope.
    Also, move 2 nested if blocks into 1 block.
    Ryan Kienstra committed Mar 22, 2018
    Configuration menu
    Copy the full SHA
    743cca4 View commit details
    Browse the repository at this point in the history
  6. Add 'block_attrs' to blocksWithErrors.

    As Weston mentioned, they will be useful
    in matching the specific block to the errors.
    This will make it much easier to access them.
    Ryan Kienstra committed Mar 22, 2018
    Configuration menu
    Copy the full SHA
    4676777 View commit details
    Browse the repository at this point in the history
  7. Correct the variable for block_attrs.

    This was actually in source, not blocksWithErrors.
    So change it to source.
    Ryan Kienstra committed Mar 22, 2018
    Configuration menu
    Copy the full SHA
    b9aa16c View commit details
    Browse the repository at this point in the history

Commits on Mar 23, 2018

  1. Use the new blockAttrs to find a match with errors.

    This can match blocks that add a stripped script.
    Like the 'Categories' block.
    That wasn't part of the content,
    so it wasn't found before.
    Also, refactor existing logic into:
    doNameAndAttributesMatch().
    This is better in a function,
    as it uses a for loop to return a value.
    Otherwise, it would need to set a flag.
    Ryan Kienstra committed Mar 23, 2018
    Configuration menu
    Copy the full SHA
    e2fc9a7 View commit details
    Browse the repository at this point in the history
  2. Move the notice from below to above the block.

    This follows the convention in WP.
    And update the notice text for this.
    It was below the block before,
    as the edit() function sometimes found errors quickly.
    And this moved the block lower,
    as the notice took the space of the block.
    Ryan Kienstra committed Mar 23, 2018
    Configuration menu
    Copy the full SHA
    6cd996a View commit details
    Browse the repository at this point in the history
  3. Add a 'More details' link to the notice.

    This links to the post.php page with the errors.
    Use the component ExternalLink.
    Ryan Kienstra committed Mar 23, 2018
    Configuration menu
    Copy the full SHA
    339f69f View commit details
    Browse the repository at this point in the history
  4. Enable showing multiple validation errors.

    For example: This core/html block has invalid AMP: invalid_attribute, invalid_element.
    @todo: consider having counts for each,
    like in the classic editor notice.
    Ryan Kienstra committed Mar 23, 2018
    Configuration menu
    Copy the full SHA
    a02d029 View commit details
    Browse the repository at this point in the history
  5. Enable outputting several error codes, and their counts.

    Mainly uses Weston's work from:
    AMP_Validation_Utils::output_removed_set().
    @todo: address an case where multiple blocks
    have the same error.
    Their count is then higher than it should be.
    Ryan Kienstra committed Mar 23, 2018
    Configuration menu
    Copy the full SHA
    15f0abe View commit details
    Browse the repository at this point in the history
  6. Address a Travis error regarding complexity.

    'doNameAndAttributesMatch' has a complexity of 9.
    So refactor part of it into:
    getAttributesKey().
    Ryan Kienstra committed Mar 23, 2018
    Configuration menu
    Copy the full SHA
    2b03c6a View commit details
    Browse the repository at this point in the history
  7. Remove the counts from after the error codes.

    There were duplicate counts when blocks has
    the same errors.
    For example, if 2 HTML blocks have 'onclick' attributes.
    Of if there are 2 Categories blocks with a dropdown.
    Ryan Kienstra committed Mar 23, 2018
    Configuration menu
    Copy the full SHA
    d366da3 View commit details
    Browse the repository at this point in the history
  8. Add keys to the components and edit block.

    It seems like each of these should have different keys.
    And other examples of this in Gutenberg have keys.
    Ryan Kienstra committed Mar 23, 2018
    Configuration menu
    Copy the full SHA
    80d32de View commit details
    Browse the repository at this point in the history

Commits on Mar 26, 2018

  1. Make the notice expandable.

    Ryan Kienstra committed Mar 26, 2018
    Configuration menu
    Copy the full SHA
    16388c2 View commit details
    Browse the repository at this point in the history

Commits on Apr 6, 2018

  1. Merge in develop, resolve conflicts.

    There were 2 trivial conflicts:
    class-amp-validation-utils.php
    test-class-amp-validation-utils.php
    Also, there was a failed test in:
    test_enqueue_block_validation.
    So I removed the : from
    'This %s block has invalid AMP'.
    kienstra committed Apr 6, 2018
    Configuration menu
    Copy the full SHA
    f9d8575 View commit details
    Browse the repository at this point in the history
  2. Address Travis error by removing extra comma.

    There was a comma after the argument for:
    result.unshift().
    kienstra committed Apr 6, 2018
    Configuration menu
    Copy the full SHA
    9aa6704 View commit details
    Browse the repository at this point in the history

Commits on Apr 8, 2018

  1. Force re-validation of post on frontend for amp_validation_errors fie…

    …ld in POST/PUT requests
    
    Tidy jsdoc
    westonruter committed Apr 8, 2018
    Configuration menu
    Copy the full SHA
    dcb1e77 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    eb00bcf View commit details
    Browse the repository at this point in the history
  3. Configuration menu
    Copy the full SHA
    9ecc24c View commit details
    Browse the repository at this point in the history
  4. Remove block error summary while waiting for design to formulate

    * Fix population of notice children.
    * Show simple list of error codes for now.
    * Remove PHP-exporting of validation status post since needs to be dynamic REST field.
    * Replace extraneous hasOwnProperty with simply key existence checks (since object literals).
    * Add some todos.
    westonruter committed Apr 8, 2018
    Configuration menu
    Copy the full SHA
    354fdcd View commit details
    Browse the repository at this point in the history

Commits on Apr 9, 2018

  1. Fix delay between save and update of validation error notice

    Stop iterating sources for validation error once inner-most block is matched
    westonruter committed Apr 9, 2018
    Configuration menu
    Copy the full SHA
    0bada73 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    34024cc View commit details
    Browse the repository at this point in the history
  3. Prevent reporting validation errors for blocks that are not in the cu…

    …rrent post
    
    * Include post_id and block_content_index in block sources.
    * Prevent reporting validation errors for blocks that are not in the current post.
    * Include block_content_index for improved alignment between blocks and validation errors.
    westonruter committed Apr 9, 2018
    Configuration menu
    Copy the full SHA
    8e78904 View commit details
    Browse the repository at this point in the history

Commits on Apr 10, 2018

  1. Configuration menu
    Copy the full SHA
    277da63 View commit details
    Browse the repository at this point in the history
  2. Use block content index to match blocks with corresponding validation…

    … errors
    
    * Use custom store for block validation errors
    * Connect extended BlockEdit to block validation errors via withSelect HOC.
    westonruter committed Apr 10, 2018
    Configuration menu
    Copy the full SHA
    ca3ff60 View commit details
    Browse the repository at this point in the history
  3. Only update block validation errors when editor state is clean

    This helps ensures that the validation errors in the response will properly align with the ordered blocks in the editor.
    westonruter committed Apr 10, 2018
    Configuration menu
    Copy the full SHA
    01a21a8 View commit details
    Browse the repository at this point in the history

Commits on Apr 11, 2018

  1. Configuration menu
    Copy the full SHA
    3e032d4 View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    6a4cbcc View commit details
    Browse the repository at this point in the history
  3. Configuration menu
    Copy the full SHA
    4d7dc19 View commit details
    Browse the repository at this point in the history
  4. Configuration menu
    Copy the full SHA
    21e60f0 View commit details
    Browse the repository at this point in the history

Commits on Apr 12, 2018

  1. Configuration menu
    Copy the full SHA
    ca6c96c View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    7a60509 View commit details
    Browse the repository at this point in the history

Commits on Apr 13, 2018

  1. Configuration menu
    Copy the full SHA
    5bf12da View commit details
    Browse the repository at this point in the history