[wp-trac] [WordPress Trac] #47536: More actions not aligned correctly

[WordPress Trac]

#47536: More actions not aligned correctly
-------------------------------------------------+-------------------------
 Reporter:  Presskopp                            |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Awaiting
                                                 |  Review
Component:  Administration                       |     Version:
 Severity:  minor                                |  Resolution:
 Keywords:  needs-patch has-screenshots dev-     |     Focuses:
  feedback                                       |
-------------------------------------------------+-------------------------
Changes (by davidbaumwald):

 * keywords:  needs-patch has-screenshots => needs-patch has-screenshots
     dev-feedback


Comment:

 This is a product of the unique HTML structure of that specific line.  In
 the first list element, a `<div class="welcome-icon welcome-widgets-
 menus">` wraps text containing multiple `<a>` tags.  Therefore, the icon
 pseudo-element `::before` for that row is applied to the div.

 Conversely, the other lines on the `Next Steps` and `More Actions`
 sections contain only one `a`, and in those cases, the `::before` is
 applied to that element.

 Here's the relevant section from wp-admin/includes/dashboard.php, starting
 on line 1716:
 {{{
 <ul>
 <?php if ( current_theme_supports( 'widgets' ) || current_theme_supports(
 'menus' ) ) : ?>
         <li><div class="welcome-icon welcome-widgets-menus">
         <?php
         if ( current_theme_supports( 'widgets' ) &&
 current_theme_supports( 'menus' ) ) {
                 printf(
                         __( 'Manage <a href="%1$s">widgets</a> or <a
 href="%2$s">menus</a>' ),
                         admin_url( 'widgets.php' ),
                         admin_url( 'nav-menus.php' )
                 );
         } elseif ( current_theme_supports( 'widgets' ) ) {
                 echo '<a href="' . admin_url( 'widgets.php' ) . '">' . __(
 'Manage widgets' ) . '</a>';
         } else {
                 echo '<a href="' . admin_url( 'nav-menus.php' ) . '">' .
 __( 'Manage menus' ) . '</a>';
         }
         ?>
         </div></li>
 <?php endif; ?>
 <?php if ( current_user_can( 'manage_options' ) ) : ?>
         <li><?php printf( '<a href="%s" class="welcome-icon welcome-
 comments">' . __( 'Turn comments on or off' ) . '</a>', admin_url(
 'options-discussion.php' ) ); ?></li>
 <?php endif; ?>
         <li><?php printf( '<a href="%s" class="welcome-icon welcome-learn-
 more">' . __( 'Learn more about getting started' ) . '</a>', __(
 'https://codex.wordpress.org/First_Steps_With_WordPress' ) ); ?></li>
 </ul>
 }}}

 Coding Standards dictate that opening/closing PHP tags shall appear on
 their own lines.  With CSS adding the `::before` pseudo-element for the
 icon to `<div class="welcome-icon welcome-widgets-menus">`, the whitespace
 created between lines 1717 and 1718 is rendered.

 Line 1726 and 1728 have PHP rendering singular `<a>` tags and there's no
 whitespace because Coding Standards allow for single-line mixtures of HTML
 and PHP.

 Hopefully this breaks down the root cause of the issue.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47536#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform