Changeset 9230

Timestamp:

10/24/2019 06:54:36 AM (5 years ago)

Author:

dd32

Message:

Plugin Directory: Fix some HTML validation errors.

• Remove duplicate ID's
• Don't nest <style> under <a>

See #4730.

Location:

sites/trunk/wordpress.org/public_html/wp-content

Files:

• plugins/plugin-directory/class-template.php (modified) (1 diff)
• themes/pub/wporg-plugins/client/components/plugin-icon/index.jsx (modified) (1 diff)
• themes/pub/wporg-plugins/template-parts/plugin.php (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/plugin-directory/class-template.php

@@ -503 +503 @@
 
         switch ( $output ) {
+            case 'html-parts':
             case 'html':
-                $id    = "plugin-icon-{$plugin->post_name}";
-                $html  = "<style type='text/css'>";
-                $html .= "#{$id} { background-image: url('{$icon}'); }";
+                $id         = esc_attr( "plugin-icon-{$plugin->post_name}" );
+                $style_tag  = "<style type='text/css'>";
+                $style_tag .= ".{$id} { background-image: url('{$icon}'); }";
                 if ( ! empty( $icon_2x ) && ! $generated && ! $svg ) {
-                    $html .= "@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { #{$id} { background-image: url('{$icon_2x}'); } }";
-                }
-                $html .= '</style>';
-                $html .= "<div class='plugin-icon' id='{$id}'></div>";
-
-                return $html;
+                    $style_tag .= "@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { .{$id} { background-image: url('{$icon_2x}'); } }";
+                }
+                $style_tag .= '</style>';
+
+                $icon_tag   = "<div class='plugin-icon {$id}'></div>";
+
+                if ( 'html' === $output ) {
+                    return $style_tag . $icon_tag;
+                } else {
+                    return compact( 'style_tag', 'icon_tag' );
+                }
                 break;
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin-icon/index.jsx

@@ -34 +34 @@
     return (
         <div className="entry-thumbnail">
-            <div className="plugin-icon" id={ `plugin-icon-${ slug }` } />
+            <div className="{ `plugin-icon plugin-icon-${ slug }` }" />
             <style type="text/css">
-                { `#plugin-icon-${ slug } { background-image: url('${ icon }'); }` }
+                { `.plugin-icon-${ slug } { background-image: url('${ icon }'); }` }
                 { icons[ '2x' ] && icon !== icons.default
                     // eslint-disable-next-line max-len
-                    ? `@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { #plugin-icon-${ slug } { background-image: url('${ icons[ '2x' ] }'); } }`
+                    ? `@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { .plugin-icon-${ slug } { background-image: url('${ icons[ '2x' ] }'); } }`
                     : ''
                 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin.php

@@ -14 +14 @@
 $tested_up_to = (string) get_post_meta( $post->ID, 'tested', true );
 ?>
-<article id="post-<?php the_ID(); ?>" <?php post_class( 'plugin-card' ); ?>>
+<article <?php post_class( 'plugin-card' ); ?>>
     <div class="entry-thumbnail">
+        <?php
+            $icon_parts = Template::get_plugin_icon( get_post(), 'html-parts' );
+            echo $icon_parts['style_tag'];
+        ?>
         <a href="<?php the_permalink(); ?>" rel="bookmark">
-            <?php
-            // phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped
-            echo Template::get_plugin_icon( get_post(), 'html' );
-            ?>
+            <?php echo $icon_parts['icon_tag']; ?>
         </a>
     </div><div class="entry">
@@ -60 +61 @@
         </span>
     </footer>
+    <?php /* This file must not end with a new line */ ?>
 </article>