search

bradyvercher / gistpress

WordPress plugin to add Gist oEmbed and shortcode support with caching.
GNU General Public License v2.0
143 stars 28 forks source link

Link element needs itemprop attribute #65

Closed GaryJones closed 8 years ago

GaryJones commented 8 years ago

Since the stylesheet <link> element is in the <body>, it needs an itemprop attribute.

Expected Behavior

No errors when HTML is validated.

Current Behavior

The validator gives a slightly obscure warning about property attribute, as it is parsing it as HTML5 + RDFa.

gistpress-link-error

Possible Solution

As per http://w3c.github.io/html/single-page.html#the-link-element the link element must have an itemprop attribute, (or rel if only being used in the <head>).

See http://stackoverflow.com/questions/18549726/element-link-is-missing-required-attribute-property for an explanation of the error message.

Steps to Reproduce (for bugs)

  1. Insert a gist into a WordPress post or page with GistPress.
  2. Run the post URL through https://validator.w3.org
  3. See the error entitled: "Element link is missing required attribute property."

    Context

Valid markup on pages using GistPress.

Your Environment

GaryJones commented 8 years ago

GistPress correctly registers and enqueues the stylesheet, so this appears to be a bug in WP core with how the <link> element is output: https://core.trac.wordpress.org/ticket/30579

In the meantime, there are two approaches. Turn off Gist style sheet for all gists and add the styles to your theme:

add_filter( 'gistpress_stylesheet_default', '__return_false' );

...or filter the style loader tag:

add_filter( 'style_loader_tag', array( $this, 'style_loader_tag' ), 10, 2 );
/**
 * Adjust the style loader tag.
 *
 * @param string $tag    HTML for link tag.
 * @param string $handle Style handle.
 * @return string HTML for link tag.
 */
public function style_loader_tag( $tag, $handle ) {
    if ( current_theme_supports( 'html5' ) && 'gistpress' === $handle ) {
        return str_replace( '<link ', '<link property="stylesheet" ', $tag );
    }

    return $tag;
}

Here it's limited to just the gistpress style sheet, but you probably will need it for all non-head link elements. If so, remove the && 'gistpress' === $handle bit.