Changeset 12050

Timestamp:

09/05/2022 05:14:31 AM (3 years ago)

Author:

dufresnesteven

Message:

wporg-developer: Sync with ​https://github.com/WordPress/wporg-developer/commit/790d402933d2725374de0d19e6bf6a576c8b15d2

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• content-reference.php (modified) (1 diff)
• embed.php (added)
• functions.php (modified) (14 diffs)
• header.php (modified) (2 diffs)
• inc/autocomplete.php (modified) (2 diffs)
• inc/cli-commands.php (modified) (4 diffs)
• inc/formatting.php (modified) (10 diffs)
• inc/import-block-editor.php (modified) (3 diffs)
• inc/loop-pagination.php (modified) (2 diffs)
• inc/registrations.php (modified) (1 diff)
• inc/search.php (modified) (2 diffs)
• inc/template-tags.php (modified) (21 diffs)
• inc/user-content.php (modified) (2 diffs)
• js/autocomplete.js (modified) (3 diffs)
• js/function-reference.js (modified) (6 diffs)
• js/user-notes-preview.js (modified) (1 diff)
• package.json (modified) (2 diffs)
• page-home-landing.php (modified) (8 diffs)
• page-reference-landing.php (modified) (1 diff)
• reference/template-hooks.php (added)
• reference/template-params.php (modified) (1 diff)
• reference/template-related.php (modified) (7 diffs)
• reference/template-source.php (modified) (2 diffs)
• scss/_global.scss (added)
• scss/_reset.scss (added)
• scss/admin.scss (modified) (8 diffs)
• scss/main.scss (modified) (140 diffs)
• scss/page-dashicons.scss (modified) (8 diffs)
• scss/prism.scss (added)
• scss/settings (added)
• scss/settings/_colors.scss (added)
• scss/settings/_dimensions.scss (added)
• scss/settings/_index.scss (added)
• search.php (modified) (1 diff)
• searchform.php (modified) (4 diffs)
• stylesheets/admin.css (modified) (1 diff)
• stylesheets/autocomplete.css (modified) (2 diffs)
• stylesheets/awesomplete.css (modified) (1 diff)
• stylesheets/main.css (modified) (124 diffs)
• stylesheets/page-dashicons.css (modified) (3 diffs)
• stylesheets/prism.css (added)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/content-reference.php

@@ -24 +24 @@
         ) );
 
-        $content = '<div class="content-toc">' . $TOC->add_toc( $content ) . '</div>';
+        $content = $TOC->add_toc( $content );
 
     endif;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php

@@ -148 +148 @@
 add_action( 'widgets_init', __NAMESPACE__ . '\\widgets_init' );
 
+/**
+ * Set up the theme.
+ */
 function init() {
 
@@ -165 +168 @@
 
     // Modify default breadcrumbs.
-    add_filter( 'breadcrumb_trail_items',  __NAMESPACE__ . '\\breadcrumb_trail_items_for_hooks', 10, 2 );
-    add_filter( 'breadcrumb_trail_items',  __NAMESPACE__ . '\\breadcrumb_trail_items_for_handbook_root', 10, 2 );
-
-    add_filter( 'syntaxhighlighter_htmlresult', __NAMESPACE__ . '\\syntaxhighlighter_htmlresult' );
+    add_filter( 'breadcrumb_trail_items', __NAMESPACE__ . '\\breadcrumb_trail_items_for_hooks', 10, 2 );
+    add_filter( 'breadcrumb_trail_items', __NAMESPACE__ . '\\breadcrumb_trail_items_for_handbook_root', 10, 2 );
+
+    add_filter( 'mkaz_code_syntax_force_loading', '__return_true' );
+    add_filter( 'mkaz_prism_css_path', __NAMESPACE__ . '\\update_prism_css_path' );
 }
 
@@ -178 +182 @@
  * be shown.
  *
- * @param  array $items The breadcrumb trail items
- * @param  array $args  Original args
+ * @param  array $items The breadcrumb trail items.
+ * @param  array $args  Original args.
  * @return array
  */
@@ -186 +190 @@
 
     // Bail early when not the single archive for hook
-    if ( ! is_singular() || $post_type !== get_post_type() || ! isset( $items[4] ) ) {
+    if ( ! is_singular() || get_post_type() !== $post_type || ! isset( $items[4] ) ) {
         return $items;
     }
@@ -209 +213 @@
  * item is already the unlinked handbook name, which is sufficient.
  *
- * @param  array $items The breadcrumb trail items
- * @param  array $args  Original args
+ * @param  array $items The breadcrumb trail items.
+ * @param  array $args  Original args.
  * @return array
  */
@@ -226 +230 @@
 
 /**
- * widgets_init function.
+ * Register widget areas.
  *
  * @access public
@@ -232 +236 @@
  */
 function widgets_init() {
-    register_sidebar( array(
-        'name'          => __( 'Sidebar', 'wporg' ),
-        'id'            => 'sidebar-1',
-        'before_widget' => '<aside id="%1$s" class="box gray widget %2$s">',
-        'after_widget'  => '</div></aside>',
-        'before_title'  => '<h1 class="widget-title">',
-        'after_title'   => '</h1><div class="widget-content">',
-    ) );
-
-    register_sidebar( array(
-        'name'          => __( 'Landing Page Footer - Left', 'wporg' ),
-        'id'            => 'landing-footer-1',
-        'description'   => __( 'Appears in footer of the primary landing page', 'wporg' ),
-        'before_widget' => '<div id="%1$s" class="widget box %2$s">',
-        'after_widget'  => '</div>',
-        'before_title'  => '<h4 class="widget-title">',
-        'after_title'   => '</h4>',
-    ) );
-
-    register_sidebar( array(
-        'name'          => __( 'Landing Page Footer - Center', 'wporg' ),
-        'id'            => 'landing-footer-2',
-        'description'   => __( 'Appears in footer of the primary landing page', 'wporg' ),
-        'before_widget' => '<div id="%1$s" class="widget box %2$s">',
-        'after_widget'  => '</div>',
-        'before_title'  => '<h4 class="widget-title">',
-        'after_title'   => '</h4>',
-    ) );
-
-    register_sidebar( array(
-        'name'          => __( 'Landing Page Footer - Right', 'wporg' ),
-        'id'            => 'landing-footer-3',
-        'description'   => __( 'Appears in footer of the primary landing page', 'wporg' ),
-        'before_widget' => '<div id="%1$s" class="widget box %2$s">',
-        'after_widget'  => '</div>',
-        'before_title'  => '<h4 class="widget-title">',
-        'after_title'   => '</h4>',
-    ) );
-}
-
-/**
+    register_sidebar(
+        array(
+            'name'          => __( 'Sidebar', 'wporg' ),
+            'id'            => 'sidebar-1',
+            'before_widget' => '<aside id="%1$s" class="box gray widget %2$s">',
+            'after_widget'  => '</div></aside>',
+            'before_title'  => '<h1 class="widget-title">',
+            'after_title'   => '</h1><div class="widget-content">',
+        )
+    );
+
+    register_sidebar(
+        array(
+            'name'          => __( 'Landing Page Footer - Left', 'wporg' ),
+            'id'            => 'landing-footer-1',
+            'description'   => __( 'Appears in footer of the primary landing page', 'wporg' ),
+            'before_widget' => '<div id="%1$s" class="widget box %2$s">',
+            'after_widget'  => '</div>',
+            'before_title'  => '<h4 class="widget-title">',
+            'after_title'   => '</h4>',
+        )
+    );
+
+    register_sidebar(
+        array(
+            'name'          => __( 'Landing Page Footer - Center', 'wporg' ),
+            'id'            => 'landing-footer-2',
+            'description'   => __( 'Appears in footer of the primary landing page', 'wporg' ),
+            'before_widget' => '<div id="%1$s" class="widget box %2$s">',
+            'after_widget'  => '</div>',
+            'before_title'  => '<h4 class="widget-title">',
+            'after_title'   => '</h4>',
+        )
+    );
+
+    register_sidebar(
+        array(
+            'name'          => __( 'Landing Page Footer - Right', 'wporg' ),
+            'id'            => 'landing-footer-3',
+            'description'   => __( 'Appears in footer of the primary landing page', 'wporg' ),
+            'before_widget' => '<div id="%1$s" class="widget box %2$s">',
+            'after_widget'  => '</div>',
+            'before_title'  => '<h4 class="widget-title">',
+            'after_title'   => '</h4>',
+        )
+    );
+}
+
+/**
+ * Modify the default query.
+ *
  * @param \WP_Query $query
  */
@@ -289 +303 @@
 }
 
+/**
+ * Regiser navigation menu area.
+ */
 function register_nav_menus() {
-
-    \register_nav_menus( array(
-        'devhub-menu' => __( 'Developer Resources Menu', 'wporg' ),
-        'devhub-cli-menu' => __( 'WP-CLI Commands Menu', 'wporg' ),
-        'reference-home-api' => __( 'Reference API Menu', 'wporg' ),
-    ) );
+    \register_nav_menus(
+        array(
+            'devhub-menu' => __( 'Developer Resources Menu', 'wporg' ),
+            'devhub-cli-menu' => __( 'WP-CLI Commands Menu', 'wporg' ),
+            'reference-home-api' => __( 'Reference API Menu', 'wporg' ),
+        )
+    );
 }
 
@@ -319 +337 @@
 }
 
+/**
+ * Filer the permalink for a taxonomy.
+ */
 function taxonomy_permalink( $link, $term, $taxonomy ) {
     global $wp_rewrite;
@@ -326 +347 @@
     }
 
-    if ( $taxonomy === 'wp-parser-source-file' ) {
+    if ( 'wp-parser-source-file' === $taxonomy ) {
         $slug = $term->slug;
         if ( substr( $slug, -4 ) === '-php' ) {
@@ -333 +354 @@
         }
         $link = home_url( user_trailingslashit( "reference/files/$slug" ) );
-    } elseif ( $taxonomy === 'wp-parser-since' ) {
+    } elseif ( 'wp-parser-since' === $taxonomy ) {
         $link = str_replace( $term->slug, str_replace( '-', '.', $term->slug ), $link );
     }
+
     return $link;
 }
@@ -354 +376 @@
 }
 
+/**
+ * Register and enqueue the theme assets.
+ */
 function theme_scripts_styles() {
     wp_enqueue_style( 'dashicons' );
+    // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion
     wp_enqueue_style( 'open-sans', '//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600' );
-    wp_enqueue_style( 'wporg-developer-style', get_stylesheet_uri(), array(), '4' );
+    wp_enqueue_style( 'wporg-developer-style', get_stylesheet_uri(), array(), filemtime( __DIR__ . '/style.css' ) );
     wp_enqueue_style(
         'wp-dev-sass-compiled',
@@ -364 +390 @@
         filemtime( __DIR__ . '/stylesheets/main.css' )
     );
-    wp_enqueue_script( 'wporg-developer-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20181209', true );
-    wp_enqueue_script( 'wporg-developer-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
-    wp_enqueue_script( 'wporg-developer-search', get_template_directory_uri() . '/js/search.js', array(), '20150430', true );
-    wp_enqueue_script( 'wporg-developer-chapters', get_template_directory_uri() . '/js/chapters.js', array( 'jquery' ), '20190603' );
-    wp_enqueue_script( 'wporg-developer-menu', get_template_directory_uri() . '/js/menu.js', array( 'jquery' ), '20180201', true );
+    wp_enqueue_script( 'wporg-developer-navigation', get_stylesheet_directory_uri() . '/js/navigation.js', array(), filemtime( __DIR__ . '/js/navigation.js' ), true );
+    wp_enqueue_script( 'wporg-developer-chapters', get_stylesheet_directory_uri() . '/js/chapters.js', array( 'jquery' ), filemtime( __DIR__ . '/js/chapters.js' ) );
+    wp_enqueue_script( 'wporg-developer-menu', get_stylesheet_directory_uri() . '/js/menu.js', array( 'jquery' ), filemtime( __DIR__ . '/js/menu.js' ), true );
 }
 
@@ -385 +409 @@
 
 /**
- * If a syntax highlighted code block exceeds a given number of lines, wrap the
- * markup with other markup to trigger the code expansion/collapse JS handling
- * already implemented for the code reference.
- *
- * @param string  $text The pending result of the syntax highlighting.
+ * Customize the syntax highlighter style.
+ * See https://github.com/PrismJS/prism-themes.
+ *
+ * @param string $path Path to the file to override, relative to the theme.
  * @return string
  */
-function syntaxhighlighter_htmlresult( $text ) {
-
-    // is_admin() is true in front end AJAX requests.
-    if ( is_admin() && !( defined( 'DOING_AJAX' ) && DOING_AJAX ) ) {
-        return $text;
-    }
-
-    $new_text      = '';
-    // Collapse is handled for >10 lines. But just go ahead and show the full
-    // code if that is just barely being exceeded (no one wants to expand to
-    // see one or two more lines).
-    $lines_to_show = 12;
-    $do_collapse   = ( substr_count( $text, "\n" ) - 1 ) > $lines_to_show;
-
-    if ( $do_collapse )  {
-        $new_text .= '<section class="source-content">';
-        $new_text .= '<div class="source-code-container">';
-    }
-
-    $new_text .= $text;
-
-    if ( $do_collapse ) {
-        $new_text .= '</div>';
-        $new_text .= '<p class="source-code-links"><span>';
-        $new_text .= '<a href="#" class="show-complete-source">' . __( 'Expand full source code', 'wporg' ) . '</a>';
-        $new_text .= '<a href="#" class="less-complete-source">' . __( 'Collapse full source code', 'wporg' ) . '</a>';
-        $new_text .= '</span></p>';
-        $new_text .= '</section>';
-    }
-
-    return $new_text;
-}
+function update_prism_css_path( $path ) {
+    return '/stylesheets/prism.css';
+}

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/header.php

@@ -8 +8 @@
  */
 
+\WordPressdotorg\skip_to( '#content' );
+
 echo do_blocks( '<!-- wp:wporg/global-header /-->' );
+
+$show_search = DevHub\should_show_search_bar();
+
+// When to show the masthead
+$show_masthead = is_front_page() || is_page( 'reference' );
 
 ?>
 
-<header id="masthead" class="site-header<?php if ( is_front_page() ) { echo ' home'; } ?>" role="banner">
+<header id="masthead" class="site-header<?php if ( $show_masthead ) { echo ' home'; } ?>" role="banner">
     <?php if ( function_exists( 'wporg_is_handbook' ) && wporg_is_handbook() && ! is_search() ) : ?>
         <a href="#" id="secondary-toggle" onclick="return false;"><strong><?php _e( 'Menu', 'wporg' ); ?></strong></a>
     <?php endif; ?>
-    <div class="site-branding">
+    <div class="site-branding<?php echo ! $show_masthead && $show_search ? ' has-actions': '' ?>">
+
         <h1 class="site-title">
             <a href="<?php echo esc_url( DevHub\get_site_section_url() ); ?>" rel="home"><?php echo DevHub\get_site_section_title(); ?></a>
@@ -25 +33 @@
         <?php endif; ?>
 
-        <nav id="site-navigation" class="main-navigation" role="navigation">
-            <button class="menu-toggle dashicons dashicons-arrow-down-alt2" aria-controls="primary-menu" aria-expanded="false" aria-label="<?php esc_attr_e( 'Primary Menu', 'wporg' ); ?>"></button>
-            <?php
-            $active_menu = is_post_type_archive( 'command' ) || is_singular( 'command' ) ? 'devhub-cli-menu' : 'devhub-menu';
-            wp_nav_menu( array(
-                'theme_location'  => $active_menu,
-                'container_class' => 'menu-container',
-                'container_id'    => 'primary-menu',
-            ) ); ?>
-        </nav>
+        <div>
+            <?php if ( $show_search ) : ?>
+                <?php get_search_form(); ?>
+            <?php endif; ?>
+
+            <?php if ( ! $show_masthead ) : ?>
+            <nav id="site-navigation" class="main-navigation" role="navigation">
+                <button class="menu-toggle dashicons dashicons-arrow-down-alt2" aria-controls="primary-menu" aria-expanded="false" aria-label="<?php esc_attr_e( 'Primary Menu', 'wporg' ); ?>"></button>
+                <?php
+                $active_menu = is_post_type_archive( 'command' ) || is_singular( 'command' ) ? 'devhub-cli-menu' : 'devhub-menu';
+                wp_nav_menu( array(
+                    'theme_location'  => $active_menu,
+                    'container_class' => 'menu-container',
+                    'container_id'    => 'primary-menu',
+                ) ); ?>
+            </nav>
+            <?php endif; ?>
+        </div>
     </div>
 </header><!-- #masthead -->
 
 <div id="page" class="hfeed site devhub-wrap">
-    <a href="#main" class="screen-reader-text"><?php _e( 'Skip to content', 'wporg' ); ?></a>
-
     <?php do_action( 'before' ); ?>
-    <?php
-    if ( DevHub\should_show_search_bar() ) : ?>
-        <div id="inner-search">
-            <?php get_search_form(); ?>
-            <div id="inner-search-icon-container">
-                <div id="inner-search-icon">
-                    <div class="dashicons dashicons-search"><span class="screen-reader-text"><?php _e( 'Search', 'wporg' ); ?></span></div>
-                </div>
-            </div>
-        </div>
-
-    <?php endif; ?>
     <div id="content" class="site-content">

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/autocomplete.php

@@ -43 +43 @@
         wp_enqueue_script( 'awesomplete' );
 
-        wp_register_script( 'autocomplete', get_template_directory_uri() . '/js/autocomplete.js', array( 'awesomplete' ), '20160524', true );
+        wp_register_script( 'autocomplete', get_stylesheet_directory_uri() . '/js/autocomplete.js', array( 'awesomplete' ), filemtime( dirname( __DIR__ ) . '/js/autocomplete.js' ), true );
         wp_localize_script( 'autocomplete', 'autocomplete', array(
                 'ajaxurl' => admin_url( 'admin-ajax.php' ),
@@ -100 +100 @@
             'search_orderby_title' => 1,
             'order'                => 'ASC',
+            '_autocomplete_search' => true,
         );
 
         $search = get_posts( $args );
 
-        if ( !empty( $search ) ) {
-            $titles = wp_list_pluck( $search, 'post_title' );
-            $form_data['posts'] = array_values( array_unique( $titles ) );
+        if ( ! empty( $search ) ) {
+            $post_types_function_like = array( 'wp-parser-function', 'wp-parser-method' );
+
+            foreach ( $search as $post ) {
+                $permalink = get_permalink( $post->ID );
+                $title     = $post->post_title;
+
+                if ( in_array( $post->post_type, $post_types_function_like ) ) {
+                    $title .= '()';
+                }
+
+                if ( $post->post_type == 'wp-parser-class' ) {
+                    $title =  'class ' . $title . ' {}';
+                }
+
+                $form_data['posts'][ $title ] = $permalink;
+            }
         }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/cli-commands.php

@@ -102 +102 @@
         }
 
-        // Determine importing user's ID. 
+        // Determine importing user's ID.
         $user = get_user_by( 'id', $user_id );
         if ( ! $user ) {
@@ -113 +113 @@
             'posts-to-posts' => 'posts-to-posts/posts-to-posts.php',
         ];
-
-        // Get the phpdoc-parser plugin if not installed.
-        $all_plugins = get_plugins();
-        if ( ! in_array( $plugins['phpdoc-parser'], array_keys( $all_plugins ) ) ) {
-            WP_CLI::log( "Installing phpdoc-parser plugin..." );
-            WP_CLI::runcommand( 'plugin install https://github.com/WordPress/phpdoc-parser/archive/master.zip' );
-            touch( WP_PLUGIN_DIR . '/phpdoc-parser/.devhub-parser-installed' );
-        }
-
-        // Verify the phpdoc-parser plugin is available locally.
-        wp_cache_set( 'plugins', [], 'plugins' ); // Reset cache of plugins.
-        $all_plugins = get_plugins();
-        if ( ! in_array( $plugins['phpdoc-parser'], array_keys( $all_plugins ) ) ) {
-            WP_CLI::error( 'The PHPDoc-Parser plugin (from https://github.com/WordPress/phpdoc-parser) could not be automatically installed locally in ' . WP_PLUGIN_DIR . '/. Please do so manually.' );
-        }
 
         // Install phpdoc-parser plugin dependencies if not installed.
@@ -189 +174 @@
 
         // 3. Run the parser.
+        // If running locally, run a quick parse which skips DB replication-lag sleep()'s
+        $quick = in_array( wp_get_environment_type(), array( 'local', 'development' ) ) ? '--quick' : '';
         WP_CLI::log( 'Running the parser (this will take awhile)...' );
-        WP_CLI::runcommand( "parser create {$path} --user={$user_id}" );
+        WP_CLI::runcommand( "parser create {$path} --user={$user_id} {$quick}" );
 
         // 4. Deactivate phpdoc-parser plugin.
@@ -279 +266 @@
         }
 
-        // Remove the phpdoc-parser plugin.
-        // @todo Add argument to facilitate disabling this step, or do a git checkout and only delete if no local changes.
-        $plugin = 'phpdoc-parser';
-        $all_plugins = get_plugins();
-        if ( in_array( $plugin . '/plugin.php', array_keys( $all_plugins ) ) ) {
-            // Only delete the plugin if it was automatically installed via parse command.
-            if ( file_exists( WP_PLUGIN_DIR . '/phpdoc-parser/.devhub-parser-installed' ) ) {
-                WP_CLI::log( "Deleting plugin {$plugin}..." );
-                WP_CLI::runcommand( "plugin delete {$plugin}" );
-            } else {
-                WP_CLI::log( "Plugin {$plugin} present but was manually installed or looks to have customizations so it must be deleted manually, if so desired." );
-            }
-        } else {
-            WP_CLI::log( "Plugin {$plugin} not present so it can't be deleted." );
-        }
-
         WP_CLI::success( 'Clean-up is complete.' );
     }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/formatting.php

@@ -40 +40 @@
         add_filter( 'devhub-format-description', array( __CLASS__, 'fix_param_hash_formatting' ), 9 );
         add_filter( 'devhub-format-description', array( __CLASS__, 'fix_param_description_html_as_code' ) );
+        add_filter( 'devhub-format-description', array( __CLASS__, 'fix_param_description_quotes_to_code' ) );
         add_filter( 'devhub-format-description', array( __CLASS__, 'convert_lists_to_markup' ) );
 
         add_filter( 'devhub-format-hash-param-description', array( __CLASS__, 'autolink_references' ) );
         add_filter( 'devhub-format-hash-param-description', array( __CLASS__, 'fix_param_description_parsedown_bug' ) );
+        add_filter( 'devhub-format-hash-param-description', array( __CLASS__, 'fix_param_description_quotes_to_code' ) );
+        add_filter( 'devhub-format-hash-param-description', array( __CLASS__, 'convert_lists_to_markup' ) );
 
         add_filter( 'devhub-function-return-type', array( __CLASS__, 'autolink_references' ) );
 
-        add_filter( 'syntaxhighlighter_htmlresult', array( __CLASS__, 'fix_code_entity_encoding' ), 20 );
-    }
-
-    /**
-     * Fixes bug in (or at least in using) SyntaxHighlighter code shortcodes that
-     * causes double-encoding of `>` character.
-     *
-     * @param string $content The text being handled as code.
-     * @return string
-     */
-    public static function fix_code_entity_encoding( $content ) {
-        return str_replace( '>', '>', $content );
+        add_shortcode( 'php', array( __CLASS__, 'do_shortcode_php' ) );
+        add_shortcode( 'js', array( __CLASS__, 'do_shortcode_js' ) );
+        add_shortcode( 'css', array( __CLASS__, 'do_shortcode_css' ) );
+        add_shortcode( 'code', array( __CLASS__, 'do_shortcode_code' ) );
+
+        add_filter(
+            'no_texturize_shortcodes',
+            function ( $shortcodes ) {
+                $shortcodes[] = 'php';
+                $shortcodes[] = 'js';
+                $shortcodes[] = 'css';
+                $shortcodes[] = 'code';
+                return $shortcodes;
+            }
+        );
     }
 
@@ -314 +320 @@
         // Note: This precludes them from being able to be used in an encoded fashion
         // within a parameter description.
-        $allowable_tags = array( 'code' );
+        $allowable_tags = array( 'code', 'br' );
         foreach ( $allowable_tags as $tag ) {
             $text = str_replace( array( "&lt;{$tag}&gt;", "&lt;/{$tag}&gt;" ), array( "<{$tag}>", "</{$tag}>" ), $text );
@@ -379 +385 @@
 
                 // Only if the text contains something that might be a function.
-                if ( false !== strpos( $content, '()' ) ) {
+                if ( str_contains( $content, '()' ) || str_contains( $content, '::' ) || str_contains( $content, '->' ) ) {
 
                     // Detect references to class methods, e.g. WP_Query::query()
@@ -385 +391 @@
                     $content = preg_replace_callback(
                         '~
-                            (?!<.*?)       # Non-capturing check to ensure not matching what looks like the inside of an HTML tag.
-                            (              # 1: The full method or function name.
-                                ((\w+)::)? # 2: The class prefix, if a method reference.
-                                (\w+)      # 3: The method or function name.
+                            (?!<.*?)                  # Non-capturing check to ensure not matching what looks like the inside of an HTML tag.
+                            (?P<name>
+                                (?P<class>
+                                    (\w+)             # Class Name
+                                    (::|->|-&gt;)     # Object reference
+                                    (\w+)             # Method
+                                    (?P<after>\(\)| ) # () or whitespace to terminate.
+                                )
+                                |
+                                (?P<function>\w+\(\)) # Functions must always end in ().
                             )
-                            \(\)           # The () that signifies either a method or function.
-                            (?![^<>]*?>)   # Non-capturing check to ensure not matching what looks like the inside of an HTML tag.
+                            (?![^<>]*?>)              # Non-capturing check to ensure not matching what looks like the inside of an HTML tag.
                         ~x',
-                        function ( $matches ) {
+                        function( $matches ) {
+                            $name  = rtrim( $matches['name'], '() ' );
+                            $after = ( '()' === $matches['after'] ? '' : ' ' );
+
                             // Reference to a class method.
-                            if ( $matches[2] ) {
+                            if ( $matches['class'] ) {
+                                $name = str_replace( array( '->', '-&gt;' ), '::', $name );
+
                                 // Only link actually parsed methods.
-                                if ( $post = get_page_by_title( $matches[1], OBJECT, 'wp-parser-method' ) ) {
+                                if ( $post = get_page_by_title( $name, OBJECT, 'wp-parser-method' ) ) {
                                     return sprintf(
-                                        '<a href="%s">%s</a>',
+                                        '<a href="%s" rel="method">%s</a>' . $after,
                                         get_permalink( $post->ID ),
-                                        $matches[0]
+                                        $name . '()'
                                     );
                                 }
@@ -408 +424 @@
                             } else {
                                 // Only link actually parsed functions.
-                                if ( $post = get_page_by_title( $matches[1], OBJECT, 'wp-parser-function' ) ) {
+                                if ( $post = get_page_by_title( $name, OBJECT, 'wp-parser-function' ) ) {
                                     return sprintf(
-                                        '<a href="%s">%s</a>',
+                                        '<a href="%s" rel="function">%s</a>' . $after,
                                         get_permalink( $post->ID ),
-                                        $matches[0]
+                                        $name . '()'
                                     );
                                 }
@@ -452 +468 @@
                         if ( $post = get_page_by_title( $matches[0], OBJECT, 'wp-parser-class' ) ) {
                             return sprintf(
-                                '<a href="%s">%s</a>',
+                                '<a href="%s" rel="class">%s</a>',
                                 get_permalink( $post->ID ),
                                 $matches[0]
@@ -484 +500 @@
      *
      * Recognizes lists where list items are denoted with an asterisk or dash.
+     * Examples:
+     * - https://developer.wordpress.org/reference/functions/add_menu_page/
+     * - https://developer.wordpress.org/reference/classes/wp_term_query/__construct/
+     * - https://developer.wordpress.org/reference/hooks/password_change_email/
+     * - https://developer.wordpress.org/reference/classes/WP_Query/parse_query/
      *
      * Does not handle nesting of lists.
@@ -491 +512 @@
      */
     public static function convert_lists_to_markup( $text ) {
-        $inline_list = false;
-        $li = '<br /> * ';
-
-        // Convert asterisks to a list.
-        // Example: https://developer.wordpress.org/reference/functions/add_menu_page/
-        if ( false !== strpos( $text, ' * ' ) )  {
-            // Display as simple plaintext list.
-            $text = str_replace( ' * ', "\n" . $li, $text );
-            $inline_list = true;
-        }
-
-        // Convert dashes to a list.
-        // Example: https://developer.wordpress.org/reference/classes/wp_term_query/__construct/
-        // Example: https://developer.wordpress.org/reference/hooks/password_change_email/
-        if ( false !== strpos( $text, ' - ' ) )  {
-            // Display as simple plaintext list.
-            $text = str_replace( ' - ', "\n" . $li, $text );
-            $inline_list = true;
-        }
-
-        // If list detected.
-        if ( $inline_list ) {
-            // Replace first item, ensuring the opening 'ul' tag is prepended.
-            $text = preg_replace( '~^' . preg_quote( $li ) . '(.+)$~mU', "<ul><li>\$1</li>\n", $text, 1 );
-            // Wrap subsequent list items in 'li' tags.
-            $text = preg_replace( '~^' . preg_quote( $li ) . '(.+)$~mU', "<li>\$1</li>\n", $text ); 
-            $text = trim( $text );
-
-            // Close the list if it hasn't been closed before start of next hash parameter.
-            //$text = preg_replace( '~(</li>)(\s+</li>)~smU', '$1</ul>$2', $text );
-            $text = preg_replace( '~(</li>)(\s*</li>)~smU', '$1</ul>$2', $text );
-
-            // Closethe list if it hasn't been closed and it's the end of the description.
-            if ( '</li>' === substr( trim( $text ), -5 ) ) {
-                $text .= '</ul>';
-            }
-        }
+        // Expand new lines for ease of matching.
+        $text = preg_replace( '!<br>\s*!', "<br>\n", $text );
+
+        // Trim any trailing <br>s on strings.
+        $text = preg_replace( '/<br>\s*$/s', '', $text );
+
+        // Add line items
+        $text = preg_replace( '!^\s*[*-] (.+?)(<br>)*$!m', '<li>$1</li>', $text, -1, $replacements_made );
+
+        if ( ! $replacements_made ) {
+            return $text;
+        }
+
+        // Wrap in a `ul`.
+        $text = substr_replace( $text, '<ul><li>', strpos( $text, '<li>' ), 4 ); // First instance
+        $text = substr_replace( $text, '</li></ul>', strrpos( $text, '</li>' ), 5 ); // Last instance.
 
         return $text;
@@ -598 +598 @@
                 }
                 if ( $name ) {
-                    $new_text .= "<b>'{$name}'</b><br />";
-                }
-                $new_text .= "<i><span class='type'>({$type})</span></i> {$description}";
+                    $new_text .= "<code>{$name}</code>";
+                }
+                $new_text .= "<span class='type'>{$type}</span><div class='desc'>{$description}</div>";
                 if ( ! $skip_closing_li ) {
                     $new_text .= '</li>';
@@ -671 +671 @@
     }
 
+    /**
+     * Wraps code-like references within 'code' tags.
+     *
+     * Example: https://developer.wordpress.org/reference/classes/wp_term_query/__construct/
+     *
+     * @param string $text Text.
+     * @return string
+     */
+    public static function fix_param_description_quotes_to_code( $text ) {
+        // Don't do anything if this is a hash notation string.
+        if ( ! $text || str_starts_with( $text, '{' ) || str_contains( $text, '<ul class="param-hash">' ) ) {
+            return $text;
+        }
+
+        $textarr     = preg_split( '/(<[^<>]+>)/', $text, -1, PREG_SPLIT_DELIM_CAPTURE ); // split out HTML tags
+        $text        = '';
+        $within_code = false;
+        foreach ( $textarr as $piece ) {
+            // HTML tags are untouched.
+            if ( str_starts_with( $piece, '<' ) || $within_code ) {
+                $text .= $piece;
+
+                if ( str_starts_with( $piece, '</code' ) ) {
+                    $within_code = false;
+                } elseif ( ! $within_code ) {
+                    $within_code = str_starts_with( $piece, '<code' );
+                }
+
+                continue;
+            }
+
+            // Pipe delimited types inline.
+            $piece = preg_replace( "/(([\w'\[\]]+\|)+[\w'\[\]]+)/", '<code>$1</code>', $piece, -1 );
+
+            // Quoted strings.
+            $piece = preg_replace( "/('[^' ]*')/", '<code>$1</code>', $piece, -1 );
+
+            // Replace ###PARAM### too.
+            // Example: http://localhost:8888/reference/hooks/password_change_email/
+            $piece = preg_replace( "/((#{2,})\w+\\2)/", '<code>$1</code>', $piece );
+
+            $text .= $piece;
+        }
+
+        return $text;
+    }
+
+    /**
+     * Render the php shortcode using the Code Syntax Block syntax.
+     *
+     * This is a workaround for user-submitted code, which used the php shortcode from Syntax Highlighter Evolved.
+     *
+     * @param array|string $attr    Shortcode attributes array or empty string.
+     * @param string       $content Shortcode content.
+     * @param string       $tag     Shortcode name.
+     * @return string
+     */
+    public static function do_shortcode_php( $attr, $content, $tag ) {
+        $attr = is_array( $attr ) ? $attr : array();
+        $attr['lang'] = 'php';
+
+        return self::do_shortcode_code( $attr, $content, $tag );
+    }
+
+    /**
+     * Render the js shortcode using the Code Syntax Block syntax.
+     *
+     * This is a workaround for user-submitted code, which used the js shortcode from Syntax Highlighter Evolved.
+     *
+     * @param array|string $attr    Shortcode attributes array or empty string.
+     * @param string       $content Shortcode content.
+     * @param string       $tag     Shortcode name.
+     * @return string
+     */
+    public static function do_shortcode_js( $attr, $content, $tag ) {
+        $attr = is_array( $attr ) ? $attr : array();
+        $attr['lang'] = 'js';
+
+        return self::do_shortcode_code( $attr, $content, $tag );
+    }
+
+    /**
+     * Render the css shortcode using the Code Syntax Block syntax.
+     *
+     * This is a new shortcode, but built to mirror the above two, `js` & `php`.
+     *
+     * @param array|string $attr    Shortcode attributes array or empty string.
+     * @param string       $content Shortcode content.
+     * @param string       $tag     Shortcode name.
+     * @return string
+     */
+    public static function do_shortcode_css( $attr, $content, $tag ) {
+        $attr = is_array( $attr ) ? $attr : array();
+        $attr['lang'] = 'css';
+
+        return self::do_shortcode_code( $attr, $content, $tag );
+    }
+
+    /**
+     * Render the code shortcode using the Code Syntax Block syntax.
+     *
+     * This is used in the handbooks content.
+     *
+     * @param array|string $attr    Shortcode attributes array or empty string.
+     * @param string       $content Shortcode content.
+     * @param string       $tag     Shortcode name.
+     * @return string
+     */
+    public static function do_shortcode_code( $attr, $content, $tag ) {
+        // Use an allowedlist of languages, falling back to PHP.
+        // This should account for all languages used in the handbooks.
+        $lang_list = [ 'js', 'json', 'sh', 'bash', 'html', 'css', 'scss', 'php', 'markdown', 'yaml' ];
+        $lang = in_array( $attr['lang'], $lang_list ) ? $attr['lang'] : 'php';
+
+        $content = self::_trim_code( $content );
+        // Hides numbers if <= 4 lines of code (last line has no linebreak).
+        $show_line_numbers = substr_count( $content, "\n" ) > 3;
+
+        // Shell is flagged with `sh` or `bash` in the handbooks, but Prism uses `shell`.
+        if ( 'sh' === $lang || 'bash' === $lang ) {
+            $lang = 'shell';
+        }
+
+        return do_blocks(
+            sprintf(
+                '<!-- wp:code {"lineNumbers":$3$s} --><pre class="wp-block-code"><code lang="%1$s" class="language-%1$s %4$s">%2$s</code></pre><!-- /wp:code -->',
+                $lang,
+                $content,
+                $show_line_numbers ? 'true' : 'false',
+                $show_line_numbers ? 'line-numbers' : ''
+            )
+        );
+    }
+
+    /**
+     * Trim off any extra space, including initial new lines.
+     * Strip out <br /> and <p> added by WordPress.
+     *
+     * @param string $content Shortcode content.
+     * @return string
+     */
+    public static function _trim_code( $content ) {
+        $content = preg_replace( '/<br \/>/', '', $content );
+        $content = preg_replace( '/<\/p>\s*<p>/', "\n\n", $content );
+        // Trim everything except leading spaces.
+        $content = trim( $content, "\n\r\t\v\x00" );
+        return $content;
+    }
 } // DevHub_Formatting
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/import-block-editor.php

@@ -21 +21 @@
         add_filter( 'wporg_markdown_after_transform',  array( $this, 'wporg_markdown_after_transform' ), 10, 2 );
         add_filter( 'wporg_markdown_edit_link',        array( $this, 'wporg_markdown_edit_link' ), 10, 2 );
-
-        add_filter( 'syntaxhighlighter_htmlresult',    array( $this, 'fix_code_entity_encoding' ) );
 
         add_action( 'pre_post_update', function( $post_id, $data ) {
@@ -144 +142 @@
 
     /**
-     * Fixes unwarranted HTML entity encoding within code shortcodes.
-     *
-     * @param string $content Post content.
-     * @return string
-     */
-    public function fix_code_entity_encoding( $content ) {
-        if ( $this->get_post_type() !== get_post_type() ) {
-            return $content;
-        }
-
-        if ( false !== mb_strpos( $content, '&' ) ) {
-            $content = preg_replace_callback(
-                '|(<pre class="brush[^>]+)(.+)(</pre)|Us',
-                function( $matches ) {
-                    return $matches[1] . html_entity_decode( $matches[2], ENT_QUOTES | ENT_HTML401 ) . $matches[3];
-                },
-                $content
-            );
-        }
-
-        return $content;
-    }
-
-    /**
      * Fixes fetched value of markdown_source meta field to not be the
      * raw.githubcontent.com domain that is currently incorrectly used
@@ -343 +317 @@
      */
     public function wporg_markdown_edit_link( $link, $post_id ) {
-        if ( $this->get_post_type() === get_post_type( $post_id ) ) {
+        if ( $this->get_post_type() === get_post_type( $post_id ) && defined( 'WP_CORE_STABLE_BRANCH' ) ) {
             $link = str_replace( '/wp/' . WP_CORE_STABLE_BRANCH . '/', '/trunk/', $link );
         }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/loop-pagination.php

@@ -55 +55 @@
         'current'      => $current,
         'prev_next'    => true,
-        //'prev_text'  => __( '« Previous' ), // This is the WordPress default.
-        //'next_text'  => __( 'Next »' ), // This is the WordPress default.
+        'prev_text'    => __( 'Previous', 'wporg' ),
+        'next_text'    => __( 'Next', 'wporg' ),
         'show_all'     => false,
-        'end_size'     => 1,
+        'end_size'     => 2,
         'mid_size'     => 1,
         'add_fragment' => '',
@@ -111 +111 @@
 }
 
-?>
+

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/registrations.php

@@ -75 +75 @@
         ) );
 
-        // Methods
+        // Rewrite rules. The more specific rules like `/embed` must be first, to override the more generic rules.
         add_rewrite_rule( 'reference/classes/page/([0-9]{1,})/?$', 'index.php?post_type=wp-parser-class&paged=$matches[1]', 'top' );
+        add_rewrite_rule( 'reference/classes/([^/]+)/embed/?$', 'index.php?post_type=wp-parser-class&name=$matches[1]&embed=true', 'top' );
+        add_rewrite_rule( 'reference/classes/([^/]+)/([^/]+)/embed/?$', 'index.php?post_type=wp-parser-method&name=$matches[1]-$matches[2]&embed=true', 'top' );
         add_rewrite_rule( 'reference/classes/([^/]+)/([^/]+)/?$', 'index.php?post_type=wp-parser-method&name=$matches[1]-$matches[2]', 'top' );
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/search.php

@@ -69 +69 @@
     public static function pre_get_posts( $query ) {
         // Don't modify anything if not a non-admin main search query.
-        if ( ! ( ! is_admin() && $query->is_main_query() && $query->is_search() ) ) {
+        if (
+            (
+                // Not the admin
+                is_admin() ||
+                // Not non-main queries / non-searches
+                ( ! $query->is_main_query() || ! $query->is_search() )
+            ) &&
+            // but yes if it's the autocomplete search (which is admin, and not the main query).
+            ! $query->get( '_autocomplete_search' )
+        ) {
             return;
         }
@@ -86 +95 @@
             // If user has '()' at end of a search string, assume they want a specific function/method.
             $s = htmlentities( $query->get( 's' ) );
-            if ( '()' === substr( $s, -2 ) ) {
+            if ( '()' === substr( $s, -2 ) || '(' == substr( $s, -1 ) ) {
                 // Enable exact search.
                 $query->set( 'exact',     true );
                 // Modify the search query to omit the parentheses.
-                $query->set( 's',         substr( $s, 0, -2 ) ); // remove '()'
+                $query->set( 's',         trim( $s, '()' ) );
                 // Restrict search to function-like content.
                 $query->set( 'post_type', array( 'wp-parser-function', 'wp-parser-method' ) );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/template-tags.php

@@ -114 +114 @@
             // Check if the current page is a reply to a note.
             $reply_id = 0;
-            if ( isset( $_GET['replytocom'] ) && $_GET['replytocom'] ) {        
+            if ( isset( $_GET['replytocom'] ) && $_GET['replytocom'] ) {
                 /* Javascript uses preventDefault() when clicking links with '?replytocom={comment_ID}'
                  * We assume Javascript is disabled when visiting a page with this query var.
@@ -176 +176 @@
             $can_user_post_note = DevHub\can_user_post_note( true, get_the_ID() );
             $is_user_verified   = $is_user_logged_in && $can_user_post_note;
-        
+
             $args['updated_note'] = 0;
             if ( isset( $_GET['updated-note'] ) && $_GET['updated-note'] ) {
@@ -621 +621 @@
      */
     function get_site_section_url() {
-        $parts = explode( '/', $GLOBALS['wp']->request );
-        switch ( $parts[0] ) {
-            case 'reference':
-            case 'plugins':
-            case 'themes':
-                return home_url( '/' . $parts[0] . '/' );
-            case 'cli':
-                return home_url( '/cli/commands/' );
-            default:
-                return home_url( '/' );
-        }
+        return home_url( '/' );
     }
 
@@ -645 +635 @@
             case 'resource':
                 return sprintf( __( 'Developer Resources: %s', 'wporg' ), get_the_title() );
-            case 'reference':
-                return __( 'Code Reference', 'wporg' );
-            case 'plugins':
-                return __( 'Plugin Handbook', 'wporg' );
-            case 'themes':
-                return __( 'Theme Handbook', 'wporg' );
-            case 'apis':
-                return __( 'Common APIs Handbook', 'wporg' );
-            case 'block-editor':
-                return __( 'Block Editor Handbook', 'wporg' );
-            case 'cli':
-                return __( 'WP-CLI Commands', 'wporg' );
-            case 'coding-standards':
-                return __( 'Coding Standards Handbook', 'wporg' );
-            case 'rest-api':
-                return __( 'REST API Handbook', 'wporg' );
             default:
+                if( is_page( 'reference' ) ) {
+                    return __( 'Code Reference', 'wporg' );
+                }
+
                 return __( 'Developer Resources', 'wporg' );
         }
@@ -685 +663 @@
         }
         return $name;
+    }
+
+    /**
+     * Returns the hook string.
+     *
+     * @param int $post_id
+     *
+     * @return string
+     */
+    function get_hook_type_name( $post_id ) {
+        $hook_type = get_post_meta( $post_id, '_wp-parser_hook_type', true );
+        if ( false !== strpos( $hook_type, 'action' ) ) {
+            if ( 'action_reference' === $hook_type ) {
+                $hook_type = 'do_action_ref_array';
+            } elseif ( 'action_deprecated' === $hook_type ) {
+                $hook_type = 'do_action_deprecated';
+            } else {
+                $hook_type = 'do_action';
+            }
+        } else {
+            if ( 'filter_reference' === $hook_type ) {
+                $hook_type = 'apply_filters_ref_array';
+            } elseif ( 'filter_deprecated' === $hook_type ) {
+                $hook_type = 'apply_filters_deprecated';
+            } else {
+                $hook_type = 'apply_filters';
+            }
+        }
+
+        return $hook_type;
     }
 
@@ -708 +716 @@
 
         if ( 'wp-parser-class' === get_post_type( $post_id ) ) {
-            return $signature;
+            return '<span class="keyword">class</span> ' . $signature . ' {}';
         }
 
@@ -726 +734 @@
             }
 
-            $hook_type = get_post_meta( $post_id, '_wp-parser_hook_type', true );
-            if ( false !== strpos( $hook_type, 'action' ) ) {
-                if ( 'action_reference' === $hook_type ) {
-                    $hook_type = 'do_action_ref_array';
-                } elseif ( 'action_deprecated' === $hook_type ) {
-                    $hook_type = 'do_action_deprecated';
-                } else {
-                    $hook_type = 'do_action';
-                }
-            } else {
-                if ( 'filter_reference' === $hook_type ) {
-                    $hook_type = 'apply_filters_ref_array';
-                } elseif ( 'filter_deprecated' === $hook_type ) {
-                    $hook_type = 'apply_filters_deprecated';
-                } else {
-                    $hook_type = 'apply_filters';
-                }
-            }
+            $hook_type = get_hook_type_name( $post_id );
 
             $delimiter = false !== strpos( $signature, '$' ) ? '"' : "'";
@@ -783 +774 @@
         $signature .= ')';
 
+        $return = get_return( $post_id, false );
+        if ( $return ) {
+            $signature .= ': ' . $return;
+        }
+
         return wp_kses_post( $signature );
     }
@@ -805 +801 @@
             $encountered_optional = false;
             foreach ( $tags as $tag ) {
-                // Fix unintended markup introduced by parser.
-                $tag = str_replace( array( '<strong>', '</strong>' ), '__', $tag );
-
                 if ( ! empty( $tag['name'] ) && 'param' == $tag['name'] ) {
                     $params[ $tag['variable'] ] = $tag;
@@ -872 +865 @@
                     }
                 }
-
             }
         }
@@ -878 +870 @@
         return $params;
     }
+
+    /**
+     * Recurse through parameters that referer to arguments in other functions or methods, and find the innermost parameter description.
+     * For example the description for the wp_count_terms( $args ) parameter refers to get_terms( $args ) which in turn refers to WP_Term_Query::__construct( $query ).
+     * Given the wp_count_terms( $args ) parameter, this will find and return the one for WP_Term_Query::__construct( $query ).
+     *
+     * @param array $param A single parameter array as found in `_wp-parser_args` postmeta.
+     * @param int   $recursion_limit Maximum number of levels to recurse through.
+     *
+     * @return array|null
+     */
+
+    function get_param_reference( $param, $recursion_limit = 3 ) {
+        if ( $recursion_limit > 0 && preg_match_all( '#rel="(function|method)">([^<>()]+)[(][)]</a>#', $param[ 'content' ], $matches, PREG_SET_ORDER ) ) {
+            foreach ( $matches as $match ) {
+                if ( $_post = get_page_by_title( $match[2], OBJECT, 'wp-parser-' . $match[1] ) ) {
+                    if ( $_params = get_params( $_post->ID ) ) {
+
+                        $arg_names_to_try = array_unique([
+                            $param['variable'], // An exact match for the name eg $args
+                            '$args',
+                            '$query', // For example get_terms( $args ) -> WP_Term_Query::__construct( $query )
+                        ]);
+
+                        foreach ( $arg_names_to_try as $variable_name ) {
+                            if ( isset( $_params[ $variable_name ] ) ) {
+                                // Sometimes the referenced doc page has another level of indirection!
+                                $recurse = get_param_reference( $_params[ $variable_name ], $recursion_limit - 1 );
+                                if ( $recurse ) {
+                                    $recurse[ 'parent' ] = $_post->post_title;
+                                    $recurse[ 'parent_var' ] = $variable_name;
+                                    return $recurse;
+                                } else {
+                                    $result = $_params[ $variable_name ];
+                                    $result[ 'parent' ] = $_post->post_title;
+                                    $result[ 'parent_var' ] = $variable_name;
+                                    return $result;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        return null;
+    }
+
 
     /**
@@ -916 +956 @@
      * @return string
      */
-    function get_return( $post_id = null ) {
+    function get_return( $post_id = null, $include_description = true ) {
 
         if ( empty( $post_id ) ) {
@@ -935 +975 @@
         $type        = apply_filters( 'devhub-function-return-type', $type, $post_id );
 
-        return "<span class='return-type'>({$type})</span> $description";
+        if ( $include_description ) {
+            return "<span class='return-type'>{$type}</span> $description";
+        } else {
+            return "<span class='return-type'>{$type}</span>";
+        }
     }
 
@@ -1246 +1290 @@
      */
     function post_type_has_uses_info( $post_type = null ) {
+        $post_type            = $post_type ? $post_type : get_post_type();
+        $post_types_with_uses = array( 'wp-parser-function', 'wp-parser-method', 'wp-parser-class' );
+
+        return in_array( $post_type, $post_types_with_uses );
+    }
+
+    /**
+     * Does the post type support hooks information?
+     *
+     * @param string $post_type Optional. The post type name. If blank, assumes current post type.
+     *
+     * @return boolean
+     */
+    function post_type_has_hooks_info( $post_type = null ) {
         $post_type             = $post_type ? $post_type : get_post_type();
-        $post_types_with_uses  = array( 'wp-parser-function', 'wp-parser-method', 'wp-parser-class' );
-
-        return in_array( $post_type, $post_types_with_uses );
+        $post_types_with_hooks = array( 'wp-parser-function', 'wp-parser-method' );
+
+        return in_array( $post_type, $post_types_with_hooks );
     }
 
@@ -1273 +1331 @@
             return $connected;
         } elseif ( 'wp-parser-function' === $post_type ) {
-            $connection_types = array( 'functions_to_functions', 'functions_to_methods', 'functions_to_hooks' );
+            $connection_types = array( 'functions_to_functions', 'functions_to_methods' );
         } else {
-            $connection_types = array( 'methods_to_functions', 'methods_to_methods', 'methods_to_hooks' );
+            $connection_types = array( 'methods_to_functions', 'methods_to_methods' );
         }
 
         $connected = new \WP_Query( array(
-            'post_type'           => array( 'wp-parser-function', 'wp-parser-method', 'wp-parser-hook' ),
+            'post_type'           => array( 'wp-parser-function', 'wp-parser-method' ),
             'connected_type'      => $connection_types,
-            'connected_direction' => array( 'from', 'from', 'from' ),
+            'connected_direction' => array( 'from', 'from' ),
+            'connected_items'     => $post_id,
+            'nopaging'            => true,
+        ) );
+
+        return $connected;
+    }
+
+    /**
+     * Retrieves a WP_Query object for the hook posts that the current post is linked to.
+     *
+     * @param int|WP_Post|null $post Optional. Post ID or post object. Default is global $post.
+     * @return WP_Query|null   The WP_Query if the post's post type supports 'uses', null otherwise.
+     */
+    function get_hooks( $post = null ) {
+        $post_id   = get_post_field( 'ID', $post );
+        $post_type = get_post_type( $post );
+
+        if ( 'wp-parser-function' === $post_type ) {
+            $connection_types = array( 'functions_to_hooks' );
+        } else {
+            $connection_types = array( 'methods_to_hooks' );
+        }
+
+        $connected = new \WP_Query( array(
+            'post_type'           => 'wp-parser-hook',
+            'connected_type'      => $connection_types,
+            'connected_direction' => array( 'from' ),
             'connected_items'     => $post_id,
             'nopaging'            => true,
@@ -1337 +1422 @@
 
     /**
+     * Find functions & methods that are often used by other functions and methods.
+     */
+    function _get_functions_to_exclude_from_uses() {
+        global $wpdb;
+
+        $ids = get_transient( __METHOD__ );
+        if ( $ids ) {
+            return $ids;
+        }
+
+        $ids = $wpdb->get_col(
+            "SELECT p2p_to
+            FROM {$wpdb->p2p} p2p
+            WHERE p2p_type IN ( 'methods_to_functions', 'functions_to_functions', 'methods_to_methods', 'functions_to_methods' )
+            GROUP BY p2p_to
+            HAVING COUNT(*) > 50"
+        );
+
+        set_transient( __METHOD__, $ids, DAY_IN_SECONDS );
+
+        return $ids;
+    }
+
+    /**
+     * Rearrange the results of get_uses() so that frequent functions are pushed to the bottom.
+     * Sorts the array in-place.
+     *
+     * @return int The number of infrequent items in the list (ie the cutoff point for show/hide).
+     */
+    function split_uses_by_frequent_funcs( &$posts ) {
+
+        $frequent_funcs = _get_functions_to_exclude_from_uses();
+
+        // Sort the posts array so frequently used functions are at the end
+        usort( $posts, function( $a, $b ) use ( $frequent_funcs ) {
+            return (int) in_array( $a->ID, $frequent_funcs ) - (int) in_array( $b->ID, $frequent_funcs );
+        } );
+
+        $infrequent_count = 0;
+        foreach ( $posts as $i => $post ) {
+            if ( in_array( $post->ID, $frequent_funcs ) ) {
+                break;
+            }
+            $infrequent_count = $i + 1;
+        }
+
+        return $infrequent_count;
+    }
+
+    /**
      * Returns the array of post types that have source code.
      *
@@ -1342 +1477 @@
      */
     function get_post_types_with_source_code() {
-        return array( 'wp-parser-class', 'wp-parser-method', 'wp-parser-function' );
+        return array( 'wp-parser-class', 'wp-parser-method', 'wp-parser-function', 'wp-parser-hook' );
     }
 
@@ -1428 +1563 @@
             }
             fclose( $handle );
+        }
+
+        // Trim leading whitespace.
+        if ( preg_match_all( "!^([\t ]*).+$!m", $source_code, $m ) ) {
+            $strip_prefix = min( array_map( 'strlen', $m[1] ) );
+            if ( $strip_prefix ) {
+                $source_code = preg_replace( "!^[\t ]{" . $strip_prefix . "}!m", '$1', $source_code );
+            }
         }
 
@@ -1594 +1737 @@
         $description = $post->post_content;
 
+        // Replace code blocks generated by Markdown with wp:code blocks.
+        $description = str_replace( '<pre><code>', '[code lang="php"]', $description );
+        $description = str_replace( '</code></pre>', '[/code]', $description );
+
         if ( $description ) {
             $description = apply_filters( 'the_content', apply_filters( 'get_the_content' , $description ) );
@@ -1624 +1771 @@
         $taxonomies = array( 'wp-parser-since', 'wp-parser-package', 'wp-parser-source-file' );
 
-        return ! ( is_search() || is_404() ) && ( is_singular( $post_types ) || is_post_type_archive( $post_types ) || is_tax( $taxonomies ) );
+        return ! ( is_search() || is_404() ) && ( is_singular( $post_types ) || is_post_type_archive( $post_types ) || is_tax( $taxonomies ) || is_page( 'reference' ) );
+    }
+
+    /**
+     * Should the search bar filters be shown?
+     *
+     * @return bool True if search bar filters should be shown.
+     */
+    function should_show_search_filters() {
+        $is_handbook = $GLOBALS['wp_query']->is_handbook;
+        return ( is_page( 'reference' ) || is_search() ) && ! $is_handbook;
     }
 
@@ -1859 +2016 @@
             'return',
             'explanation',
+            'methods',
             'source',
+            'hooks',
             'related',
-            'methods',
             'changelog',
             'notes'

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php

@@ -55 +55 @@
         // Customize allowed tags
         add_filter( 'wp_kses_allowed_html',            array( __CLASS__, 'wp_kses_allowed_html' ), 10, 2 );
-
-        // Make 'php' the default language
-        add_filter( 'syntaxhighlighter_shortcodeatts', array( __CLASS__, 'syntaxhighlighter_shortcodeatts' ) );
-
-        // Tweak code contained in shortcode
-        add_filter( 'syntaxhighlighter_precode',       array( __CLASS__, 'syntaxhighlighter_precode' ) );
 
         // Allowed HTML for a new child comment
@@ -170 +164 @@
     public static function scripts_and_styles() {
         if ( is_singular() ) {
-            wp_enqueue_script( 'wporg-developer-function-reference', get_template_directory_uri() . '/js/function-reference.js', array( 'jquery', 'syntaxhighlighter-core', 'syntaxhighlighter-brush-php' ), '20180724', true );
-            wp_enqueue_style( 'syntaxhighlighter-core' );
-            wp_enqueue_style( 'syntaxhighlighter-theme-default' );
-
-            wp_enqueue_script( 'wporg-developer-user-notes', get_template_directory_uri() . '/js/user-notes.js', array( 'jquery', 'quicktags' ), '20200110', true );
-            wp_enqueue_script( 'wporg-developer-user-notes-feedback', get_template_directory_uri() . '/js/user-notes-feedback.js', array( 'jquery', 'quicktags' ), '20181023', true );
-            wp_localize_script( 'wporg-developer-user-notes-feedback', 'wporg_note_feedback', array(
-                'show'             => __( 'Show Feedback', 'wporg' ),
-                'hide'             => __( 'Hide Feedback', 'wporg' ),
-            ) );
-        }
-    }
-
-    /**
-     * Sets the default language for SyntaxHighlighter shortcode.
-     *
-     * @param array $atts Shortcode attributes.
-     * @return array
-     */
-    public static function syntaxhighlighter_shortcodeatts( $atts ) {
-        $atts['language'] = 'php';
-        return $atts;
-    }
-
-    /**
-     * Subverts capital_P_dangit for SyntaxHighlighter shortcode.
-     *
-     * @param string $code
-     * @return string
-     */
-    public static function syntaxhighlighter_precode( $code ) {
-        return str_replace( 'Wordpress', 'Wordpress', $code );
+            wp_enqueue_script(
+                'wporg-developer-function-reference',
+                get_template_directory_uri() . '/js/function-reference.js',
+                array( 'jquery', 'wp-a11y' ),
+                filemtime( dirname( __DIR__ ) . '/js/function-reference.js' ),
+                true
+            );
+            wp_localize_script(
+                'wporg-developer-function-reference',
+                'wporgFunctionReferenceI18n',
+                array(
+                    'copy'   => __( 'Copy', 'wporg' ),
+                    'copied' => __( 'Code copied', 'wporg' ),
+                    'expand'   => __( 'Expand code', 'wporg' ),
+                    'collapse' => __( 'Collapse code', 'wporg' ),
+                )
+            );
+
+            wp_enqueue_script(
+                'wporg-developer-user-notes',
+                get_template_directory_uri() . '/js/user-notes.js',
+                array( 'jquery', 'quicktags' ),
+                filemtime( dirname( __DIR__ ) . '/js/user-notes.js' ),
+                true
+            );
+
+            wp_enqueue_script(
+                'wporg-developer-user-notes-feedback',
+                get_template_directory_uri() . '/js/user-notes-feedback.js',
+                array( 'jquery', 'quicktags' ),
+                filemtime( dirname( __DIR__ ) . '/js/user-notes-feedback.js' ),
+                true
+            );
+            wp_localize_script(
+                'wporg-developer-user-notes-feedback',
+                'wporg_note_feedback',
+                array(
+                    'show' => __( 'Show Feedback', 'wporg' ),
+                    'hide' => __( 'Hide Feedback', 'wporg' ),
+                )
+            );
+        }
     }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/autocomplete.js

@@ -19 +19 @@
     var searchfield = $( '#search-field', form ),
         processing = false,
-        search = '';
+        search = '',
+        autocompleteResults = {};
 
     var awesome = new Awesomplete( searchfield.get( 0 ), {
@@ -63 +64 @@
             return false;
         },
+        replace: function( text ) {
+            searchfield.val( text );
+
+            if ( text in autocompleteResults ) {
+                window.location = autocompleteResults[ text ];
+            }
+        }
     } );
 
@@ -102 +110 @@
                 }
 
-                if ( ( response.success === true ) && response.data.posts.length ) {
+                if ( response.success === true && Object.values( response.data.posts ).length ) {
+                    autocompleteResults = response.data.posts;
+
                     // Update the autocomplete list
-                    awesome.list = response.data.posts;
+                    awesome.list = Object.keys( response.data.posts );
                 }
             } )

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/function-reference.js

@@ +1 @@
+/* global jQuery, Prism, wporgFunctionReferenceI18n */
 /**
  * function-reference.js
@@ -4 +5 @@
  * Handles all interactivity on the single function page
  */
-var wporg_developer = ( function( $ ) {
-    'use strict';
 
-    var $sourceCollapsedHeight;
+// eslint-disable-next-line id-length -- $ OK.
+jQuery( function ( $ ) {
+    // 22.5px (line height) * 15 for 15 lines + 15px top padding + 10px extra.
+    // The extra 10px added to partially show next line so it's clear there is more.
+    const MIN_HEIGHT = 22.5 * 15 + 15 + 10;
 
-    var $usesList, $usedByList, $showMoreUses, $hideMoreUses, $showMoreUsedBy, $hideMoreUsedBy;
-
-    function onLoad() {
-        sourceCodeHighlightInit();
-
-        toggleUsageListInit();
+    function collapseCodeBlock( $element, $button ) {
+        $button.text( wporgFunctionReferenceI18n.expand );
+        $button.attr( 'aria-expanded', 'false' );
+        // This uses `css()` instead of `height()` to prevent jQuery from adding
+        // in the padding. We want to add in just the top padding, since the
+        // bottom is intentionally cut off.
+        $element.css( { height: MIN_HEIGHT + 'px' } );
     }
 
-    function sourceCodeHighlightInit() {
+    function expandCodeBlock( $element, $button ) {
+        $button.text( wporgFunctionReferenceI18n.collapse );
+        $button.attr( 'aria-expanded', 'true' );
+        // { height: auto; } can't be used here or the transition effect won't work.
+        $element.height( $element.data( 'height' ) );
+    }
 
-        // We require the SyntaxHighlighter javascript library
-        if ( undefined === window.SyntaxHighlighter ) {
-            return;
+    // For each code block, add the copy button & expanding functionality.
+    $( '.wp-block-code' ).each( function ( i, element ) {
+        const $element = $( element );
+        let timeoutId;
+
+        const $copyButton = $( document.createElement( 'button' ) );
+        $copyButton.text( wporgFunctionReferenceI18n.copy );
+        $copyButton.on( 'click', function () {
+            clearTimeout( timeoutId );
+            const code = $element.find( 'code' ).text();
+            if ( ! code ) {
+                return;
+            }
+
+            // This returns a promise which will resolve if the copy suceeded,
+            // and we can set the button text to tell the user it worked.
+            // We don't do anything if it fails.
+            window.navigator.clipboard.writeText( code ).then( function () {
+                $copyButton.text( wporgFunctionReferenceI18n.copied );
+                wp.a11y.speak( wporgFunctionReferenceI18n.copied );
+
+                // After 5 seconds, reset the button text.
+                timeoutId = setTimeout( function () {
+                    $copyButton.text( wporgFunctionReferenceI18n.copy );
+                }, 5000 );
+            } );
+        } );
+
+        const $container = $( document.createElement( 'div' ) );
+        $container.addClass( 'wp-code-block-button-container' );
+
+        $container.append( $copyButton );
+
+        // Check code block height, and if it's larger, add in the collapse
+        // button, and set it to be collapsed differently.
+        const originalHeight = $element.height();
+        if ( originalHeight > MIN_HEIGHT ) {
+            $element.data( 'height', originalHeight );
+
+            const $expandButton = $( document.createElement( 'button' ) );
+            $expandButton.on( 'click', function () {
+                if ( 'true' === $expandButton.attr( 'aria-expanded' ) ) {
+                    collapseCodeBlock( $element, $expandButton );
+                } else {
+                    expandCodeBlock( $element, $expandButton );
+                }
+            } );
+
+            collapseCodeBlock( $element, $expandButton );
+            $container.append( $expandButton );
         }
 
-        SyntaxHighlighter.highlight();
+        $element.before( $container );
+    } );
 
-        // 1em (margin) + 10 * 17px + 10. Lines are 1.1em which rounds to 17px: calc( 1em + 17px * 10 + 10 ).
-        // Extra 10px added to partially show next line so it's clear there is more.
-        $sourceCollapsedHeight = 196;
-        sourceCodeDisplay();
-    }
-
-    function sourceCodeDisplay( element ) {
-
-        if ( element !== undefined ) {
-            // Find table inside a specific source code element if passed.
-            var sourceCode = $( '.source-content', element ).find( 'table' );
-        } else {
-            // Find table inside all source code elements.
-            var sourceCode = $( '.source-content' ).find( 'table' );
-        }
-
-        if ( !sourceCode.length ) {
-            return;
-        }
-
-        sourceCode.each( function( t ) {
-            if ( ( $sourceCollapsedHeight - 12 ) < $( this ).height() ) {
-
-                var sourceContent = $( this ).closest( '.source-content' );
-
-                // Do this with javascript so javascript-less can enjoy the total sourcecode
-                sourceContent.find( '.source-code-container' ).css( {
-                    height: $sourceCollapsedHeight + 'px'
-                } );
-
-                sourceContent.find( '.source-code-links' ).find( 'span:first' ).show();
-                sourceContent.find( '.show-complete-source' ).show();
-                sourceContent.find( '.show-complete-source' ).off( 'click.togglesource' ).on( 'click.togglesource', toggleCompleteSource );
-                sourceContent.find( '.less-complete-source' ).off( 'click.togglesource' ).on( 'click.togglesource', toggleCompleteSource );
-            }
-        } );
-    }
-
-    function toggleCompleteSource( e ) {
-        e.preventDefault();
-
-        var sourceContent = $( this ).closest( '.source-content' );
-
-        if ( $( this ).parent().find( '.show-complete-source' ).is( ':visible' ) ) {
-            var heightGoal = sourceContent.find( 'table' ).height() + 45; // takes into consideration potential x-scrollbar
-        } else {
-            var heightGoal = $sourceCollapsedHeight;
-        }
-
-        sourceContent.find( '.source-code-container:first' ).animate( { height: heightGoal + 'px' } );
-
-        $( this ).parent().find( 'a' ).toggle();
-    }
+    let $usesList, $usedByList, $showMoreUses, $hideMoreUses, $showMoreUsedBy, $hideMoreUsedBy;
 
     function toggleUsageListInit() {
+        var usesToShow = $( '#uses-table' ).data( 'show' ),
+            usedByToShow = $( '#used-by-table' ).data( 'show' );
 
         // We only expect one used_by and uses per document
         $usedByList = $( 'tbody tr', '#used-by-table' );
-        $usesList   = $( 'tbody tr', '#uses-table' );
+        $usesList = $( 'tbody tr', '#uses-table' );
 
-        if ( $usedByList.length > 5 ) {
-            $usedByList = $usedByList.slice( 5 ).hide();
+        if ( $usedByList.length > usedByToShow ) {
+            $usedByList = $usedByList.slice( usedByToShow ).hide();
 
             $showMoreUsedBy = $( '.used-by .show-more' ).show().on( 'click', toggleMoreUsedBy );
@@ -93 +100 @@
         }
 
-        if ( $usesList.length > 5 ) {
-            $usesList = $usesList.slice( 5 ).hide();
+        if ( $usesList.length > usesToShow ) {
+            $usesList = $usesList.slice( usesToShow ).hide();
 
             $showMoreUses = $( '.uses .show-more' ).show().on( 'click', toggleMoreUses );
@@ -101 +108 @@
     }
 
-    function toggleMoreUses( e ) {
-        e.preventDefault();
+    function toggleMoreUses( event ) {
+        event.preventDefault();
 
         $usesList.toggle();
@@ -110 +117 @@
     }
 
-    function toggleMoreUsedBy( e ) {
-        e.preventDefault();
+    function toggleMoreUsedBy( event ) {
+        event.preventDefault();
 
         $usedByList.toggle();
@@ -119 +126 @@
     }
 
-    $( onLoad );
+    toggleUsageListInit();
 
-    // Expose the sourceCodeDisplay() function for usage outside of this function.
-    return {
-        sourceCodeDisplay: sourceCodeDisplay
-    };
+    // Runs before the highlight parsing is run.
+    // `env` is defined here: https://github.com/PrismJS/prism/blob/2815f699970eb8387d741e3ac886845ce5439afb/prism.js#L583-L588
+    Prism.hooks.add( 'before-highlight', function ( env ) {
+        // If the code starts with `<`, it's either already got an opening tag,
+        // or it starts with HTML. Either way, we don't want to inject here.
+        if ( 'php' === env.language && ! env.code.startsWith( '<' ) ) {
+            env.code = '<? ' + env.code;
+            env.hasAddedTag = true;
+        }
+    } );
 
-} )( jQuery );
+    // Runs before `highlightedCode` is set to the `innerHTML` of the container.
+    Prism.hooks.add( 'before-insert', function ( env ) {
+        if ( env.hasAddedTag ) {
+            env.highlightedCode = env.highlightedCode.replace(
+                '<span class="token delimiter important">&lt;?</span> ',
+                ''
+            );
+        }
+    } );
+} );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes-preview.js

@@ -116 +116 @@
     }
 
-    // Add toggle links to source code in preview if needed.
-    function updateSourceCode() {
-        if ( undefined !== wporg_developer ) {
-            wporg_developer.sourceCodeDisplay( preview );
-        }
-    }
-
     function updatePreview_HTML( content ) {
         // Update preview content
         previewContent.html( content );
 
-        if ( undefined !== window.SyntaxHighlighter ) {
-            SyntaxHighlighter.highlight();
-        }
-
-        // Add toggle link to source code in preview if needed.
-        updateSourceCode();
         spinner.hide();
     }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/package.json

@@ -1 +1 @@
 {
     "name": "wporg-developer",
+    "version": "1.0.0",
     "description": "Theme for WordPress Developer Resources",
     "repository": {
@@ -14 +15 @@
         "matchdep": "~2.0.0",
         "node-sass": "^6.0.1"
+    },
+    "scripts": {
+        "start": "grunt watch",
+        "build": "grunt"
     }
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-home-landing.php

@@ -17 +17 @@
 
                 <div class="box box-code-ref">
-                    <h3 class="widget-title"><div class="dashicons dashicons-editor-code"></div><?php _e( 'Code Reference', 'wporg' ); ?></h3>
+                    <h3><a href="<?php echo esc_url( home_url( '/reference' ) ); ?>" class="widget-title"><div class="dashicons dashicons-editor-code"></div><?php _e( 'Code Reference', 'wporg' ); ?></a></h3>
                     <p class="widget-description"><?php _e( 'Looking for documentation for the codebase?', 'wporg' ); ?></p>
                     <a href="<?php echo esc_url( home_url( '/reference' ) ); ?>" class="go"><?php _e( 'Visit the reference', 'wporg' ); ?></a>
@@ -23 +23 @@
 
                 <div class="box box-coding-standards">
-                    <h3 class="widget-title"><div class="dashicons dashicons-code-standards"></div><?php _e( 'Coding Standards', 'wporg' ); ?></h3>
+                    <h3><a href="<?php echo esc_url( get_post_type_archive_link( 'wpcs-handbook' ) ); ?>" class="widget-title"><div class="dashicons dashicons-code-standards"></div><?php _e( 'Coding Standards', 'wporg' ); ?></a></h3>
                     <p class="widget-description"><?php _e( 'Looking to ensure your code meets the standards?', 'wporg' ); ?></p>
                     <a href="<?php echo esc_url( get_post_type_archive_link( 'wpcs-handbook' ) ); ?>" class="go"><?php _e( 'Follow Standards ', 'wporg' ); ?></a>
@@ -29 +29 @@
 
                 <div class="box box-block-editor">
-                    <h3 class="widget-title"><div class="dashicons dashicons-edit"></div><?php _e( 'Block Editor', 'wporg' ); ?></h3>
+                    <h3><a href="<?php echo esc_url( get_post_type_archive_link( 'blocks-handbook' ) ); ?>" class="widget-title"><div class="dashicons dashicons-edit"></div><?php _e( 'Block Editor', 'wporg' ); ?></a></h3>
                     <p class="widget-description"><?php _e( 'Creating the building blocks of WordPress?', 'wporg' ); ?></p>
                     <a href="<?php echo esc_url( get_post_type_archive_link( 'blocks-handbook' ) ); ?>" class="go"><?php _e( 'Build Blocks ', 'wporg' ); ?></a>
@@ -35 +35 @@
 
                 <div class="box box-apis">
-                    <h3 class="widget-title"><div class="dashicons dashicons-admin-site-alt3"></div><?php _e( 'Common APIs', 'wporg' ); ?></h3>
+                    <h3><a href="<?php echo esc_url( get_post_type_archive_link( 'apis-handbook' ) ); ?>" class="widget-title"><div class="dashicons dashicons-admin-site-alt3"></div><?php _e( 'Common APIs', 'wporg' ); ?></a></h3>
                     <p class="widget-description"><?php _e( 'Interested in interacting with various APIs?', 'wporg' ); ?></p>
                     <a href="<?php echo esc_url( get_post_type_archive_link( 'apis-handbook' ) ); ?>" class="go"><?php _e( 'Utilize APIs', 'wporg' ); ?></a>
@@ -41 +41 @@
 
                 <div class="box box-themes">
-                    <h3 class="widget-title"><div class="dashicons dashicons-admin-appearance"></div><?php _e( 'Themes', 'wporg' ); ?></h3>
+                    <h3><a href="<?php echo esc_url( get_post_type_archive_link( 'theme-handbook' ) ); ?>" class="widget-title"><div class="dashicons dashicons-admin-appearance"></div><?php _e( 'Themes', 'wporg' ); ?></a></h3>
                     <p class="widget-description"><?php _e( 'Want to learn how to start theming WordPress?', 'wporg' ); ?></p>
                     <a href="<?php echo esc_url( get_post_type_archive_link( 'theme-handbook' ) ); ?>" class="go"><?php _e( 'Develop Themes ', 'wporg' ); ?></a>
@@ -47 +47 @@
 
                 <div class="box box-plugins">
-                    <h3 class="widget-title"><div class="dashicons dashicons-admin-plugins"></div><?php _e( 'Plugins', 'wporg' ); ?></h3>
+                    <h3><a href="<?php echo esc_url( get_post_type_archive_link( 'plugin-handbook' ) ); ?>" class="widget-title"><div class="dashicons dashicons-admin-plugins"></div><?php _e( 'Plugins', 'wporg' ); ?></a></h3>
                     <p class="widget-description"><?php _e( 'Ready to dive deep into the world of plugin authoring?', 'wporg' ); ?></p>
                     <a href="<?php echo esc_url( get_post_type_archive_link( 'plugin-handbook' ) ); ?>" class="go"><?php _e( 'Develop Plugins ', 'wporg' ); ?></a>
@@ -53 +53 @@
 
                 <div class="box box-rest-api">
-                    <h3 class="widget-title"><div class="dashicons dashicons-rest-api"></div><?php _e( 'REST API', 'wporg' ); ?></h3>
+                    <h3><a href="<?php echo esc_url( get_post_type_archive_link( 'rest-api-handbook' ) ); ?>" class="widget-title"><div class="dashicons dashicons-rest-api"></div><?php _e( 'REST API', 'wporg' ); ?></a></h3>
                     <p class="widget-description"><?php _e( 'Getting started on making WordPress applications?', 'wporg' ); ?></p>
                     <a href="<?php echo esc_url( get_post_type_archive_link( 'rest-api-handbook' ) ); ?>" class="go"><?php _e( 'Make Applications ', 'wporg' ); ?></a>
@@ -59 +59 @@
 
                 <div class="box box-wp-cli">
-                    <h3 class="widget-title"><div class="dashicons dashicons-arrow-right-alt2"></div><?php _e( 'WP-CLI', 'wporg' ); ?></h3>
+                    <h3><a href="<?php echo esc_url( get_post_type_archive_link( 'command' ) ); ?>" class="widget-title"><div class="dashicons dashicons-arrow-right-alt2"></div><?php _e( 'WP-CLI', 'wporg' ); ?></a></h3>
                     <p class="widget-description"><?php _e( 'Want to accelerate your workflow managing WordPress?', 'wporg' ); ?></p>
                     <a href="<?php echo esc_url( get_post_type_archive_link( 'command' ) ); ?>" class="go"><?php _e( 'Run Commands ', 'wporg' ); ?></a>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-reference-landing.php

@@ -14 +14 @@
         <div id="content-area">
             <?php breadcrumb_trail(); ?>
+
+            <main id="main" class="site-main" role="main">
+                <div class="reference-landing">
+                    <div class="new-in-guide two-columns clear">
+                        <div class="widget box gray">
+                        <?php $version = DevHub\get_current_version_term(); ?>
+                        <?php if ( $version && ! is_wp_error( $version ) ) : ?>
+                            <h3 class="widget-title"><?php printf( __( 'New &amp; Updated in WordPress %s:', 'wporg' ), substr( $version->name, 0, -2 ) ); ?></h3>
+                            <div class="widget-content">
+                                <ul class="unordered-list no-bullets">
+                                    <?php
+
+                                    $list = new WP_Query( array(
+                                        'posts_per_page' => 15,
+                                        'post_type'      => DevHub\get_parsed_post_types(),
+                                        'orderby'        => 'title',
+                                        'order'          => 'ASC',
+                                        'tax_query'      => array( array(
+                                            'taxonomy' => 'wp-parser-since',
+                                            'field'    => 'ids',
+                                            'terms'    => $version->term_id,
+                                        ) ),
+                                    ) );
+
+                                    while ( $list->have_posts() ) : $list->the_post();
+                                    ?>
+
+                                        <li>
+                                            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
+                                                <?php the_title(); ?>
+                                            </a>
+                                        </li>
+
+                                    <?php endwhile; ?>
+                                    <li class="view-all-new-in"><a href="<?php echo esc_attr( get_term_link( $version, 'wp-parser-since' ) ); ?>"><?php _e( 'View all&hellip;', 'wporg' ); ?></a></li>
+                                </ul>
+                            </div>
+                        <?php endif; ?>
+                        </div>
+                        <div class="widget box gray">
+                            <h3 class="widget-title"><?php _e( 'API', 'wporg' ); ?></h3>
+                            <div class="widget-content">
+                            <?php
+
+                            if ( has_nav_menu( 'reference-home-api' ) ) :
+                                wp_nav_menu(
+                                    [
+                                        'theme_location' => 'reference-home-api',
+                                        'menu_class'     => 'unordered-list no-bullets',
+                                    ]
+                                );
+                            else:
+                            ?>
+
+                                <ul class="unordered-list no-bullets">
+                                    <li><a href="https://codex.wordpress.org/Dashboard_Widgets_API"><?php _e( 'Dashboard widgets', 'wporg'); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Database_API"><?php _e( 'Database', 'worg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/HTTP_API"><?php _e( 'HTTP API', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Filesystem_API"><?php _e( 'Filesystem', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Global_Variables"><?php _e( 'Global Variables', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Metadata_API"><?php _e( 'Metadata', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Options_API"><?php _e( 'Options', 'wporg' ); ?></a></li>
+                                    <li><a href="https://developer.wordpress.org/plugins/"><?php _e( 'Plugins', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Quicktags_API"><?php _e( 'Quicktags', 'wporg' ); ?></a></li>
+                                    <li><a href="https://developer.wordpress.org/rest-api/"><?php _e( 'REST API', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Rewrite_API"><?php _e( 'Rewrite', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Settings_API"><?php _e( 'Settings', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Shortcode_API"><?php _e( 'Shortcode', 'wporg' ); ?></a></li>
+                                    <li><a href="https://developer.wordpress.org/themes/"><?php _e( 'Theme Modification', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/Transients_API"><?php _e( 'Transients', 'wporg' ); ?></a></li>
+                                    <li><a href="https://codex.wordpress.org/XML-RPC_WordPress_API"><?php _e( 'XML-RPC', 'wporg' ); ?></a></li>
+                                </ul>
+                            <?php endif; ?>
+
+                            </div>
+                        </div>
+                    </div><!-- /new-in-guide -->
+
+                </div><!-- /reference-landing -->
+
+            </main><!-- #main -->
         </div>
-
-        <main id="main" class="site-main" role="main">
-            <div class="reference-landing">
-                <div class="search-guide section clear">
-                    <h4 class="ref-intro"><?php _e( 'Want to know what&#39;s going on inside WordPress? Search the Code Reference for more information about WordPress&#39; functions, classes, methods, and hooks.', 'wporg' ); ?></h4>
-                    <h3 class="search-intro"><?php _e( 'Try it out:', 'wporg' ); ?></h3>
-                    <?php get_search_form(); ?>
-                </div><!-- /search-guide -->
-
-                <div class="topic-guide section">
-                    <h4><?php _e( 'Or browse through topics:', 'wporg' ); ?></h4>
-                    <ul class="unordered-list horizontal-list no-bullets">
-                        <li><a href="<?php echo get_post_type_archive_link( 'wp-parser-function' ) ?>"><?php _e( 'Functions', 'wporg' ); ?></a></li>
-                        <li><a href="<?php echo get_post_type_archive_link( 'wp-parser-hook' ) ?>"><?php _e( 'Hooks', 'wporg' ); ?></a></li>
-                        <li><a href="<?php echo get_post_type_archive_link( 'wp-parser-class' ) ?>"><?php _e( 'Classes', 'wporg' ); ?></a></li>
-                        <li><a href="<?php echo get_post_type_archive_link( 'wp-parser-method' ) ?>"><?php _e( 'Methods', 'wporg' ); ?></a></li>
-                    </ul>
-                </div><!-- /topic-guide -->
-
-                <div class="new-in-guide section two-columns clear">
-                    <div class="widget box gray">
-                    <?php $version = DevHub\get_current_version_term(); ?>
-                    <?php if ( $version && ! is_wp_error( $version ) ) : ?>
-                        <h3 class="widget-title"><?php printf( __( 'New &amp; Updated in WordPress %s:', 'wporg' ), substr( $version->name, 0, -2 ) ); ?></h3>
-                        <div class="widget-content">
-                            <ul class="unordered-list no-bullets">
-                                <?php
-
-                                $list = new WP_Query( array(
-                                    'posts_per_page' => 15,
-                                    'post_type'      => DevHub\get_parsed_post_types(),
-                                    'orderby'        => 'title',
-                                    'order'          => 'ASC',
-                                    'tax_query'      => array( array(
-                                        'taxonomy' => 'wp-parser-since',
-                                        'field'    => 'ids',
-                                        'terms'    => $version->term_id,
-                                    ) ),
-                                ) );
-
-                                while ( $list->have_posts() ) : $list->the_post();
-                                ?>
-
-                                    <li>
-                                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
-                                            <?php the_title(); ?>
-                                        </a>
-                                    </li>
-
-                                <?php endwhile; ?>
-                                <li class="view-all-new-in"><a href="<?php echo esc_attr( get_term_link( $version, 'wp-parser-since' ) ); ?>"><?php _e( 'View all&hellip;', 'wporg' ); ?></a></li>
-                            </ul>
-                        </div>
-                    <?php endif; ?>
-                    </div>
-                    <div class="widget box gray">
-                        <h3 class="widget-title"><?php _e( 'API', 'wporg' ); ?></h3>
-                        <div class="widget-content">
-                        <?php
-
-                        if ( has_nav_menu( 'reference-home-api' ) ) :
-                            wp_nav_menu(
-                                [
-                                    'theme_location' => 'reference-home-api',
-                                    'menu_class'     => 'unordered-list no-bullets',
-                                ]
-                            );
-                        else:
-                        ?>
-
-                            <ul class="unordered-list no-bullets">
-                                <li><a href="https://codex.wordpress.org/Dashboard_Widgets_API"><?php _e( 'Dashboard widgets', 'wporg'); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Database_API"><?php _e( 'Database', 'worg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/HTTP_API"><?php _e( 'HTTP API', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Filesystem_API"><?php _e( 'Filesystem', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Global_Variables"><?php _e( 'Global Variables', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Metadata_API"><?php _e( 'Metadata', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Options_API"><?php _e( 'Options', 'wporg' ); ?></a></li>
-                                <li><a href="https://developer.wordpress.org/plugins/"><?php _e( 'Plugins', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Quicktags_API"><?php _e( 'Quicktags', 'wporg' ); ?></a></li>
-                                <li><a href="https://developer.wordpress.org/rest-api/"><?php _e( 'REST API', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Rewrite_API"><?php _e( 'Rewrite', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Settings_API"><?php _e( 'Settings', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Shortcode_API"><?php _e( 'Shortcode', 'wporg' ); ?></a></li>
-                                <li><a href="https://developer.wordpress.org/themes/"><?php _e( 'Theme Modification', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/Transients_API"><?php _e( 'Transients', 'wporg' ); ?></a></li>
-                                <li><a href="https://codex.wordpress.org/XML-RPC_WordPress_API"><?php _e( 'XML-RPC', 'wporg' ); ?></a></li>
-                            </ul>
-                        <?php endif; ?>
-
-                        </div>
-                    </div>
-                </div><!-- /new-in-guide -->
-
-            </div><!-- /reference-landing -->
-
-        </main><!-- #main -->
     </div><!-- #primary -->
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/reference/template-params.php

@@ -17 +17 @@
             <?php foreach ( $params as $param ) : ?>
                 <?php if ( ! empty( $param['variable'] ) ) : ?>
-                    <dt><?php echo esc_html( $param['variable'] ); ?></dt>
+                    <dt>
+                        <code><?php echo esc_html( $param['variable'] ); ?></code>
+                        <?php if ( ! empty( $param['types'] ) ) : ?>
+                            <span class="type"><?php echo wp_kses_post( $param['types'] ); ?></span>
+                        <?php endif; ?>
+                        <?php if ( ! empty( $param['required'] ) && 'wp-parser-hook' !== get_post_type() ) : ?>
+                            <span class="required"><?php echo esc_html( $param['required'] ); ?></span>
+                        <?php endif; ?>
+                    </dt>
                 <?php endif; ?>
                 <dd>
-                    <p class="desc">
-                        <?php if ( ! empty( $param['types'] ) ) : ?>
-                            <span class="type"><?php printf( __( '(%s)', 'wporg' ), wp_kses_post( $param['types'] ) ); ?></span>
+                    <div class="desc">
+                        <?php if ( ! empty( $param['content'] ) ) : ?>
+                            <?php if ( $extra = get_param_reference( $param ) ) : ?>
+                                <span class="description"><?php echo wp_kses_post( $param['content'] ); ?></span>
+                                <details class="extended-description">
+                                    <summary>
+                                        <?php echo esc_html( sprintf( __( 'More Arguments from %s( ... %s )', 'wporg' ), $extra[ 'parent' ], $extra['parent_var'] ) ); ?>
+                                    </summary>
+                                    <span class="description"><?php echo wp_kses_post( $extra['content'] ); ?></span>
+                                </details>
+                            <?php else : ?>
+                                <span class="description"><?php echo wp_kses_post( $param['content'] ); ?></span>
+                            <?php endif; ?>
                         <?php endif; ?>
-                        <?php if ( ! empty( $param['required'] ) && 'wp-parser-hook' !== get_post_type() ) : ?>
-                            <span class="required"><?php printf( __( '(%s)', 'wporg' ), esc_html( $param['required'] ) ); ?></span>
-                        <?php endif; ?>
-                        <?php if ( ! empty( $param['content'] ) ) : ?>
-                            <span class="description"><?php echo wp_kses_post( $param['content'] ); ?></span>
-                        <?php endif; ?>
-                    </p>
+                    </div>
                     <?php if ( ! empty( $param['default'] ) ) : ?>
-                        <p class="default"><?php _e( 'Default value:', 'wporg' );?> <?php echo htmlentities( $param['default'] ); ?></p>
+                        <p class="default"><?php _e( 'Default:', 'wporg' );?> <code><?php echo htmlentities( $param['default'] ); ?></code></p>
                     <?php endif; ?>
                 </dd>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/reference/template-related.php

@@ -17 +17 @@
     $used_by_to_show = 5;
 
+    if ( $has_uses ) {
+        $uses_to_show = min( $uses_to_show, split_uses_by_frequent_funcs( $uses->posts ) );
+    }
+
     if ( $has_uses || $has_used_by ) :
     ?>
@@ -26 +30 @@
             <article class="uses">
                 <h3><?php _e( 'Uses', 'wporg' ); ?></h3>
-                <table id="uses-table">
+                <table id="uses-table" data-show="<?php echo esc_attr( $uses_to_show ) ?>">
                     <caption class="screen-reader-text"><?php esc_html_e( 'Uses', 'wporg' ); ?></caption>
                     <thead>
@@ -37 +41 @@
                         <?php while ( $uses->have_posts() ) : $uses->the_post(); ?>
                         <tr>
-                            <td>
-                                <span><?php echo esc_attr( get_source_file() ); ?>:</span>
+                            <td class="related-title">
                                 <a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php if ( ! in_array( get_post_type(), array( 'wp-parser-class', 'wp-parser-hook' ), true ) ) : ?>()<?php endif; ?></a>
+                                <span><?php echo esc_attr( get_source_file() ); ?></span>
                             </td>
                             <td class="related-desc">
@@ -52 +56 @@
                 <a href="#" class="show-more"><?php
                     /* translators: %d: remaining 'uses' count */
-                    printf( _n( 'Show %d more use', 'Show %d more uses', $uses->post_count - $uses_to_show, 'wporg' ),
+                    printf( _n( 'Show %s more use', 'Show %s more uses', $uses->post_count - $uses_to_show, 'wporg' ),
                         number_format_i18n( $uses->post_count - $uses_to_show )
                     );
@@ -66 +70 @@
             <article class="used-by">
                 <h3><?php esc_html_e( 'Used By', 'wporg' ); ?></h3>
-                <table id="used-by-table">
+                <table id="used-by-table" data-show="<?php echo esc_attr( $used_by_to_show ) ?>">
                     <caption class="screen-reader-text"><?php esc_html_e( 'Used By', 'wporg' ); ?></caption>
                     <thead>
@@ -77 +81 @@
                         <?php while ( $used_by->have_posts() ) : $used_by->the_post(); ?>
                         <tr>
-                            <td>
-                                <span><?php echo esc_attr( get_source_file() ); ?>:</span>
+                            <td class="related-title">
                                 <a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php if ( ! in_array( get_post_type(), array( 'wp-parser-class', 'wp-parser-hook' ), true ) ) : ?>()<?php endif; ?></a>
+                                    <span><?php echo esc_attr( get_source_file() ); ?></span>
                             </td>
                             <td class="related-desc">
@@ -92 +96 @@
                 <a href="#" class="show-more"><?php
                     /* translators: %d: remaining 'used by' count */
-                    printf( _n( 'Show %d more used by', 'Show %d more used by', $used_by->post_count - $used_by_to_show, 'wporg' ),
+                    printf( _n( 'Show %s more used by', 'Show %s more used by', $used_by->post_count - $used_by_to_show, 'wporg' ),
                         number_format_i18n( $used_by->post_count - $used_by_to_show )
                     );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/reference/template-source.php

@@ -11 +11 @@
 $source_file = get_source_file();
 if ( ! empty( $source_file ) ) :
+    $source_code = post_type_has_source_code() ? get_source_code() : '';
     ?>
     <hr />
@@ -16 +17 @@
         <h2><?php _e( 'Source', 'wporg' ); ?></h2>
         <p>
-            <?php printf( __( 'File: %s', 'wporg' ),
-                '<a href="' . esc_url( get_source_file_archive_link( $source_file ) ) . '">' . esc_html( $source_file ) . '</a>'
-            ); ?>
+            <?php
+            printf(
+                __( 'File: %s.', 'wporg' ),
+                '<code>' . esc_html( $source_file ) . '</code>'
+            );
+            ?>
+
+            <?php
+            printf(
+                '<a href="%s">%s</a>',
+                esc_url( get_source_file_archive_link( $source_file ) ),
+                __( 'View all references', 'wporg' )
+            );
+            ?>
         </p>
 
-        <?php if ( post_type_has_source_code() ) : ?>
-            <div class="source-code-container">
-                <pre class="brush: php; toolbar: false; first-line: <?php echo esc_attr( get_post_meta( get_the_ID(), '_wp-parser_line_num', true ) ); ?>"><?php echo htmlentities( get_source_code() ); ?></pre>
-            </div>
+        <?php if ( ! empty( $source_code ) ) : ?>
+            <?php
+                echo do_blocks(
+                    sprintf(
+                        '<!-- wp:code {"lineNumbers":true} --><pre class="wp-block-code" data-start="%1$s" aria-label="%2$s"><code lang="php" class="language-php line-numbers">%3$s</code></pre><!-- /wp:code -->',
+                        esc_attr( get_post_meta( get_the_ID(), '_wp-parser_line_num', true ) ),
+                        __( 'Function source code', 'wporg' ),
+                        htmlentities( $source_code )
+                    )
+                );
+            ?>
+
             <p class="source-code-links">
-                <span>
-                    <a href="#" class="show-complete-source"><?php _e( 'Expand full source code', 'wporg' ); ?></a>
-                    <a href="#" class="less-complete-source"><?php _e( 'Collapse full source code', 'wporg' ); ?></a>
-                </span>
                 <span><a href="<?php echo get_source_file_link(); ?>"><?php _e( 'View on Trac', 'wporg' ); ?></a></span>
                 <span><a href="<?php echo get_github_source_file_link(); ?>"><?php _e( 'View on GitHub', 'wporg' ); ?></a></span>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/admin.scss

@@ +1 @@
+// stylelint-disable selector-id-pattern -- These are generated names.
+
 /* =Admin CSS
 ----------------------------------------------- */
@@ -25 +27 @@
 
 /* Explanations */
-
 .fixed {
     .column-has_explanation {
@@ -40 +41 @@
         margin-top: 4px;
 
-        &:focus, &:hover {
+        &:focus,
+        &:hover {
             color: #0073aa;
         }
@@ -49 +51 @@
 
         .screen-reader-text {
+
             @media screen and (max-width: 782px) {
                 position: static;
@@ -59 +62 @@
         }
 
-        & [aria-hidden="true"] {
+        [aria-hidden="true"] {
+
             @media screen and (max-width: 782px) {
                 display: none;
@@ -81 +85 @@
             padding-left: 0;
         }
+
         &:nth-child(n+2) {
             padding-left: 8px;
@@ -89 +94 @@
 
 .status {
-    font-weight: bold;
+    font-weight: 700;
 
     &.pending {
-        color: red;
+        color: #f00;
     }
 
     &.publish {
-        color: green;
+        color: #008000;
     }
 }
+
 .post-type-wp-parser-function,
 .post-type-wp-parser-class,
@@ -108 +114 @@
             padding-bottom: 10px;
         }
+
         td {
             padding: 10px;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ +1 @@
+// stylelint-disable no-duplicate-selectors -- duplicates OK when nested.
+// stylelint-disable max-line-length -- Comments may be longer.
+// stylelint-disable font-family-no-missing-generic-family-keyword -- dashicons OK.
+// stylelint-disable function-url-quotes -- Allow quotes in `url("…")`.
+
 @import "reset";
 @import "global";
 
 .home .devhub-wrap {
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         font-family: "Open Sans", sans-serif;
     }
     padding-bottom: 0;
+
     #content {
         padding: 0;
@@ -14 +25 @@
 .devhub-wrap {
     padding-bottom: 1.5em;
+
     *,
-    *:before,
-    *:after {
+    *::before,
+    *::after {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -24 +36 @@
     /* Override inline style from wporg-markdown plugin. */
     a.github-edit {
-        padding: 0 .6em 0;
-    }
-
-    #content, #content-area {
-        padding: 0 #{"max( 20px, 2% )"};
-
-        .toc-heading {
-            clear: left;
-        }
+        padding: 0 0.6em 0;
+    }
+
+    #content,
+    #content-area {
+        padding: 0 12px; // Matches .site-branding padding
 
         table {
             border: 1px solid #f0f0f0;
-            @media ( max-width: 991px ) {
-                overflow-x: scroll;
-                display: block;
-            }
+
             th {
                 padding: 1em;
@@ -45 +51 @@
                 background: #f0f0f0;
             }
+
             td {
                 padding: 0.8em 1em;
@@ -51 +58 @@
         }
     }
+
+    @media ( min-width: 889px ) {
+        #content {
+            padding: 0;
+        }
+
+        #content-area {
+            padding: 0 24px;
+        }
+    }
+
     #content-area,
     .inner-wrap {
         margin: 2rem auto 0;
-        max-width: 60em;
-    }
+        max-width: $devhub-wrap-content-width;
+    }
+
     .page-header {
         margin-top: 1em;
@@ -89 +108 @@
         font-weight: 300;
         font-size: 28px;
-        line-height: 1em;
-        text-shadow: #fff 0px 1px 0px;
+        line-height: 1;
+        text-shadow: #fff 0 1px 0;
         font-family: $header-font;
     }
 
     h1 {
-        font-size: 28px;
         font-size: 3rem;
-        line-height: 32px;
-        line-height: 3.2rem;
+        line-height: 1.067;
         font-weight: 300;
         margin-bottom: 1.5rem;
     }
+
     h2 {
-        font-size: 22px;
         font-size: 2.2rem;
-        line-height: 26px;
-        line-height: 2.6rem;
+        line-height: 1.18;
         font-weight: 300;
     }
+
     h3 {
-        font-size: 20px;
         font-size: 2rem;
-        line-height: 24px;
-        line-height: 2.4rem;
+        line-height: 1.2;
         font-weight: 300;
     }
+
     h4 {
-        font-size: 18px;
         font-size: 1.8rem;
-        line-height: 22px;
-        line-height: 2.2rem;
+        line-height: 1.2;
         border-bottom: none;
         font-weight: 300;
 
         .dashicons {
-            font-size: 22px;
             font-size: 2.2rem;
-            line-height: 22px;
-            line-height: 2.2rem;
-            height: 22px;
-            width: 22px;
-            height: 2.2rem;
-            width: 2.2rem;
+            line-height: 1;
+            height: 1em;
+            width: 1em;
         }
     }
@@ -151 +161 @@
         border-radius: 3px;
         background: #fff;
-        color: rgba(0, 0, 0, .8);
+        color: rgba(0, 0, 0, 0.8);
         cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
-        font-size: 16px;
         font-size: 1.6rem;
         line-height: 1.1;
         float: none;
         height: auto;
-        padding: .6em 1.8em;
+        padding: 0.6em 1.8em;
         text-decoration: none;
         -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
+
         &:hover {
             border-color: #ccc #bbb #aaa #bbb;
             background: #f0f0f0;
         }
-        &:focus, &:active {
+
+        &:focus,
+        &:active {
             border-color: #aaa #bbb #bbb #bbb;
             background: #f0f0f0;
-            -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
-            box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
-        }
+            box-shadow: 0 0 3px get-color(blue-40);
+        }
+
         &.shiny-blue {
-            background-color: #21759b;
-            background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
-            background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
-            background-image:    -moz-linear-gradient(top, #2a95c5, #21759b);
-            background-image:     -ms-linear-gradient(top, #2a95c5, #21759b);
-            background-image:      -o-linear-gradient(top, #2a95c5, #21759b);
-            background-image:   linear-gradient(to bottom, #2a95c5, #21759b);
-            border-color: #21759b;
-            border-bottom-color: #1e6a8d;
-            -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
-            box-shadow: inset 0 1px 0 rgba(120,200,230,0.5);
+            background-color: get-color(blue-50);
+            border-color: get-color(blue-50);
+            border-bottom-color: get-color(blue-70);
             color: #fff;
             text-decoration: none;
-            text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-            padding: 3px 8px;
-            &:hover {
-                background-color: #278ab7;
-                background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
-                background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
-                background-image:    -moz-linear-gradient(top, #2e9fd2, #21759b);
-                background-image:     -ms-linear-gradient(top, #2e9fd2, #21759b);
-                background-image:      -o-linear-gradient(top, #2e9fd2, #21759b);
-                background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
-                border-color: #1b607f;
-                -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
-                box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: get-color(blue-60);
+                border-color: get-color(blue-80);
                 color: #fff;
-                text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-            }
-        }
+            }
+
+            &:focus,
+            &:active {
+                box-shadow: 0 0 3px 1px get-color(yellow-30);
+            }
+        }
+
         .dashicons {
+            transform: scale(-1, 1);
             vertical-align: text-bottom;
         }
@@ -210 +213 @@
         .three-columns a.button {
             max-width: 100%;
-            padding: .6em 1em;
-            font-size: 14px;
+            padding: 0.6em 1em;
             font-size: 1.4rem;
         }
+
         .three-columns .dashicons {
             width: 16px;
@@ -226 +229 @@
         padding: 0; /* Addresses excess padding in IE8/9 */
     }
+
     input[type="search"] {
         -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
-        -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
-        -moz-box-sizing:    content-box;
-        box-sizing:         content-box;
-    }
-    input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-        -webkit-appearance: none;
-    }
-    button::-moz-focus-inner,
-    input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
-        border: 0;
-        padding: 0;
-    }
+        box-sizing: content-box;
+    }
+
+    input[type="search"]::-webkit-search-decoration {
+        -webkit-appearance: none; /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
+    }
+
     input[type="text"],
     input[type="email"],
@@ -250 +249 @@
         border: 1px solid #ccc;
         border-radius: 3px;
+
         &:focus {
             color: #111;
         }
     }
+
     textarea {
         overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
@@ -263 +264 @@
     }
 
-    /* Text meant only for screen readers */
-    .screen-reader-text {
-        clip: rect(1px, 1px, 1px, 1px);
-        position: absolute !important;
-    }
-
-    .screen-reader-text:hover,
-    .screen-reader-text:active,
-    .screen-reader-text:focus {
-        background-color: #f1f1f1;
+    select {
+        appearance: none;
+        background-color: $color-white;
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24' aria-hidden='true'%3E%3Cpath d='M17.5 11.6 12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z'/%3E%3C/svg%3E%0A");
+        background-position: right center;
+        background-repeat: no-repeat;
+        background-size: 1.5em 1.5em;
+        padding-right: 2em;
+        color: get-color(gray-70);
+        border: 1px solid get-color(gray-70);
         border-radius: 3px;
-        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-        clip: auto !important;
-        color: #21759b;
-        display: block;
-        font-size: 14px;
-        font-weight: bold;
-        height: auto;
-        left: 5px;
-        line-height: normal;
-        padding: 15px 23px 14px;
-        text-decoration: none;
-        top: 5px;
-        width: auto;
-        z-index: 100000; /* Above WP toolbar */
     }
 
     /* Clearing */
-    .clear:before,
-    .clear:after,
-    .entry-content:before,
-    .entry-content:after,
-    .comment-content:before,
-    .comment-content:after,
-    .site-content:before,
-    .site-content:after,
-    .site-footer:before,
-    .site-footer:after {
-        content: '';
+    .clear::before,
+    .clear::after,
+    .entry-content::before,
+    .entry-content::after,
+    .comment-content::before,
+    .comment-content::after,
+    .site-content::before,
+    .site-content::after,
+    .site-footer::before,
+    .site-footer::after,
+    section::after {
+        content: "";
         display: table;
     }
 
-    .clear:after,
-    .entry-content:after,
-    .comment-content:after,
-    .site-content:after,
-    .site-footer:after {
+    .clear::after,
+    .entry-content::after,
+    .comment-content::after,
+    .site-content::after,
+    .site-footer::after,
+    section::after {
         clear: both;
     }
@@ -315 +304 @@
     /* =Content
     ----------------------------------------------- */
+
     .hentry {
         margin: 0;
     }
+
     .byline,
     .updated {
         display: none;
     }
+
     .single .byline,
     .group-blog .byline {
         display: inline;
     }
+
     .page-content,
     .entry-content,
@@ -331 +324 @@
         margin: 1.5em 0 0;
     }
+
     .page-links {
         clear: both;
@@ -342 +336 @@
         margin: 0;
     }
+
     .tablist li {
         display: inline-block;
         list-style: none;
     }
+
     .tablist a {
-        border-color: none;
+        border-color: transparent;
         background-color: transparent;
-        border-color: transparent;
         border-image: none;
         border-style: solid solid none;
         border-width: 1px 1px 0;
         display: inline-block;
-        padding: .5em 1em;
-        margin-bottom:-1px;
-    }
+        padding: 0.5em 1em;
+        margin-bottom: -1px;
+    }
+
     .tablist a[aria-selected],
     .tablist a:focus {
@@ -364 +360 @@
         color: #333;
     }
+
     .tab-section {
         margin-top: 0;
@@ -369 +366 @@
         border: none;
     }
+
     .tab-section[aria-hidden="true"] {
         display: none;
     }
+
     .tab-section:focus {
         background: #eee;
@@ -388 +387 @@
         padding: 0;
     }
+
     .wp-caption {
         border: 1px solid #ccc;
@@ -393 +393 @@
         max-width: 100%;
     }
+
     .wp-caption img[class*="wp-image-"] {
         display: block;
@@ -398 +399 @@
         max-width: 98%;
     }
+
     .wp-caption-text {
         text-align: center;
     }
+
     .wp-caption .wp-caption-text {
         margin: 0.8075em 0;
     }
+
     .site-main .gallery {
         margin-bottom: 1.5em;
     }
+
     .site-main .gallery a img {
         border: none;
@@ -412 +417 @@
         max-width: 90%;
     }
+
     .site-main .gallery dd {
         margin: 0;
@@ -437 +443 @@
     }
 
-    .widget-area .search-section.hide-if-js {
-        display: block;
-    }
-
     /* =Infinite Scroll
     ----------------------------------------------- */
@@ -456 +458 @@
 
 
-
     /*
      * Header area
@@ -468 +469 @@
         font-size: 1.3rem;
     }
+
     .breadcrumb-trail {
         margin-bottom: 2rem;
@@ -475 +477 @@
         }
     }
+
     h1.entry-title,
     h1.page-title {
         font-weight: 300;
-        font-size: 37px;
         font-size: 3.7rem;
         color: #606060;
         text-align: center;
+
         a {
             text-decoration: none;
@@ -491 +494 @@
     h2.entry-title {
         text-align: left;
-        font-size: 30px;
         font-size: 3rem;
-        padding: 0 0 24px;
         padding: 0 0 2.4rem;
 
@@ -507 +508 @@
 
     .home-landing .section {
-        padding: 50px 0 10px;
         padding: 5rem 0 1rem;
-        margin-top: 60px;
         margin-top: 6rem;
         overflow: auto;
@@ -515 +514 @@
         .no-bullets {
             li {
-                line-height: 20px;
-                line-height: 2rem;
-                margin-bottom: 12.5px;
+                line-height: 1.5;
                 margin-bottom: 1.25rem;
 
@@ -528 +525 @@
 
         .widget-title {
-            line-height: 60px;
-            line-height: 6rem;
+            line-height: 2.4;
+            cursor: pointer;
+            text-decoration: none;
+            color: inherit;
+            font-weight: inherit;
         }
 
@@ -542 +542 @@
 
     }
+
     .color.section {
         color: #fff;
     }
+
     .section {
+
         /*background: #0073aa;*/
-        padding: 30px 0;
         padding: 3rem 0;
 
         .box {
             text-align: center;
-
-            padding: 0 30px 90px;
             padding: 0 3rem 9rem;
             width: 320px;
@@ -559 +559 @@
             .widget-description {
                 padding: 1em 0 0;
-                margin-bottom: 5px;
                 margin-bottom: 1rem;
             }
         }
+
         &.search-guide {
-            padding-top: 60px;
             padding-top: 6rem;
             margin-top: 0;
@@ -574 +573 @@
 
         .widget-title {
-
-            font-size: 25px;
             font-size: 2.5rem;
-            line-height: 20px;
-            line-height: 2rem;
+            line-height: 0.8;
+
             .dashicons {
                 color: #222;
-                font-size: 108px;
                 font-size: 10.8rem;
-                line-height: 84px;
-                line-height: 8.4rem;
-                height: 84px;
-                width: 84px;
+                line-height: 0.778;
                 height: 8.4rem;
                 width: 8.4rem;
-                display: block;
                 margin: 0 auto;
                 opacity: 0.4;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
 
                 &.dashicons-rest-api {
-                    font-size:90px;
-                    font-size:9rem;
+                    font-size: 9rem;
                 }
             }
         }
+
         .three-columns .widget-title {
+
             @media ( min-width: 43em ) and ( max-width: 915px ) {
-                font-size: 35px;
                 font-size: 3.5rem;
             }
@@ -611 +606 @@
         background: #797878;
         color: #fff;
+
         h2,
         h3,
@@ -616 +612 @@
             color: #fff;
         }
+
         .inner-wrap {
-            max-width: 760px;
             max-width: 76rem;
             margin: 1.2em auto 0;
@@ -627 +623 @@
                 text-align: center;
             }
+
             .code-ref-right {
                 float: left;
@@ -644 +641 @@
                     text-align: center;
                 }
+
                 .code-ref-left .widget-description {
                     margin-left: 0;
@@ -658 +656 @@
         .widget-title {
             font-weight: 300;
-            font-size: 50px;
             font-size: 5rem;
-            line-height: 68px;
-            line-height: 6.8rem;
+            line-height: 1.36;
+
             .dashicons {
-                font-size: 68px;
                 font-size: 6.8rem;
-                line-height: 68px;
-                line-height: 6.8rem;
-                height: 6.8px;
-                width: 6.8px;
+                line-height: 1;
                 height: 6.8rem;
                 width: 6.8rem;
             }
+
             @media ( min-width: 43em ) and ( max-width: 915px ) {
-                font-size: 35px;
                 font-size: 3.5rem;
             }
         }
+
         .widget-description {
-            margin-left: 85px;
             margin-left: 8.5rem;
         }
@@ -687 +680 @@
         background: #f2f2f2;
         color: #606060;
+
         .widget-title {
             color: #606060;
@@ -692 +686 @@
 
             a {
-                color: #2D96C2;
-            }
-        }
+                color: #2d96c2;
+            }
+        }
+
         a {
             color: #606060;
             text-decoration: none;
 
-            &.make-wp-link:after {
+            &.make-wp-link::after {
                 content: "\f345";
-                font-family: 'dashicons';
+                font-family: dashicons;
                 margin-left: 4px;
                 vertical-align: middle;
@@ -709 +704 @@
 
     .section .home-primary-content {
-        max-width: 600px;
         max-width: 60rem;
         margin: 0 auto;
@@ -715 +709 @@
 
     .box {
-        padding: 30px;
         padding: 3rem;
         float: left;
         clear: none;
     }
+
     .three-columns .box {
+
         @media ( min-width: 43em ) and ( max-width: 915px ) {
-            padding: 30px 20px;
             padding: 3rem 2rem;
-        }
-    }
-
-    .reference-landing .section.search-section {
-        padding-top: 0;
-    }
-
-    div#inner-search {
-        background-color: #666;
-        margin-bottom: 1em;
-        padding-top: 2px;
-        .section.search-section {
-            color: #ffffff;
-        }
-        div#inner-search-icon-container {
-            margin: 0 auto;
-            max-width: 60em;
-            cursor: pointer;
-            div#inner-search-icon {
-                background-color: #666;
-                color: #ffffff;
-                text-align: center;
-                margin-right: 26px;
-                margin-left: 4px;
-                float: right;
-                padding: 5px;
-                -webkit-border-bottom-right-radius: 5px;
-                -webkit-border-bottom-left-radius: 5px;
-                -moz-border-radius-bottomright: 5px;
-                -moz-border-radius-bottomleft: 5px;
-                border-bottom-right-radius: 5px;
-                border-bottom-left-radius: 5px;
-                .dashicons-search {
-                    height: auto;
-                    width: auto;
-                    &:before {
-                        font-size: 36px;
-                        line-height: 36px;
-                    }
-                }
-            }
         }
     }
@@ -771 +724 @@
         margin: 5rem 0;
         font-size: 1.5rem;
+        line-height: 1.5;
+
+        select,
         input[type="submit"] {
-            margin-left: .5em;
-            padding: 0.2em 0.5em;
-            line-height: 1;
-            font-size: 1.5rem;
-        }
-    }
-
-    .searchform {
-        overflow: hidden;
-        height: auto;
-        position: relative;
-        input[type="text"] {
-            border-radius: 0;
-            margin: 0 auto;
-            padding: 0.5em;
-            width: 100%;
-        }
-        .button-search {
-            background: transparent;
-            border: none;
-            border-radius: 0;
-            box-shadow: none;
-            color: #32373c;
-            display: block;
-            height: 40px;
-            padding: 0.5rem 1rem;
-            position: absolute;
-            right: 0;
-            top: 0;
-            text-shadow: none;
-        }
-        label {
-            width: 560px;
-            width: 56rem;
-            max-width: 100%;
-            margin-right: 15px;
-            display: inline-block;
-            float: left;
-            .search-field input[type="text"] {
-                width: 100%;
-            }
-        }
-        div {
-            overflow: auto;
-        }
-        .search-post-type {
-            margin-top: 1em;
-
-            label {
-                border-right: 1px solid #ccc;
-                float: none;
-                width: inherit;
-                margin-left: 1em;
-                margin-right: 0;
-                padding-left: 0;
-                padding-right: 1.3em;
-                input {
-                    margin-bottom: 6px;
-                    padding-left: 0.5em;
-                    vertical-align: middle;
-                }
-            }
-            label:last-child {
-                border-right-width: 0;
-            }
-
-            @media ( max-width: 688px ) {
-                span {
-                    display: block;
-                }
-
-                label {
-                    margin-left: 0;
-                    margin-right: 1em;
-                    width: 130px;
-
-                    &:last-child {
-                        margin-right: 0;
-                        padding-right: 0;
-                        width: initial;
-                    }
-                }
-            }
+            margin: 0 0 0 0.5em;
+            padding: 0.333em 1em;
+            font-size: inherit;
+            line-height: inherit;
+        }
+
+        select {
+            padding-right: 2em;
         }
     }
 
     .search-results-summary {
-        font-style: italic;
         margin-bottom: 1em;
-    }
-
-    .reference-landing .section, .search-section {
-        max-width: 970px;
+        padding: 2rem;
+        background: get-color(gray-2);
+        border-radius: 2px;
+        font-size: 14px;
+    }
+
+    .reference-landing .section {
         max-width: 97rem;
         margin: 0 auto;
@@ -884 +767 @@
                 margin-bottom: 0;
             }
+
             &.search-guide {
                 padding-bottom: 0;
             }
-            &.section.topic-guide, &.section.new-in-guide  {
+
+            &.section.topic-guide,
+            &.section.new-in-guide {
                 padding-top: 0;
             }
@@ -896 +782 @@
     .sidebar .box {
         padding: 0;
-        border: 2px solid #cccccc;
-        background-color: #eeeeee;
+        border: 2px solid #ccc;
+        background-color: #eee;
+
         ul {
             padding: 2em;
@@ -904 +791 @@
 
         .widget-title {
-            padding: 10px 30px;
             padding: 1rem 30px;
-            font-size: 16px;
             font-size: 1.6rem;
         }
+
         .widget-content {
-            padding: 16px 30px;
             padding: 1.6rem 3rem;
         }
@@ -924 +809 @@
         width: 31%;
         margin: 1.15%;
+
         @media ( min-width: 43em ) and ( max-width: 915px ) {
             margin: 1% 0;
@@ -931 +817 @@
     .two-columns .box {
         width: 48%;
-        margin: 1% 1% 1% 0;
+        margin-top: 1%;
+        margin-bottom: 1%;
     }
 
     .new-in-guide.two-columns .box {
-        width: 43%;
+        margin-left: 1%;
+
         @media ( max-width: 688px ) {
             width: 100%;
-        }
-    }
+            margin-left: 0;
+        }
+    }
+
     .new-in-guide.two-columns .box:first-child {
-        width: 53%;
+        width: 48%;
+        margin-right: 1%;
+        margin-left: 0;
+
         @media ( max-width: 688px ) {
             width: 100%;
@@ -954 +847 @@
         padding: 0;
     }
+
     .horizontal-list {
         display: block;
@@ -960 +854 @@
         margin: 0;
         padding: 0;
-        text-align: center;
-    }
+    }
+
     .horizontal-list li {
         display: inline;
     }
+
     .horizontal-list li a {
-        padding: 0px 40px;
         padding: 0 4rem;
         border-left: 1px solid #ccc;
     }
+
     .horizontal-list li:first-child a {
         padding-left: 0;
@@ -993 +888 @@
         background: #fff;
         border: 1px solid #d8d8d8;
+
         .widget-title {
-            color: #666666;
+            color: #666;
             background: #d8d8d8;
             text-transform: uppercase;
@@ -1005 +901 @@
         padding: 0;
         margin: 0;
-        font-size: 13px;
         font-size: 1.3rem;
-        line-height: 30px;
-        line-height: 3rem;
+        line-height: 2.3;
     }
 
@@ -1014 +908 @@
         font-weight: 400;
     }
+
     .go {
         color: #4ca6cf;
@@ -1022 +917 @@
             margin: 24px 0;
             font-size: 20px;
-            font-weight: normal;
-        }
-    }
-    .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
+            font-weight: 400;
+        }
+    }
+
+    .wp-parser-class,
+    .wp-parser-function,
+    .wp-parser-hook,
+    .wp-parser-method {
         border-bottom: 1px solid #dfdfdf;
 
@@ -1032 +931 @@
             padding-left: 100px;
             text-indent: -100px;
-            color: #24831d;
-            font-family: $code-font;
             font-size: 20px;
-            .hook-func {
-                color: #888888;
-            }
-            .arg-type {
-                color: #cd2f23;
-                font-style: italic;
-            }
-            .arg-name {
-                color: #0f55c8;
-            }
-            .arg-default {
-                color: #000000;
-            }
-            a:hover {
-                border-bottom: 1px dotted #21759b;
-            }
-        }
+            line-height: 1.6;
+        }
+
         h2 {
             font-family: $serif-font;
-            margin-bottom: .5em;
-        }
-        .return-type {
-            font-style: italic;
-        }
-        .parameters {
+            margin-bottom: 0.5em;
+        }
+
+        .toc-header {
+            margin-top: 0 !important;
+        }
+
+        h1,
+        .signature-highlight {
+            color: get-color(green-50);
+            font-family: $code-font;
+            font-weight: 400;
+
+            .hook-func,
+            .keyword {
+                color: get-color(gray-50);
+            }
+
+            .arg-type {
+                color: get-color(red-50);
+                font-style: italic;
+                font-size: 0.9em;
+            }
+
+            .arg-name {
+                color: get-color(blue-60);
+            }
+
+            .arg-default {
+                color: $color-black;
+            }
+
+            a {
+                text-decoration: none;
+                color: inherit;
+
+                &:hover {
+                    border-bottom: 1px dotted get-color(blue-50);
+                }
+            }
+        }
+
+        .return .return-type {
+            margin-right: 8px;
+            font-size: 14px;
+        }
+
+        .return-type,
+        .return .type,
+        .parameters .type {
+            color: get-color(red-50);
+
+            a {
+                color: inherit;
+                text-decoration: none;
+                border-bottom: 1px dotted get-color(gray-70);
+
+                &:hover {
+                    border-bottom-style: solid;
+                }
+            }
+        }
+
+        .parameters,
+        .return {
             p {
                 margin-bottom: 0;
             }
+
+            dt code {
+                font-weight: 400;
+            }
+
             dd {
-                .desc {
-                    .type, .required {
-                        font-style: italic;
+                margin-bottom: 2em;
+
+                ul {
+                    margin-left: 2.5rem;
+
+                    ul {
+                        margin-bottom: 0.5em;
                     }
                 }
-                .default {
-                    font-style: italic;
+
+                code {
+                    background: #efefef;
+                    border-radius: 4px;
+                    padding: 2px 6px;
                 }
-
-                ul {
-                    margin-left: 25px;
-                    margin-left: 2.5rem;
-                }
-            }
+            }
+
+            dd:last-child {
+                margin-bottom: 0;
+            }
+
             .param-hash {
                 margin-left: 1.2em;
                 margin-bottom: 0.5em;
+
+                .desc {
+                    margin-left: 1.5em;
+                }
+
                 > li {
-                    margin-top: 1em;
+                    margin-top: 1.5em;
+
+                    > code {
+                        background: transparent;
+                        padding: unset;
+                    }
                 }
+
                 li li {
                     list-style-type: circle;
                 }
+
                 .param-hash > li {
                     list-style-type: disc;
                 }
             }
-        }
+
+            .desc {
+                margin: 1rem 0 0.5rem;
+            }
+
+            .extended-description {
+                margin: 1.5em 0 1.5em 1.2em;
+
+                summary + .description {
+                    display: block;
+                    margin-top: 1em;
+                }
+
+                summary {
+                    color: #21759b;
+                    text-decoration: underline;
+                }
+            }
+
+            .type,
+            .required {
+                margin: 0 4px;
+                font-weight: 400;
+            }
+
+            .type {
+                margin-left: 8px;
+                font-size: 14px;
+                font-style: 400;
+            }
+
+            .required {
+                font-size: 12px;
+            }
+        }
+
         .learn-more {
             background-color: #f1f1f1;
@@ -1098 +1099 @@
             padding: 20px;
         }
+
         .deprecated,
         .private-access {
             margin-top: 30px;
             padding: 20px;
+
             p {
-                margin-bottom: 0px;
-            }
-        }
+                margin-bottom: 0;
+            }
+        }
+
         .deprecated {
             background-color: #fbeaea;
             border: 1px solid #dc3232;
         }
+
         .deprecated-method {
             color: #be2423;
             font-style: italic;
         }
+
         .private-access {
             border: 1px solid #ffb900;
             background-color: #fff8e5;
         }
+
         .callout {
             margin-top: 30px;
         }
-        .toc-jump {
-            display: inline-block;
-            float: right;
-        }
-    }
-
-    .callout:before {
+    }
+
+    .callout::before {
         top: 0.4em;
     }
 
-    &.archive, &.search {
-        .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
+    &.archive,
+    &.search {
+        .wp-parser-class,
+        .wp-parser-function,
+        .wp-parser-hook,
+        .wp-parser-method {
             h1 {
                 font-family: $body-font;
                 color: #21759b;
-                font-weight: normal;
-            }
+                font-weight: 400;
+            }
+
             div {
                 &.sourcefile {
-                    color: #999999;
+                    color: #999;
                     font-style: italic;
                 }
@@ -1148 +1156 @@
 
     .single {
-        .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
+        .wp-parser-class,
+        .wp-parser-function,
+        .wp-parser-hook,
+        .wp-parser-method {
             border-bottom-style: none;
         }
@@ -1155 +1166 @@
     /* = Related
     ----------------------------------------------- */
+
     .related {
-        .show-more, .hide-more {
+        .show-more,
+        .hide-more {
             display: none;
         }
@@ -1162 +1175 @@
         /* Hide the title and toc links (same as .screen-reader-text)
            this allows for linking from the toc. */
-        h3, .uses .toc-jump, .used-by .toc-jump {
+
+        h3,
+        .uses .toc-jump,
+        .used-by .toc-jump {
             height: 0;
             margin-bottom: 0;
@@ -1169 +1185 @@
         }
 
-        .used-by, .uses {
+        .used-by,
+        .uses {
             overflow-x: auto;
             clear: right;
         }
 
-        td p  {
+        td p {
             margin-bottom: 0;
         }
 
-        th, td {
+        th,
+        td {
             width: 50%;
         }
 
+        .used-by,
+        .uses {
+            td.related-title span {
+                display: block;
+                color: #666;
+            }
+        }
+
         @media (max-width: 43em) {
-            .related-desc, span {
+            .related-desc,
+            span {
                 display: none;
             }
         }
-    }
-
-    .source-content {
-        overflow: auto;
     }
 
@@ -1196 +1219 @@
         margin-left: 2em;
         margin-top: 1em;
-    }
-
-    .source-code-links span {
-        border-left: 1px solid #999;
-        margin-left: 1em;
-        padding-left: 1em;
-    }
-
-    .source-code-links span:first-child {
-        display: none;
-        border-left: 0;
-        margin-left: 1em;
-        padding-left: 0;
+
+        span {
+            border-right: 1px solid #999;
+            margin-right: 1em;
+            padding-right: 1em;
+
+            &:last-of-type {
+                border-right: none;
+            }
+        }
     }
 
@@ -1216 +1236 @@
     }
 
-    .show-complete-source, .less-complete-source {
+    .show-complete-source,
+    .less-complete-source {
         display: none;
     }
@@ -1225 +1246 @@
             width: 10%;
         }
+
         .changelog-desc {
             width: 90%;
@@ -1230 +1252 @@
     }
 
+
     .loop-pagination {
-        text-align: center;
-        font-size: 18px;
-        margin-bottom: 20px;
+        display: flex;
+        margin: 3rem 0;
+        list-style: none;
+        justify-content: center;
+        align-items: center;
+        gap: 0.75rem;
+
+        .page-numbers {
+            display: inline-block;
+            padding: 1rem 1.25rem;
+            background: $color-white;
+            border: 1px solid get-color(gray-5);
+            border-radius: 2px;
+            line-height: 1;
+            text-decoration: none;
+
+            &:hover,
+            &:active {
+                color: $wp4--link-color--hover;
+            }
+
+            &.current {
+                border: 1px solid get-color(gray-90);
+                background: get-color(gray-90);
+                color: $color-white;
+            }
+
+            &.dots {
+                border: none;
+            }
+        }
     }
 
@@ -1241 +1292 @@
     }
 
-    // User contributed notes
-    .single-wp-parser-function, .single-wp-parser-method, .single-wp-parser-hook, .single-wp-parser-class {
-
+    /* User contributed notes*/
+    .single-wp-parser-function,
+    .single-wp-parser-method,
+    .single-wp-parser-hook,
+    .single-wp-parser-class {
         .bad-note .comment-content {
-            opacity: .6;
+            opacity: 0.6;
         }
 
@@ -1255 +1308 @@
         .comment-edited {
             background-color: #fff8e5;
-            padding: .2em .5em;
-            margin-right: .5em;
+            padding: 0.2em 0.5em;
+            margin-right: 0.5em;
             border-radius: 3px;
             border: 1px solid #ffb900;
@@ -1292 +1345 @@
         }
 
-        // Feedback
+        /* Feedback*/
         .comment-list li.depth-2 {
             border-top: 1px solid #dfdfdf;
@@ -1299 +1352 @@
 
             .comment-content {
-                padding: .9em 0;
-            }
+                padding: 0.9em 0;
+            }
+
             .comment-content p {
                 margin-bottom: 0;
-                font-size: .9em;
+                font-size: 0.9em;
             }
         }
@@ -1328 +1382 @@
             font-size: 1.8rem;
             font-weight: 300;
-            line-height: 2.2rem;
+            line-height: 1.222;
             margin-bottom: 1em;
         }
@@ -1357 +1411 @@
         }
 
-        label[for=comment],
+        label[for="comment"],
         .comment-form-comment,
         .comment-preview {
@@ -1364 +1418 @@
 
         .js & .comment-form-comment {
-            padding: 0 .7em .7em;
+            padding: 0 0.7em 0.7em;
         }
 
@@ -1381 +1435 @@
             border: 1px solid #eee;
         }
+
         .comment-meta {
-            padding: .5em 1em;
+            padding: 0.5em 1em;
             background-color: #f7f7f7;
             overflow: auto;
@@ -1388 +1443 @@
 
         .comment-content {
-            margin-left: 60px;
-            margin-left: 3.75rem;
             margin-left: 0;
             clear: both;
-            padding: 2rem 1.5rem .5rem;
+            padding: 2rem 1.5rem 0.5rem;
         }
 
         .comment-content ol {
             list-style: decimal inside;
-            margin: 0 0 1.5em 0;
-            border-top: none;
             margin: 0 0 1.5em 1.5em;
             padding: 0;
+            border-top: none;
         }
 
         .comment-content ul {
             list-style: square inside;
-            margin: 0 0 1.5em 0;
-            border-top: none;
             margin: 0 0 1.5em 1.5em;
             padding: 0;
+            border-top: none;
         }
 
@@ -1451 +1502 @@
         }
 
-        .comment-form ul, .feedback-form ul {
+        .comment-form ul,
+        .feedback-form ul {
             margin-left: 1.5em;
         }
@@ -1508 +1560 @@
      *
      */
+
     #content-area.has-sidebar {
         float: none;
         margin: 0 auto;
-        width: 60em;
+        width: $devhub-wrap-content-width;
     }
 
     .has-sidebar {
-
         main {
             float: right;
@@ -1521 +1573 @@
             margin: 0;
             clear: none;
-            padding: 0 12px;
             padding: 0 1.2rem;
         }
+
         .widget-area {
             float: left;
             overflow: hidden;
             width: 27%;
-            margin-left: -55px;
             margin: 0;
             clear: none;
@@ -1545 +1596 @@
             width: 49%;
             display: inline-block;
+
             &[rel="prev"] {
                 text-align: left;
             }
+
             &[rel="next"] {
                 text-align: right;
@@ -1561 +1614 @@
         margin-right: 10px;
     }
-    .user-note-voting-up .dashicons, .user-note-voting-down .dashicons {
+
+    .user-note-voting-up .dashicons,
+    .user-note-voting-down .dashicons {
         font-size: 30px;
         height: 30px;
@@ -1567 +1622 @@
         color: #000;
     }
+
     .site-main {
-        .user-note-voting-down, .user-note-voting-up {
+        .user-note-voting-down,
+        .user-note-voting-up {
             text-decoration: none;
         }
     }
+
     .user-note-voting-up {
         margin-left: -9px;
@@ -1584 +1642 @@
         margin-right: -2px;
     }
+
     .user-voted.user-note-voting-up .dashicons {
-        color: green;
-    }
+        color: color(green-50);
+    }
+
     .user-voted.user-note-voting-down .dashicons {
-        color: red;
-    }
+        color: color(red-50);
+    }
+
     .user-submitted-note .dashicons {
-        color: grey;
-    }
-
-    .syntaxhighlighter {
-        /* These are !important due to use of !important in SyntaxHighlighter Evolved plugin. */
-        max-width: 100% !important;
-        width: inherit !important;
-        padding-bottom: 0.5rem !important;
-    }
-
-    &.archive, &.blog {
+        color: color(gray-50);
+    }
+
+    &.archive,
+    &.blog {
         .hentry {
             padding: 0 0 1.5em 0;
@@ -1609 +1664 @@
 }
 
+/** Fix screen-reader-text font size. **/
+a.screen-reader-text:focus,
+.screen-reader-text:focus {
+    font-size: 1.4rem;
+}
+
 /** Site Header **/
-
 .site-header {
     background: #0073aa;
     float: none;
-    margin: 0 0 4em;
+    margin: 0;
     padding: 18px 0;
     width: auto;
-    margin: 0;
-}
+}
+
 .site-branding {
-    height: 32px;
     box-sizing: border-box;
     margin: 0 auto;
     max-width: 960px;
-    padding: 0 10px;
+    padding: 0 24px;
     position: relative;
-}
+
+    &.has-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        @media screen and (max-width: 500px) {
+            flex-direction: column;
+        }
+
+        .site-title {
+
+            @media screen and (max-width: 500px) {
+                margin-bottom: 2rem;
+            }
+
+            a {
+                font-size: 28px;
+            }
+        }
+    }
+}
+
 .site-title {
     line-height: 1;
     margin: 0;
     padding: 0;
-    font-family: 'Open Sans', sans-serif;
+    font-family: "Open Sans", sans-serif;
     display: inline-block;
     text-align: left;
-    color: black;
+    color: #000;
 
     a {
@@ -1656 +1737 @@
     }
 }
+
 .site-header.home {
-    padding: 28px 20px;
-    padding: 2.8rem 2.0rem;
+    padding: 2.8rem 2rem;
     text-align: center;
 
@@ -1668 +1749 @@
         max-width: none;
         font-weight: 300;
-        margin: 36px 0 11.25px;
         margin: 3.6rem 0 1.125rem;
         text-align: center;
@@ -1675 +1755 @@
 
         a {
-            font-size: 68.6646px;
             font-size: 6.86646rem;
 
@@ -1686 +1765 @@
 
     .site-description {
-        color: hsla(0,0%,100%,.8);
+        color: hsla(0, 0%, 100%, 0.8);
         font-size: 2.25rem;
         font-weight: 300;
@@ -1715 +1794 @@
         display: block;
         text-decoration: none;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
         font-size: 12.8px;
 
@@ -1755 +1834 @@
     }
 }
+
 .main-navigation {
     clear: both;
@@ -1782 +1862 @@
     -webkit-appearance: none;
 }
-.toggled .menu-toggle.dashicons:before {
+
+.toggled .menu-toggle.dashicons::before {
     content: "\f343";
 }
@@ -1790 +1871 @@
         display: none;
     }
+
     .main-navigation {
         float: right;
@@ -1824 +1906 @@
 
 /** WP editor link button modal **/
-
 #wp-link-wrap {
     height: 210px !important;
@@ -1843 +1924 @@
 
 /** Handbook **/
-
 aside[id^="handbook"] .widget-title,
 aside[id^="nav_menu"] .widget-title {
@@ -1864 +1944 @@
     margin-right: 4%;
 }
+
 .handbook-header {
-    line-height: 2em;
+    line-height: 2;
 
     h1 {
@@ -1873 +1954 @@
 
 .single-handbook {
-    font-size: 13px;
     font-size: 1.3rem;
 
-    p, ol, ul {
+    p,
+    ol,
+    ul {
         line-height: 1.6;
     }
 
     .site-main {
-        p, ol, ul {
+        p,
+        ol,
+        ul {
             font-size: 1.05em;
             color: #555;
@@ -1919 +2003 @@
 
 /** Table of Contents */
-
-.site-main .table-of-contents {
-    float: right;
-    width: 250px;
-    border: 1px solid #eee;
-    margin: 0 0 15px 15px;
-    z-index: 1;
-    position: relative;
-    color: #555d66;
-    background-color: #fff;
-    box-shadow: 0 0 8px rgba(0,0,0,0.1);
-    border-radius: 3px;
-
-    @media (min-width: 971px) {
-        margin: 0 -30px 15px 15px;
-    }
-
-    h2 {
-        margin: 0;
-        padding: 0.7rem 1.2rem;
-        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
-        font-size: 1.3em;
-        color: #32373c;
-        text-transform: uppercase;
-        border-bottom: 1px solid #eee;
-        margin-bottom: 0;
+.site-main {
+    .table-of-contents {
+        display: flex;
+        flex-direction: column;
+        min-width: 230px;
+        border: 1px solid #eee;
+        margin: 30px 0;
+        z-index: 1;
+        position: relative;
+        color: #555d66;
+        background-color: #fff;
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+        border-radius: 3px;
+
+        .code-reference & {
+            float: right;
+            margin-top: 15px;
+            margin-left: 15px;
+        }
+
+        h2 {
+            margin: 0;
+            padding: 0.7rem 1.2rem;
+            font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-size: 1.3em;
+            color: #32373c;
+            text-transform: uppercase;
+            border-bottom: 1px solid #eee;
+            margin-bottom: 0;
+        }
+
+        .items {
+            overflow-y: scroll;
+        }
     }
 }
@@ -1964 +2056 @@
                 color: #0073aa;
                 text-decoration: underline;
-            };
+            }
         }
 
@@ -1975 +2067 @@
 }
 
-/* Highlight current heading and adjust scroll position for fixed toolbar */
-.toc-heading:target {
-    position: initial;
-    padding-top: 50px;
-    margin-top: -50px;
-}
-
-/* Remove negative margin because there is no jump link before these headlines */
-.entry-content h2.toc-heading:first-of-type:target,
-.entry-content h3.toc-heading:first-of-type:target,
-h2.toc-heading + h3.toc-heading:target {
-    margin-top: 0;
-}
-
-.toc-heading:target:before {
-    content: '';
-    position: absolute;
-    left: -10px;
-    top: 50px;
-    border-left: 5px solid #0073aa;
-    height: 50%;
-    height: calc(100% - 50px);
-}
-
-.toc-jump {
+.toc-header {
+    margin-bottom: 1em;
+}
+
+.toc-heading {
     position: relative;
-    height: 50px;
-}
-
-.toc-jump:after {
-    content: '';
-    display: table;
-    clear: both;
-}
-
-.toc-jump a {
-    z-index: 1;
-}
-
-@media (max-width: 480px) {
-    .table-of-contents {
-        display: none;
-    }
+}
+
+.toc-heading a::before {
+    color: get-color(gray-30);
+}
+
+.toc-heading:target a::before {
+    color: inherit;
+}
+
+.toc-heading a:hover::before,
+.toc-heading a:active::before,
+.toc-heading a:focus::before {
+    color: get-color(blue-50);
 }
 
 /** Menu */
-
 #secondary aside.widget_wporg_handbook_pages,
 #secondary aside.widget_nav_menu {
@@ -2032 +2100 @@
 .widget_nav_menu h1 {
     font-size: 1.6em;
-    font-weight: bold;
+    font-weight: 700;
     margin-bottom: 0.6em;
 }
@@ -2042 +2110 @@
         outline: 0;
     }
+
     ul {
         margin-left: 0;
@@ -2067 +2136 @@
                 background-color: #fafafa;
                 border: 0;
-                border-left: 1px solid rgba(0,0,0,0.05);
+                border-left: 1px solid rgba(0, 0, 0, 0.05);
                 border-radius: 0;
                 box-shadow: none;
@@ -2081 +2150 @@
             &.open > div > .dashicons {
                 transform: rotate(180deg);
-                border-right: 1px solid rgba(0,0,0,0.05);
+                border-right: 1px solid rgba(0, 0, 0, 0.05);
                 border-left: none;
             }
@@ -2102 +2171 @@
                 background-color: #0073aa;
             }
+
             &.active {
                 color: #555;
                 background-color: #fff;
-                font-weight: bold;
+                font-weight: 700;
             }
         }
@@ -2113 +2183 @@
         }
     }
-    & > ul > li {
+
+    > ul > li {
         &.open > div > a {
             &:not(:focus) {
                 color: #0073aa;
             }
+
             &:hover {
                 color: #fff;
@@ -2124 +2196 @@
         }
     }
+
     .current-menu-item ul,
     .current-menu-ancestor ul {
         display: block;
     }
+
     .current-menu-ancestor:not(.open) .expandable .dashicons:not(:focus),
     .current-menu-item > .expandable .dashicons:not(:focus) {
@@ -2133 +2207 @@
         color: #0073aa;
     }
+
     .current-menu-ancestor .expandable .dashicons:hover,
     .current-menu-item .expandable .dashicons:hover {
@@ -2138 +2213 @@
         color: #fff !important;
     }
+
     .children,
     .sub-menu {
@@ -2153 +2229 @@
                 position: relative;
             }
+
             ul {
                 margin-left: 12px;
@@ -2171 +2248 @@
 
     #content {
-        max-width: 960px;
+        max-width: $single-handbook-content-width;
         margin: 0 auto;
         display: flex;
-        padding-top: 0;
+        padding: 0 #{"max( 20px, 2% )"};
     }
 
@@ -2194 +2271 @@
         background: #fff;
         box-sizing: border-box;
-        width: 72%;
-
-        @media(max-width: 876px) {
+        width: $single-handbook-content-primary-width * 100%;
+
+        @media (max-width: 876px) {
             padding: 4rem 20px;
             width: 100%;
@@ -2210 +2287 @@
         top: 10px;
     }
+
     .make-welcome {
         margin: 0 !important;
     }
 }
+
 /** Handbook **/
-
 .rest-api-handbook-reference {
-
     .table-of-contents {
         float: none;
@@ -2229 +2306 @@
 
             &::after {
-                content: '; ';
+                content: "; ";
             }
 
             &:last-child::after {
-                content: '';
+                content: "";
             }
         }
@@ -2241 +2318 @@
 
 /* Menu toggle */
-
 #secondary-toggle {
     display: none;
 }
+
 body.responsive-show {
     position: fixed;
@@ -2253 +2330 @@
         overflow-y: scroll;
         z-index: 500;
-
-        .search-section {
-            margin-top: 32px;
-            width: 100%;
-        }
-    }
+    }
+
     #secondary-toggle {
         height: 32px;
@@ -2264 +2337 @@
         width: 100%;
     }
+
     #primary-modal {
         display: block;
     }
+
     #o2-expand-editor {
         display: none;
     }
 }
+
 @media only screen and (max-width: 782px) {
     body.responsive-show {
@@ -2283 +2359 @@
     }
 }
+
 @media (max-width: 876px) {
     #secondary {
         position: fixed;
         z-index: 10;
-        bottom: 0px;
+        bottom: 0;
         overflow-y: auto;
-        transition: all .25s ease;
+        transition: all 0.25s ease;
         top: 32px;
         left: -100%;
@@ -2308 +2385 @@
         z-index: 1;
 
-        &:before {
-            content: '\f333';
+        &::before {
+            content: "\f333";
             -webkit-font-smoothing: antialiased;
-            font: normal 32px/1 'dashicons';
+            font: 400 32px/1 dashicons;
             position: relative;
             top: 0;
             color: #fff;
         }
+
         strong {
             display: none;
         }
     }
+
     #page {
         overflow-x: hidden;
     }
+
     body.responsive-show {
         overflow-y: visible;
@@ -2330 +2410 @@
             overflow-x: visible;
         }
-        #secondary-toggle:before {
+
+        #secondary-toggle::before {
             color: #0073aa;
         }
@@ -2346 +2427 @@
 
 @media ( max-width: 59.999999em ) {
-
     .devhub-wrap {
         max-width: 100%;
@@ -2355 +2435 @@
             padding: 0 13px;
         }
+
         #content-area,
         .inner-wrap {
@@ -2362 +2443 @@
         }
 
-        &.archive, &.search {
+        &.archive,
+        &.search {
             .meta {
                 font-size: 100%;
@@ -2373 +2455 @@
         }
     }
-
+}
+
+@media (min-width: 90em) {
+    .site-main .table-of-contents {
+        position: fixed;
+        width: 15vw;
+
+        .code-reference & {
+            margin-left: 0;
+            left: calc( #{ $devhub-wrap-content-width } + ( ( 100vw - #{ $devhub-wrap-content-width } ) / 2 ) );
+            top: $devhub-wrap-toc-position-top;
+            max-height: calc(90vh - #{ $devhub-wrap-toc-position-top });
+        }
+
+        // Pages with sidebar
+        .widget-area + & {
+            left: calc( #{ $single-handbook-content-width } + ( ( 100vw - #{ $single-handbook-content-width } ) / 2 ) );
+            top: $single-handbook-toc-position-top;
+            max-height: calc(90vh - #{ $single-handbook-toc-position-top });
+        }
+    }
+}
+
+@media (min-width: 877px) {
+    // Pages which are not code reference and without a sidebar
+    .site-main .table-of-contents:not(.code-reference .site-main .table-of-contents):not(.widget-area + .site-main .table-of-contents) {
+        position: fixed;
+        width: 15vw;
+        top: $single-handbook-toc-position-top;
+        left: calc(
+            #{ $single-handbook-content-width } * #{ $single-handbook-content-primary-width }
+            + ( ( 100vw - #{ $single-handbook-content-width } ) / 2 )
+            + 15px
+        );
+        max-height: calc(90vh - #{ $single-handbook-toc-position-top });
+    }
 }
 
 @media ( min-width: 43em ) {
     .devhub-wrap {
-        &.archive, &.search {
+        &.archive,
+        &.search {
             .meta {
                 float: right;
@@ -2390 +2508 @@
 }
 
+// Matches global header breakpoint
+@media ( max-width: 889px ) {
+    .code-reference .site-main .table-of-contents {
+        float: none;
+        margin-left: 0;
+        width: 100%;
+    }
+}
+
 @media ( max-width: 43em ) {
-
     #content-area.has-sidebar {
-
         main {
             float: right;
@@ -2399 +2524 @@
             margin: 0 auto;
             clear: both;
-            padding: 0 12px;
             padding: 0 1.2rem;
         }
+
         .widget-area {
             float: none;
@@ -2427 +2552 @@
             display: block;
         }
+
         .reference-landing .section .box,
         .sidebar .box {
@@ -2432 +2558 @@
             margin-bottom: 1.5em;
         }
+
         .home-primary-content .entry-content,
         .reference-landing .section {
@@ -2446 +2573 @@
 
         .horizontal-list li:first-child a {
-            padding: 0 40px;
             padding: 0 4rem;
         }
 
-        .reference-landing .searchform {
-            text-align: center;
-        }
-
-        .reference-landing .searchform input[type="text"],
-        .reference-landing .searchform input[type="submit"] {
-            width: 100%;
-            margin-right: 0;
-            margin-bottom: 1em;
-            float: none;
-            clear: both;
-        }
-
-        .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
+        .wp-parser-class,
+        .wp-parser-function,
+        .wp-parser-hook,
+        .wp-parser-method {
             h1 {
                 padding-left: 45px;
@@ -2478 +2594 @@
 @media (max-width: 32em) {
     .devhub-wrap {
-        .table-of-contents {
-            float: none;
-            margin-left: 0;
-            width: 100%;
-        }
-
         section {
             overflow: inherit;
@@ -2495 +2605 @@
 
 @media (max-width: 22em) {
-    ul, ol {
+    ul,
+    ol {
         margin-left: 1.2em;
     }
+
     .devhub-wrap {
-        .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
+        .wp-parser-class,
+        .wp-parser-function,
+        .wp-parser-hook,
+        .wp-parser-method {
             h1 {
                 padding-left: 20px;
-                line-height: 2rem;
                 text-indent: -20px;
-                font-size: 16px;
-            }
-        }
-
-        &.single-wp-parser-function, &.single-wp-parser-method, &.single-wp-parser-hook {
+                font-size: 1.6rem;
+                line-height: 1.25;
+            }
+        }
+
+        &.single-wp-parser-function,
+        &.single-wp-parser-method,
+        &.single-wp-parser-hook {
             .comment-list {
                 li {
@@ -2532 +2649 @@
 
 .single-command #content {
-
-    h2, h3 {
+    h2,
+    h3 {
         margin-top: 4rem;
         margin-bottom: 2.5rem;
@@ -2542 +2659 @@
         padding: 0;
         font-size: 3.5rem;
-        line-height: 4.5rem;
+        line-height: 1.29;
         margin-top: 3rem;
         margin-bottom: 1rem;
         font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+
         a {
             color: #000;
+
             span {
                 color: #949494;
@@ -2564 +2683 @@
     .quick-links {
         margin-left: 0.5rem;
-        color: #ABABAB;
+        color: #ababab;
+
         a {
             text-decoration: underline;
-            color: #ABABAB;
+            color: #ababab;
+
             &:hover {
                 color: #757575;
@@ -2574 +2695 @@
     }
 
-    .toc-jump {
-        float: right;
-        font-size: 75%;
-        margin-top: 11px;
-    }
-
     table {
-        border-collapse:collapse;
+        border-collapse: collapse;
         border: 1px solid #eee;
-        padding:0;
-        margin:0 0 ms(0);
+        padding: 0;
+        margin: 0 0 ms(0);
         font-size: ms(-2);
-        width:100%;
+        width: 100%;
 
         thead {
             background: #eee;
+
             th {
-                font-weight: bold;
+                font-weight: 700;
                 padding: 1em;
             }
         }
 
-        th, td {
+        th,
+        td {
             padding: 0.8em 1em;
-            margin:0;
-            font-weight:normal;
-            text-align:left;
-            vertical-align:top;
+            margin: 0;
+            font-weight: 400;
+            text-align: left;
+            vertical-align: top;
             border: 1px solid #eee;
         }
@@ -2607 +2724 @@
         tbody {
             tr:nth-child(even) {
-                background:rgba(0, 0, 0, .025);
+                background: rgba(0, 0, 0, 0.025);
             }
         }
@@ -2614 +2731 @@
 
 .single-command {
-    .devhub-wrap *, .devhub-wrap *::before, .devhub-wrap *::after {
+    .devhub-wrap *,
+    .devhub-wrap *::before,
+    .devhub-wrap *::after {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -2620 +2739 @@
     }
 
-    .devhub-wrap a.button, .devhub-wrap button, .devhub-wrap input[type="button"], .devhub-wrap input[type="reset"], .devhub-wrap input[type="submit"] {
+    .devhub-wrap a.button,
+    .devhub-wrap button,
+    .devhub-wrap input[type="button"],
+    .devhub-wrap input[type="reset"],
+    .devhub-wrap input[type="submit"] {
         border: 1px solid;
         border-color: #ccc;
@@ -2631 +2754 @@
         float: none;
         height: auto;
-        padding: .8rem 1.2rem;
-        margin: .4rem 0;
+        padding: 0.8rem 1.2rem;
+        margin: 0.4rem 0;
         text-decoration: none;
         -webkit-appearance: none;
@@ -2641 +2764 @@
         }
 
-        &:focus, &:active {
+        &:focus,
+        &:active {
             border-color: #bbb;
             background: #eee;
@@ -2654 +2778 @@
                 color: #dc3232;
             }
+
             &.green {
-                color: #46B450;
+                color: #46b450;
             }
         }
@@ -2667 +2792 @@
             position: relative;
 
-            @media(min-width: 571px) {
+            @media (min-width: 571px) {
                 &:first-child {
                     right: -6px;
                     border-radius: 3px 0 0 3px;
                 }
+
                 &:last-child {
                     border-radius: 0 3px 3px 0;
@@ -2681 +2807 @@
     .github-tracker {
         margin-bottom: 2.5rem;
+
         img.icon-github {
             width: 23px;
@@ -2691 +2818 @@
 }
 
-code[class*="language-"],pre[class*="language-"]{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;background:#2b303b;color:#c0c5ce}pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#a7adba}pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#a7adba}pre[class*="language-"]{overflow:auto}:not(pre)>code[class*="language-"]{border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#65737e}.token.punctuation{color:#c0c5ce}.token.namespace{opacity:.7}.token.operator,.token.boolean,.token.number{color:#d08770}.token.property{color:#ebcb8b}.token.tag{color:#8fa1b3}.token.string{color:#96b5b4}.token.selector{color:#b48ead}.token.attr-name{color:#d08770}.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#96b5b4}.token.attr-value,.token.keyword,.token.control,.token.directive,.token.unit{color:#a3be8c}.token.statement,.token.regex,.token.atrule{color:#96b5b4}.token.placeholder,.token.variable{color:#8fa1b3}.token.deleted{text-decoration:line-through}.token.inserted{border-bottom:1px dotted #eff1f5;text-decoration:none}.token.italic{font-style:italic}.token.important,.token.bold{font-weight:bold}.token.important{color:#bf616a}.token.entity{cursor:help}pre>code.highlight{outline:0.4em solid #bf616a;outline-offset:.4em}
-
 button.code-tab,
 button.code-tab:hover {
     background: #fff;
-    border: none;
     box-shadow: none;
     text-shadow: none;
-    border: 1px solid #D0DFDA;
+    border: 1px solid #d0dfda;
     border-radius: 30px 0 0 30px;
     padding: 8px 20px;
@@ -2716 +2840 @@
 
 button.code-tab.is-active {
-    background: #00B975;
-    border: 1px solid #00B975;
+    background: #00b975;
+    border: 1px solid #00b975;
     box-shadow: none;
     color: #fff;
@@ -2729 +2853 @@
     display: block;
 }
+
+.search-wrap {
+    .searchform {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        border-radius: 2px;
+        margin: 3rem auto 0;
+
+        input[type="search"] {
+            flex-grow: 1;
+            margin: 0;
+            padding: 1rem 45px 1rem 1rem;
+            border: 1px solid transparent;
+            border-radius: 2px;
+            box-shadow: none;
+            font-size: 13px;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .search-field {
+            position: relative;
+            margin-bottom: 2rem;
+            display: flex;
+            border: 1px solid #000;
+            border-radius: 4px;
+            width: 100%;
+
+            ul {
+                left: 50%;
+                transform: translate(-50%, 0);
+                max-width: calc(100vw - 40px - 48px); /* Match parents padding/margin. */
+
+                li {
+                    padding-right: 20px;
+                }
+            }
+        }
+
+        .button-search {
+            display: flex;
+            padding: 0;
+            position: absolute;
+            cursor: pointer;
+            right: 0;
+            background: transparent;
+            border: 1px solid transparent;
+            border-radius: 2px;
+            height: 100%;
+            width: 40px;
+            align-items: center;
+            top: 0;
+
+            &:active {
+                background: get-color(gray-5);
+            }
+
+            > svg {
+                flex: 1;
+            }
+        }
+
+        .search-post-type {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            width: 100%;
+            margin: 0 0 2rem;
+
+            color: #000;
+            font-size: 13px;
+            flex-wrap: wrap;
+
+            > span,
+            > div {
+                position: relative;
+                margin: 0.25rem;
+            }
+
+            label {
+                padding: 0.5rem 0.5rem 0.5rem 2.5rem;
+                border-radius: 2px;
+                user-select: none;
+            }
+
+            input {
+                position: absolute;
+                z-index: 1;
+                top: 3px;
+                left: 6px;
+            }
+
+            label,
+            input {
+                cursor: pointer;
+            }
+        }
+
+        &.searchform-handbook .search-field {
+            border-color: get-color(gray-10);
+            border-radius: 0;
+        }
+
+        .widget_search &.searchform-handbook {
+            padding-right: 1em;
+
+            @media (max-width: 876px) {
+                padding: 1.5em 1em 0;
+            }
+        }
+    }
+
+    &.search-wrap-inline .searchform {
+        margin: 0;
+    }
+
+    &.search-wrap-inline .search-field {
+        margin: 0;
+        border: none;
+    }
+
+    &.search-wrap-embedded .search-field {
+        margin-bottom: 0;
+        max-width: 400px;
+        border: none;
+    }
+
+    &.search-wrap-embedded .search-post-type {
+        margin-top: 2rem;
+        justify-content: space-between;
+        color: $color-white;
+        max-width: 450px;
+
+        input:checked + label {
+            content: "";
+            background: #fff;
+            color: #000;
+        }
+
+        @media ( max-width: 688px ) {
+            justify-content: center;
+
+            > span {
+                flex-basis: 100%;
+                margin-bottom: 1rem;
+            }
+
+            > div {
+                position: relative;
+                margin: 1rem;
+            }
+        }
+    }
+}
+
+.not-found {
+    padding: 4rem 0;
+    text-align: center;
+}

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/page-dashicons.scss

@@ -30 +30 @@
             font: 11pt sans-serif;
             padding: 10px;
-            background: rgba(255,255,255,.8);
+            background: rgba(255, 255, 255, 0.8);
+
             &:focus {
                 background: #fff;
@@ -39 +40 @@
 
     .entry-content {
-        float:left;
+        float: left;
         margin-top: 0 !important;
         padding: 1.5em $spacing;
@@ -46 +47 @@
 
     #glyph {
-        float:left;
+        float: left;
         padding: 1.5em $spacing;
         width: 50%;
@@ -58 +59 @@
 
         .info {
-            float:right;
+            float: right;
             margin-top: $spacing;
             width: 35%;
@@ -77 +78 @@
 
         .name {
-            font-size: .9em;
+            font-size: 0.9em;
         }
     }
@@ -84 +85 @@
         margin: 1.5em 0;
         padding-top: $spacing;
-        border-top: 1px solid lightgrey;
+        border-top: 1px solid #d3d3d3;
 
         &:first-of-type {
@@ -154 +155 @@
     #instructions {
         margin-top: 1.5em;
-        border-top: 1px solid lightgrey;
+        border-top: 1px solid #d3d3d3;
 
         h3 {
@@ -222 +223 @@
                     margin-left: 0;
                 }
+
                 &:last-of-type {
                     margin-right: 0;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/search.php

@@ -23 +23 @@
         </div>
 
-        <?php get_search_form(); ?>
+        <main id="main" class="site-main" role="main">
 
-        <main id="main" class="site-main" role="main">
+        <?php get_search_form() ?>
+
+    <div class="search-results-summary"><?php
+    $count = (int) $GLOBALS['wp_query']->found_posts;
+
+    if ( $count ) {
+        if ( is_paged() ) {
+            $start = get_query_var( 'posts_per_page' ) * ( get_query_var( 'paged' ) - 1 );
+        } else {
+            $start = 0;
+        }
+        $end = min( $count, $start + get_query_var( 'posts_per_page' ) );
+        printf(
+            _n( '<strong>%d</strong> result found for "<strong>%s</strong>".', '<strong>%d</strong> results found for "<strong>%s</strong>". Showing results %d to %d.', $count, 'wporg' ),
+            $count,
+            esc_html( get_search_query() ),
+            $start + 1,
+            $end
+        );
+    } else {
+        printf( __( '<strong>%d</strong> results found for "<strong>%s</strong>".', 'wporg' ), $count, esc_html( get_search_query() ) );
+    }
+    ?></div>
 
         <?php if ( have_posts() ) : ?>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/searchform.php

@@ -5 +5 @@
  * @package wporg-developer
  */
+
+$show_filters = DevHub\should_show_search_filters();
+
+$is_handbook = $GLOBALS['wp_query']->is_handbook;
+
+// Add classes for different views
+$classes  = ( ! $show_filters && ! $is_handbook ) ? ' search-wrap-inline' : '';
+$classes .= ( is_page( 'reference' ) ) ? ' search-wrap-embedded' : '';
+
+$form_class = ( $is_handbook ) ? 'searchform-handbook' : '';
+
+$search_url = get_query_var( 'current_handbook_home_url' );
+$search_url = $search_url ? $search_url : home_url( '/' );
+
+$placeholder = _x( 'Search reference', 'placeholder', 'wporg' );
+if ( $is_handbook ) {
+    $placeholder = sprintf(
+        /* translators: %s handbook name. */
+        _x( 'Search %s', 'placeholder', 'wporg' ),
+        get_query_var( 'current_handbook_name' )
+    );
+}
+
 ?>
-<div class="search-section section clear <?php if ( ! ( is_page( 'reference' ) || is_search() || is_404() ) ) { echo 'hide-if-js'; } ?>">
-
-<?php if ( is_search() ) { ?>
-
-    <div class="search-results-summary"><?php
-    $count = (int) $GLOBALS['wp_query']->found_posts;
-
-    if ( $count ) {
-        if ( is_paged() ) {
-            $start = get_query_var( 'posts_per_page' ) * ( get_query_var( 'paged' ) - 1 );
-        } else {
-            $start = 0;
-        }
-        $end = min( $count, $start + get_query_var( 'posts_per_page' ) );
-        printf(
-            _n( '<strong>%d</strong> result found for "<strong>%s</strong>".', '<strong>%d</strong> results found for "<strong>%s</strong>". Showing results %d to %d.', $count, 'wporg' ),
-            $count,
-            esc_html( get_search_query() ),
-            $start + 1,
-            $end
-        );
-    } else {
-        printf( __( '<strong>%d</strong> results found for "<strong>%s</strong>".', 'wporg' ), $count, esc_html( get_search_query() ) );
-    }
-    ?></div>
-
-<?php } ?>
-
-    <?php
-        $is_handbook = $GLOBALS['wp_query']->is_handbook;
-        $search_url  = get_query_var( 'current_handbook_home_url' );
-        $search_url  = $search_url ? $search_url : home_url( '/' );
-        $filters     = ! ( $is_handbook || is_404() );
-        $form_class  = ( $filters ) ? ' searchform-filtered' : '';
-        if ( $is_handbook ) {
-            $form_class .= ' searchform-handbook';
-        }
-    ?>
-
-    <form role="search" method="get" class="searchform<?php echo esc_attr( $form_class ); ?>" action="<?php echo esc_url( $search_url ); ?>">
-        <label for="search-field" class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'wporg' ); ?></label>
-        <input type="text" id="search-field" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
-        <button class="button button-primary button-search"><i class="dashicons dashicons-search"></i><span class="screen-reader-text"><?php _e( 'Search plugins', 'wporg' ); ?></span></button>
-    <?php if ( $filters ) : ?>
+<div class="search-wrap <?php echo esc_attr( $classes ); ?>">
+    <form role="search" method="get" class="searchform <?php echo esc_attr( $form_class ); ?>" action="<?php echo esc_url( $search_url ); ?>">
+        <div class="search-field">
+            <input type="search" id="search-field" placeholder="<?php echo esc_attr( $placeholder ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
+            <button class="button-search" aria-label="<?php esc_html_e( 'Search', 'wporg' ); ?>">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path></svg>    
+            </button>
+        </div>
+    <?php if ( $show_filters ) : ?>
 
         <div class="search-post-type">
@@ -56 +44 @@
                 $search_post_types = array(
                     'wp-parser-function' => __( 'Functions', 'wporg' ),
-                    'wp-parser-hook'     => __( 'Hooks',     'wporg' ),
-                    'wp-parser-class'    => __( 'Classes',   'wporg' ),
-                    'wp-parser-method'   => __( 'Methods',   'wporg' ),
+                    'wp-parser-hook'     => __( 'Hooks', 'wporg' ),
+                    'wp-parser-class'    => __( 'Classes', 'wporg' ),
+                    'wp-parser-method'   => __( 'Methods', 'wporg' ),
                 );
 
@@ -71 +59 @@
                 foreach ( $search_post_types as $post_type => $label ) {
                     $checked = checked( in_array( $post_type, $qv_post_type ), true, false );
-                ?>
-                        <label><input type="checkbox" name="post_type[]" value="<?php echo esc_attr( $post_type ); ?>"
-                        <?php echo $checked; ?> /> <?php echo $label; ?></label>
+                    ?>
+                    <div>
+                        <input id="<?php echo esc_attr( $post_type ); ?>" type="checkbox" name="post_type[]" value="<?php echo esc_attr( $post_type ); ?>" <?php echo $checked; ?> />
+                        <label for="<?php echo esc_attr( $post_type ); ?>"><?php echo $label; ?></label>    
+                    </div>
+                        
             <?php } ?>
         </div>
@@ -80 +71 @@
 
     </form>
-
-</div><!-- /search-guide -->
+</div>

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/admin.css

@@ -85 +85 @@
 
 .status {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .status.pending {
-  color: red;
+  color: #f00;
 }
 
 .status.publish {
-  color: green;
+  color: #008000;
 }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/autocomplete.css

@@ -4 +4 @@
  * Mainly overrides for awesomplete.css
  */
+
 div.awesomplete > ul > li:hover {
     background: hsl(200, 40%, 90%);
+    color: #000;
 }
 
@@ -17 +19 @@
 }
 
-div.awesomplete li:hover mark, div.awesomplete li[aria-selected="true"] mark {
+div.awesomplete li:hover mark,
+div.awesomplete li[aria-selected="true"] mark {
     background: hsl(65, 100%, 49%);
 }
 
-.devhub-wrap div.awesomplete > ul {
+.search-wrap div.awesomplete > ul {
+    top: 40px;
+    text-align: left;
     max-height: 13.5em;
     color: #404040;
     overflow: auto;
-    background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.9));
+    background: linear-gradient(to bottom right, #fff, hsla(0, 0%, 100%, 0.9));
 }
 
-.devhub-wrap .searchform label div.awesomplete > input,
-.devhub-wrap div.awesomplete {  
+.search-wrap-inline div.awesomplete > ul {
+    right: 0;
+}
+
+/* Matches submenu breakpoint */
+@media screen and ( min-width: 501px ) {
+    .search-wrap-inline div.awesomplete > ul {
+        left: auto;
+    }
+}
+
+.search-wrap .searchform label div.awesomplete > input,
+.search-wrap div.awesomplete {  
     width: 100%;
 }
 
-.devhub-wrap .searchform div.search-post-type {
-    clear: both;
-}
-
-.devhub-wrap .searchform,
-.devhub-wrap .searchform div:first-child,
-.devhub-wrap div.awesomplete {
+.search-wrap .searchform,
+.search-wrap .searchform div:first-child,
+.search-wrap div.awesomplete {
     /* Needs to be visible for the awesomplete popup */
     overflow: visible;
 }
 
-div.awesomplete > ul > li:hover {
-    color: black;
+.search-wrap div.awesomplete {
+    /* This is for the input to expand */
+    display: flex; 
 }
 
-div.awesomplete > ul:before {
+div.awesomplete > ul::before {
     content: none;
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/awesomplete.css

@@ -11 +11 @@
 }
 
-div.awesomplete > input {
-    display: block;
-}
-
 div.awesomplete > ul {
     position: absolute;
     left: 0;
-    z-index: 1;
+    z-index: 1000;
     min-width: 100%;
     box-sizing: border-box;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -98 +98 @@
 
 /* Headings */
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   clear: both;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -116 +121 @@
 }
 
-ul, ol {
+ul,
+ol {
   margin: 0 0 1.5em 3em;
 }
@@ -135 +141 @@
 
 dt {
-  font-weight: bold;
+  font-weight: 700;
 }
 
@@ -142 +148 @@
 }
 
-b, strong {
-  font-weight: bold;
-}
-
-dfn, cite, em, i {
+b,
+strong {
+  font-weight: 700;
+}
+
+dfn,
+cite,
+em,
+i {
   font-style: italic;
 }
@@ -170 +180 @@
 }
 
-code, kbd, tt, var {
-  font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
-}
-
-abbr, acronym {
+code,
+kbd,
+tt,
+var {
+  font-family: Hack, "Fira Code", Consolas, Menlo, Monaco, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+  font-size: 15px;
+}
+
+abbr,
+acronym {
   cursor: help;
 }
 
-mark, ins {
+mark,
+ins {
   background: #fff9c0;
   text-decoration: none;
@@ -197 +213 @@
 
 sub {
-  top: .5ex;
+  top: 0.5ex;
 }
 
@@ -218 +234 @@
 
 th {
-  font-weight: bold;
+  font-weight: 700;
 }
 
@@ -228 +244 @@
 }
 
-/* Form Elements */
-button,
-input,
-select,
-textarea {
-  font-size: 100%;
-  /* Corrects font size not being inherited in all browsers */
-  margin: 0;
-  /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
-  vertical-align: baseline;
-  /* Improves appearance and consistency in all browsers */
-  *vertical-align: middle;
-  /* Improves appearance and consistency in all browsers */
-  font-weight: 300;
-}
-
-button,
-input {
-  line-height: normal;
-  /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
-}
-
 /* Alignment */
 .alignleft {
@@ -273 +267 @@
 }
 
-.home .devhub-wrap h1, .home .devhub-wrap h2, .home .devhub-wrap h3, .home .devhub-wrap h4, .home .devhub-wrap h5, .home .devhub-wrap h6 {
+.home .devhub-wrap h1,
+.home .devhub-wrap h2,
+.home .devhub-wrap h3,
+.home .devhub-wrap h4,
+.home .devhub-wrap h5,
+.home .devhub-wrap h6 {
   font-family: "Open Sans", sans-serif;
 }
@@ -284 +283 @@
   padding-bottom: 1.5em;
   /* Override inline style from wporg-markdown plugin. */
-  /* Text meant only for screen readers */
   /* Clearing */
   /* =Content
@@ -311 +309 @@
   /* Changelog */
   /* Comments */
+  /* User contributed notes*/
   /*
      * Content
@@ -318 +317 @@
 
 .devhub-wrap *,
-.devhub-wrap *:before,
-.devhub-wrap *:after {
+.devhub-wrap *::before,
+.devhub-wrap *::after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -326 +325 @@
 
 .devhub-wrap a.github-edit {
-  padding: 0 .6em 0;
-}
-
-.devhub-wrap #content, .devhub-wrap #content-area {
-  padding: 0 max( 20px, 2% );
-}
-
-.devhub-wrap #content .toc-heading, .devhub-wrap #content-area .toc-heading {
-  clear: left;
-}
-
-.devhub-wrap #content table, .devhub-wrap #content-area table {
+  padding: 0 0.6em 0;
+}
+
+.devhub-wrap #content,
+.devhub-wrap #content-area {
+  padding: 0 12px;
+}
+
+.devhub-wrap #content table,
+.devhub-wrap #content-area table {
   border: 1px solid #f0f0f0;
 }
 
-@media (max-width: 991px) {
-  .devhub-wrap #content table, .devhub-wrap #content-area table {
-    overflow-x: scroll;
-    display: block;
-  }
-}
-
-.devhub-wrap #content table th, .devhub-wrap #content-area table th {
+.devhub-wrap #content table th,
+.devhub-wrap #content-area table th {
   padding: 1em;
   border-bottom: 1px solid #f0f0f0;
@@ -354 +345 @@
 }
 
-.devhub-wrap #content table td, .devhub-wrap #content-area table td {
+.devhub-wrap #content table td,
+.devhub-wrap #content-area table td {
   padding: 0.8em 1em;
   border: 1px solid #f0f0f0;
+}
+
+@media (min-width: 889px) {
+  .devhub-wrap #content {
+    padding: 0;
+  }
+  .devhub-wrap #content-area {
+    padding: 0 24px;
+  }
 }
 
@@ -396 +397 @@
   font-weight: 300;
   font-size: 28px;
-  line-height: 1em;
-  text-shadow: #fff 0px 1px 0px;
+  line-height: 1;
+  text-shadow: #fff 0 1px 0;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .devhub-wrap h1 {
-  font-size: 28px;
   font-size: 3rem;
-  line-height: 32px;
-  line-height: 3.2rem;
+  line-height: 1.067;
   font-weight: 300;
   margin-bottom: 1.5rem;
@@ -411 +410 @@
 
 .devhub-wrap h2 {
-  font-size: 22px;
   font-size: 2.2rem;
-  line-height: 26px;
-  line-height: 2.6rem;
+  line-height: 1.18;
   font-weight: 300;
 }
 
 .devhub-wrap h3 {
-  font-size: 20px;
   font-size: 2rem;
-  line-height: 24px;
-  line-height: 2.4rem;
+  line-height: 1.2;
   font-weight: 300;
 }
 
 .devhub-wrap h4 {
-  font-size: 18px;
   font-size: 1.8rem;
-  line-height: 22px;
-  line-height: 2.2rem;
+  line-height: 1.2;
   border-bottom: none;
   font-weight: 300;
@@ -436 +429 @@
 
 .devhub-wrap h4 .dashicons {
-  font-size: 22px;
   font-size: 2.2rem;
-  line-height: 22px;
-  line-height: 2.2rem;
-  height: 22px;
-  width: 22px;
-  height: 2.2rem;
-  width: 2.2rem;
+  line-height: 1;
+  height: 1em;
+  width: 1em;
 }
 
@@ -465 +454 @@
   cursor: pointer;
   /* Improves usability and consistency of cursor style between image-type 'input' and others */
-  font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.1;
   float: none;
   height: auto;
-  padding: .6em 1.8em;
+  padding: 0.6em 1.8em;
   text-decoration: none;
   -webkit-appearance: button;
@@ -496 +484 @@
   border-color: #aaa #bbb #bbb #bbb;
   background: #f0f0f0;
-  -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.4);
-  box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 3px #3582c4;
 }
 
@@ -505 +492 @@
 .devhub-wrap input[type="reset"].shiny-blue,
 .devhub-wrap input[type="submit"].shiny-blue {
-  background-color: #21759b;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
-  background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
-  background-image: -moz-linear-gradient(top, #2a95c5, #21759b);
-  background-image: -ms-linear-gradient(top, #2a95c5, #21759b);
-  background-image: -o-linear-gradient(top, #2a95c5, #21759b);
-  background-image: linear-gradient(to bottom, #2a95c5, #21759b);
-  border-color: #21759b;
-  border-bottom-color: #1e6a8d;
-  -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5);
-  box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5);
+  background-color: #2271b1;
+  border-color: #2271b1;
+  border-bottom-color: #0a4b78;
   color: #fff;
   text-decoration: none;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
-  padding: 3px 8px;
-}
-
-.devhub-wrap a.button.shiny-blue:hover,
+}
+
+.devhub-wrap a.button.shiny-blue:hover, .devhub-wrap a.button.shiny-blue:focus, .devhub-wrap a.button.shiny-blue:active,
 .devhub-wrap button.shiny-blue:hover,
+.devhub-wrap button.shiny-blue:focus,
+.devhub-wrap button.shiny-blue:active,
 .devhub-wrap input[type="button"].shiny-blue:hover,
+.devhub-wrap input[type="button"].shiny-blue:focus,
+.devhub-wrap input[type="button"].shiny-blue:active,
 .devhub-wrap input[type="reset"].shiny-blue:hover,
-.devhub-wrap input[type="submit"].shiny-blue:hover {
-  background-color: #278ab7;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
-  background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: -moz-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: -ms-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: -o-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
-  border-color: #1b607f;
-  -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
-  box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
+.devhub-wrap input[type="reset"].shiny-blue:focus,
+.devhub-wrap input[type="reset"].shiny-blue:active,
+.devhub-wrap input[type="submit"].shiny-blue:hover,
+.devhub-wrap input[type="submit"].shiny-blue:focus,
+.devhub-wrap input[type="submit"].shiny-blue:active {
+  background-color: #135e96;
+  border-color: #043959;
   color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
+
+.devhub-wrap a.button.shiny-blue:focus, .devhub-wrap a.button.shiny-blue:active,
+.devhub-wrap button.shiny-blue:focus,
+.devhub-wrap button.shiny-blue:active,
+.devhub-wrap input[type="button"].shiny-blue:focus,
+.devhub-wrap input[type="button"].shiny-blue:active,
+.devhub-wrap input[type="reset"].shiny-blue:focus,
+.devhub-wrap input[type="reset"].shiny-blue:active,
+.devhub-wrap input[type="submit"].shiny-blue:focus,
+.devhub-wrap input[type="submit"].shiny-blue:active {
+  box-shadow: 0 0 3px 1px #dba617;
 }
 
@@ -546 +534 @@
 .devhub-wrap input[type="reset"] .dashicons,
 .devhub-wrap input[type="submit"] .dashicons {
+  transform: scale(-1, 1);
   vertical-align: text-bottom;
 }
@@ -552 +541 @@
   .devhub-wrap .three-columns a.button {
     max-width: 100%;
-    padding: .6em 1em;
-    font-size: 14px;
+    padding: 0.6em 1em;
     font-size: 1.4rem;
   }
@@ -574 +562 @@
   -webkit-appearance: textfield;
   /* Addresses appearance set to searchfield in S5, Chrome */
-  -webkit-box-sizing: content-box;
-  /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
-  -moz-box-sizing: content-box;
   box-sizing: content-box;
 }
 
 .devhub-wrap input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
   /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-  -webkit-appearance: none;
-}
-
-.devhub-wrap button::-moz-focus-inner,
-.devhub-wrap input::-moz-focus-inner {
-  /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
-  border: 0;
-  padding: 0;
 }
 
@@ -624 +602 @@
 }
 
-.devhub-wrap .screen-reader-text {
-  clip: rect(1px, 1px, 1px, 1px);
-  position: absolute !important;
-}
-
-.devhub-wrap .screen-reader-text:hover,
-.devhub-wrap .screen-reader-text:active,
-.devhub-wrap .screen-reader-text:focus {
-  background-color: #f1f1f1;
+.devhub-wrap select {
+  appearance: none;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' width='24' height='24' aria-hidden='true'%3E%3Cpath d='M17.5 11.6 12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z'/%3E%3C/svg%3E%0A");
+  background-position: right center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2em;
+  color: #3c434a;
+  border: 1px solid #3c434a;
   border-radius: 3px;
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-  clip: auto !important;
-  color: #21759b;
-  display: block;
-  font-size: 14px;
-  font-weight: bold;
-  height: auto;
-  left: 5px;
-  line-height: normal;
-  padding: 15px 23px 14px;
-  text-decoration: none;
-  top: 5px;
-  width: auto;
-  z-index: 100000;
-  /* Above WP toolbar */
-}
-
-.devhub-wrap .clear:before,
-.devhub-wrap .clear:after,
-.devhub-wrap .entry-content:before,
-.devhub-wrap .entry-content:after,
-.devhub-wrap .comment-content:before,
-.devhub-wrap .comment-content:after,
-.devhub-wrap .site-content:before,
-.devhub-wrap .site-content:after,
-.devhub-wrap .site-footer:before,
-.devhub-wrap .site-footer:after {
-  content: '';
+}
+
+.devhub-wrap .clear::before,
+.devhub-wrap .clear::after,
+.devhub-wrap .entry-content::before,
+.devhub-wrap .entry-content::after,
+.devhub-wrap .comment-content::before,
+.devhub-wrap .comment-content::after,
+.devhub-wrap .site-content::before,
+.devhub-wrap .site-content::after,
+.devhub-wrap .site-footer::before,
+.devhub-wrap .site-footer::after,
+.devhub-wrap section::after {
+  content: "";
   display: table;
 }
 
-.devhub-wrap .clear:after,
-.devhub-wrap .entry-content:after,
-.devhub-wrap .comment-content:after,
-.devhub-wrap .site-content:after,
-.devhub-wrap .site-footer:after {
+.devhub-wrap .clear::after,
+.devhub-wrap .entry-content::after,
+.devhub-wrap .comment-content::after,
+.devhub-wrap .site-content::after,
+.devhub-wrap .site-footer::after,
+.devhub-wrap section::after {
   clear: both;
 }
@@ -708 +674 @@
 
 .devhub-wrap .tablist a {
-  border-color: none;
+  border-color: transparent;
   background-color: transparent;
-  border-color: transparent;
   border-image: none;
   border-style: solid solid none;
   border-width: 1px 1px 0;
   display: inline-block;
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   margin-bottom: -1px;
 }
@@ -799 +764 @@
 }
 
-.devhub-wrap .widget-area .search-section.hide-if-js {
-  display: block;
-}
-
 .devhub-wrap .infinite-scroll .paging-navigation,
 .devhub-wrap .infinite-scroll.neverending .site-footer {
@@ -833 +794 @@
 .devhub-wrap h1.page-title {
   font-weight: 300;
-  font-size: 37px;
   font-size: 3.7rem;
   color: #606060;
@@ -848 +808 @@
 .devhub-wrap h2.entry-title {
   text-align: left;
-  font-size: 30px;
   font-size: 3rem;
-  padding: 0 0 24px;
   padding: 0 0 2.4rem;
 }
@@ -861 +819 @@
 
 .devhub-wrap .home-landing .section {
-  padding: 50px 0 10px;
   padding: 5rem 0 1rem;
-  margin-top: 60px;
   margin-top: 6rem;
   overflow: auto;
@@ -869 +825 @@
 
 .devhub-wrap .home-landing .section .no-bullets li {
-  line-height: 20px;
-  line-height: 2rem;
-  margin-bottom: 12.5px;
+  line-height: 1.5;
   margin-bottom: 1.25rem;
 }
@@ -881 +835 @@
 
 .devhub-wrap .home-landing .section .widget-title {
-  line-height: 60px;
-  line-height: 6rem;
+  line-height: 2.4;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  font-weight: inherit;
 }
 
@@ -902 +859 @@
 .devhub-wrap .section {
   /*background: #0073aa;*/
-  padding: 30px 0;
   padding: 3rem 0;
 }
@@ -908 +864 @@
 .devhub-wrap .section .box {
   text-align: center;
-  padding: 0 30px 90px;
   padding: 0 3rem 9rem;
   width: 320px;
@@ -915 +870 @@
 .devhub-wrap .section .box .widget-description {
   padding: 1em 0 0;
-  margin-bottom: 5px;
   margin-bottom: 1rem;
 }
 
 .devhub-wrap .section.search-guide {
-  padding-top: 60px;
   padding-top: 6rem;
   margin-top: 0;
@@ -930 +883 @@
 
 .devhub-wrap .section .widget-title {
-  font-size: 25px;
   font-size: 2.5rem;
-  line-height: 20px;
-  line-height: 2rem;
+  line-height: 0.8;
 }
 
 .devhub-wrap .section .widget-title .dashicons {
   color: #222;
-  font-size: 108px;
   font-size: 10.8rem;
-  line-height: 84px;
-  line-height: 8.4rem;
-  height: 84px;
-  width: 84px;
+  line-height: 0.778;
   height: 8.4rem;
   width: 8.4rem;
-  display: block;
   margin: 0 auto;
   opacity: 0.4;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
 }
 
 .devhub-wrap .section .widget-title .dashicons.dashicons-rest-api {
-  font-size: 90px;
   font-size: 9rem;
 }
@@ -958 +906 @@
 @media (min-width: 43em) and (max-width: 915px) {
   .devhub-wrap .section .three-columns .widget-title {
-    font-size: 35px;
     font-size: 3.5rem;
   }
@@ -975 +922 @@
 
 .devhub-wrap .section.gray .inner-wrap {
-  max-width: 760px;
   max-width: 76rem;
   margin: 1.2em auto 0;
@@ -1014 +960 @@
 .devhub-wrap .section.gray .widget-title {
   font-weight: 300;
-  font-size: 50px;
   font-size: 5rem;
-  line-height: 68px;
-  line-height: 6.8rem;
+  line-height: 1.36;
 }
 
 .devhub-wrap .section.gray .widget-title .dashicons {
-  font-size: 68px;
   font-size: 6.8rem;
-  line-height: 68px;
-  line-height: 6.8rem;
-  height: 6.8px;
-  width: 6.8px;
+  line-height: 1;
   height: 6.8rem;
   width: 6.8rem;
@@ -1033 +973 @@
 @media (min-width: 43em) and (max-width: 915px) {
   .devhub-wrap .section.gray .widget-title {
-    font-size: 35px;
     font-size: 3.5rem;
   }
@@ -1039 +978 @@
 
 .devhub-wrap .section.gray .widget-description {
-  margin-left: 85px;
   margin-left: 8.5rem;
 }
@@ -1054 +992 @@
 
 .devhub-wrap .section.light-gray .widget-title a {
-  color: #2D96C2;
+  color: #2d96c2;
 }
 
@@ -1062 +1000 @@
 }
 
-.devhub-wrap .section.light-gray a.make-wp-link:after {
+.devhub-wrap .section.light-gray a.make-wp-link::after {
   content: "\f345";
-  font-family: 'dashicons';
+  font-family: dashicons;
   margin-left: 4px;
   vertical-align: middle;
@@ -1070 +1008 @@
 
 .devhub-wrap .section .home-primary-content {
-  max-width: 600px;
   max-width: 60rem;
   margin: 0 auto;
@@ -1076 +1013 @@
 
 .devhub-wrap .box {
-  padding: 30px;
   padding: 3rem;
   float: left;
@@ -1084 +1020 @@
 @media (min-width: 43em) and (max-width: 915px) {
   .devhub-wrap .three-columns .box {
-    padding: 30px 20px;
     padding: 3rem 2rem;
   }
-}
-
-.devhub-wrap .reference-landing .section.search-section {
-  padding-top: 0;
-}
-
-.devhub-wrap div#inner-search {
-  background-color: #666;
-  margin-bottom: 1em;
-  padding-top: 2px;
-}
-
-.devhub-wrap div#inner-search .section.search-section {
-  color: #ffffff;
-}
-
-.devhub-wrap div#inner-search div#inner-search-icon-container {
-  margin: 0 auto;
-  max-width: 60em;
-  cursor: pointer;
-}
-
-.devhub-wrap div#inner-search div#inner-search-icon-container div#inner-search-icon {
-  background-color: #666;
-  color: #ffffff;
-  text-align: center;
-  margin-right: 26px;
-  margin-left: 4px;
-  float: right;
-  padding: 5px;
-  -webkit-border-bottom-right-radius: 5px;
-  -webkit-border-bottom-left-radius: 5px;
-  -moz-border-radius-bottomright: 5px;
-  -moz-border-radius-bottomleft: 5px;
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
-
-.devhub-wrap div#inner-search div#inner-search-icon-container div#inner-search-icon .dashicons-search {
-  height: auto;
-  width: auto;
-}
-
-.devhub-wrap div#inner-search div#inner-search-icon-container div#inner-search-icon .dashicons-search:before {
-  font-size: 36px;
-  line-height: 36px;
 }
 
@@ -1138 +1027 @@
   margin: 5rem 0;
   font-size: 1.5rem;
-}
-
+  line-height: 1.5;
+}
+
+.devhub-wrap .archive-filter-form select,
 .devhub-wrap .archive-filter-form input[type="submit"] {
-  margin-left: .5em;
-  padding: 0.2em 0.5em;
-  line-height: 1;
-  font-size: 1.5rem;
-}
-
-.devhub-wrap .searchform {
-  overflow: hidden;
-  height: auto;
-  position: relative;
-}
-
-.devhub-wrap .searchform input[type="text"] {
-  border-radius: 0;
-  margin: 0 auto;
-  padding: 0.5em;
-  width: 100%;
-}
-
-.devhub-wrap .searchform .button-search {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  color: #32373c;
-  display: block;
-  height: 40px;
-  padding: 0.5rem 1rem;
-  position: absolute;
-  right: 0;
-  top: 0;
-  text-shadow: none;
-}
-
-.devhub-wrap .searchform label {
-  width: 560px;
-  width: 56rem;
-  max-width: 100%;
-  margin-right: 15px;
-  display: inline-block;
-  float: left;
-}
-
-.devhub-wrap .searchform label .search-field input[type="text"] {
-  width: 100%;
-}
-
-.devhub-wrap .searchform div {
-  overflow: auto;
-}
-
-.devhub-wrap .searchform .search-post-type {
-  margin-top: 1em;
-}
-
-.devhub-wrap .searchform .search-post-type label {
-  border-right: 1px solid #ccc;
-  float: none;
-  width: inherit;
-  margin-left: 1em;
-  margin-right: 0;
-  padding-left: 0;
-  padding-right: 1.3em;
-}
-
-.devhub-wrap .searchform .search-post-type label input {
-  margin-bottom: 6px;
-  padding-left: 0.5em;
-  vertical-align: middle;
-}
-
-.devhub-wrap .searchform .search-post-type label:last-child {
-  border-right-width: 0;
-}
-
-@media (max-width: 688px) {
-  .devhub-wrap .searchform .search-post-type span {
-    display: block;
-  }
-  .devhub-wrap .searchform .search-post-type label {
-    margin-left: 0;
-    margin-right: 1em;
-    width: 130px;
-  }
-  .devhub-wrap .searchform .search-post-type label:last-child {
-    margin-right: 0;
-    padding-right: 0;
-    width: initial;
-  }
+  margin: 0 0 0 0.5em;
+  padding: 0.333em 1em;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.devhub-wrap .archive-filter-form select {
+  padding-right: 2em;
 }
 
 .devhub-wrap .search-results-summary {
-  font-style: italic;
   margin-bottom: 1em;
-}
-
-.devhub-wrap .reference-landing .section, .devhub-wrap .search-section {
-  max-width: 970px;
+  padding: 2rem;
+  background: #f0f0f1;
+  border-radius: 2px;
+  font-size: 14px;
+}
+
+.devhub-wrap .reference-landing .section {
   max-width: 97rem;
   margin: 0 auto;
@@ -1268 +1080 @@
 .devhub-wrap .sidebar .box {
   padding: 0;
-  border: 2px solid #cccccc;
-  background-color: #eeeeee;
+  border: 2px solid #ccc;
+  background-color: #eee;
 }
 
@@ -1279 +1091 @@
 .devhub-wrap .reference-landing .box .widget-title,
 .devhub-wrap .sidebar .box .widget-title {
-  padding: 10px 30px;
   padding: 1rem 30px;
-  font-size: 16px;
   font-size: 1.6rem;
 }
@@ -1287 +1097 @@
 .devhub-wrap .reference-landing .box .widget-content,
 .devhub-wrap .sidebar .box .widget-content {
-  padding: 16px 30px;
   padding: 1.6rem 3rem;
 }
@@ -1309 +1118 @@
 .devhub-wrap .two-columns .box {
   width: 48%;
-  margin: 1% 1% 1% 0;
+  margin-top: 1%;
+  margin-bottom: 1%;
 }
 
 .devhub-wrap .new-in-guide.two-columns .box {
-  width: 43%;
+  margin-left: 1%;
 }
 
@@ -1319 +1129 @@
   .devhub-wrap .new-in-guide.two-columns .box {
     width: 100%;
+    margin-left: 0;
   }
 }
 
 .devhub-wrap .new-in-guide.two-columns .box:first-child {
-  width: 53%;
+  width: 48%;
+  margin-right: 1%;
+  margin-left: 0;
 }
 
@@ -1346 +1159 @@
   margin: 0;
   padding: 0;
-  text-align: center;
 }
 
@@ -1354 +1166 @@
 
 .devhub-wrap .horizontal-list li a {
-  padding: 0px 40px;
   padding: 0 4rem;
   border-left: 1px solid #ccc;
@@ -1385 +1196 @@
 
 .devhub-wrap .box.gray .widget-title {
-  color: #666666;
+  color: #666;
   background: #d8d8d8;
   text-transform: uppercase;
@@ -1394 +1205 @@
   padding: 0;
   margin: 0;
-  font-size: 13px;
   font-size: 1.3rem;
-  line-height: 30px;
-  line-height: 3rem;
+  line-height: 2.3;
 }
 
@@ -1411 +1220 @@
   margin: 24px 0;
   font-size: 20px;
-  font-weight: normal;
-}
-
-.devhub-wrap .wp-parser-class, .devhub-wrap .wp-parser-function, .devhub-wrap .wp-parser-hook, .devhub-wrap .wp-parser-method {
+  font-weight: 400;
+}
+
+.devhub-wrap .wp-parser-class,
+.devhub-wrap .wp-parser-function,
+.devhub-wrap .wp-parser-hook,
+.devhub-wrap .wp-parser-method {
   border-bottom: 1px solid #dfdfdf;
 }
 
-.devhub-wrap .wp-parser-class h1, .devhub-wrap .wp-parser-function h1, .devhub-wrap .wp-parser-hook h1, .devhub-wrap .wp-parser-method h1 {
+.devhub-wrap .wp-parser-class h1,
+.devhub-wrap .wp-parser-function h1,
+.devhub-wrap .wp-parser-hook h1,
+.devhub-wrap .wp-parser-method h1 {
   margin: 24px 0;
   padding-left: 100px;
   text-indent: -100px;
-  color: #24831d;
-  font-family: monospace;
   font-size: 20px;
-}
-
-.devhub-wrap .wp-parser-class h1 .hook-func, .devhub-wrap .wp-parser-function h1 .hook-func, .devhub-wrap .wp-parser-hook h1 .hook-func, .devhub-wrap .wp-parser-method h1 .hook-func {
-  color: #888888;
-}
-
-.devhub-wrap .wp-parser-class h1 .arg-type, .devhub-wrap .wp-parser-function h1 .arg-type, .devhub-wrap .wp-parser-hook h1 .arg-type, .devhub-wrap .wp-parser-method h1 .arg-type {
-  color: #cd2f23;
+  line-height: 1.6;
+}
+
+.devhub-wrap .wp-parser-class h2,
+.devhub-wrap .wp-parser-function h2,
+.devhub-wrap .wp-parser-hook h2,
+.devhub-wrap .wp-parser-method h2 {
+  font-family: Georgia, Times, serif;
+  margin-bottom: 0.5em;
+}
+
+.devhub-wrap .wp-parser-class .toc-header,
+.devhub-wrap .wp-parser-function .toc-header,
+.devhub-wrap .wp-parser-hook .toc-header,
+.devhub-wrap .wp-parser-method .toc-header {
+  margin-top: 0 !important;
+}
+
+.devhub-wrap .wp-parser-class h1,
+.devhub-wrap .wp-parser-class .signature-highlight,
+.devhub-wrap .wp-parser-function h1,
+.devhub-wrap .wp-parser-function .signature-highlight,
+.devhub-wrap .wp-parser-hook h1,
+.devhub-wrap .wp-parser-hook .signature-highlight,
+.devhub-wrap .wp-parser-method h1,
+.devhub-wrap .wp-parser-method .signature-highlight {
+  color: #008a20;
+  font-family: Hack, "Fira Code", Consolas, Menlo, Monaco, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+  font-weight: 400;
+}
+
+.devhub-wrap .wp-parser-class h1 .hook-func,
+.devhub-wrap .wp-parser-class h1 .keyword,
+.devhub-wrap .wp-parser-class .signature-highlight .hook-func,
+.devhub-wrap .wp-parser-class .signature-highlight .keyword,
+.devhub-wrap .wp-parser-function h1 .hook-func,
+.devhub-wrap .wp-parser-function h1 .keyword,
+.devhub-wrap .wp-parser-function .signature-highlight .hook-func,
+.devhub-wrap .wp-parser-function .signature-highlight .keyword,
+.devhub-wrap .wp-parser-hook h1 .hook-func,
+.devhub-wrap .wp-parser-hook h1 .keyword,
+.devhub-wrap .wp-parser-hook .signature-highlight .hook-func,
+.devhub-wrap .wp-parser-hook .signature-highlight .keyword,
+.devhub-wrap .wp-parser-method h1 .hook-func,
+.devhub-wrap .wp-parser-method h1 .keyword,
+.devhub-wrap .wp-parser-method .signature-highlight .hook-func,
+.devhub-wrap .wp-parser-method .signature-highlight .keyword {
+  color: #646970;
+}
+
+.devhub-wrap .wp-parser-class h1 .arg-type,
+.devhub-wrap .wp-parser-class .signature-highlight .arg-type,
+.devhub-wrap .wp-parser-function h1 .arg-type,
+.devhub-wrap .wp-parser-function .signature-highlight .arg-type,
+.devhub-wrap .wp-parser-hook h1 .arg-type,
+.devhub-wrap .wp-parser-hook .signature-highlight .arg-type,
+.devhub-wrap .wp-parser-method h1 .arg-type,
+.devhub-wrap .wp-parser-method .signature-highlight .arg-type {
+  color: #d63638;
   font-style: italic;
-}
-
-.devhub-wrap .wp-parser-class h1 .arg-name, .devhub-wrap .wp-parser-function h1 .arg-name, .devhub-wrap .wp-parser-hook h1 .arg-name, .devhub-wrap .wp-parser-method h1 .arg-name {
-  color: #0f55c8;
-}
-
-.devhub-wrap .wp-parser-class h1 .arg-default, .devhub-wrap .wp-parser-function h1 .arg-default, .devhub-wrap .wp-parser-hook h1 .arg-default, .devhub-wrap .wp-parser-method h1 .arg-default {
-  color: #000000;
-}
-
-.devhub-wrap .wp-parser-class h1 a:hover, .devhub-wrap .wp-parser-function h1 a:hover, .devhub-wrap .wp-parser-hook h1 a:hover, .devhub-wrap .wp-parser-method h1 a:hover {
-  border-bottom: 1px dotted #21759b;
-}
-
-.devhub-wrap .wp-parser-class h2, .devhub-wrap .wp-parser-function h2, .devhub-wrap .wp-parser-hook h2, .devhub-wrap .wp-parser-method h2 {
-  font-family: Georgia, Times, serif;
-  margin-bottom: .5em;
-}
-
-.devhub-wrap .wp-parser-class .return-type, .devhub-wrap .wp-parser-function .return-type, .devhub-wrap .wp-parser-hook .return-type, .devhub-wrap .wp-parser-method .return-type {
-  font-style: italic;
-}
-
-.devhub-wrap .wp-parser-class .parameters p, .devhub-wrap .wp-parser-function .parameters p, .devhub-wrap .wp-parser-hook .parameters p, .devhub-wrap .wp-parser-method .parameters p {
+  font-size: 0.9em;
+}
+
+.devhub-wrap .wp-parser-class h1 .arg-name,
+.devhub-wrap .wp-parser-class .signature-highlight .arg-name,
+.devhub-wrap .wp-parser-function h1 .arg-name,
+.devhub-wrap .wp-parser-function .signature-highlight .arg-name,
+.devhub-wrap .wp-parser-hook h1 .arg-name,
+.devhub-wrap .wp-parser-hook .signature-highlight .arg-name,
+.devhub-wrap .wp-parser-method h1 .arg-name,
+.devhub-wrap .wp-parser-method .signature-highlight .arg-name {
+  color: #135e96;
+}
+
+.devhub-wrap .wp-parser-class h1 .arg-default,
+.devhub-wrap .wp-parser-class .signature-highlight .arg-default,
+.devhub-wrap .wp-parser-function h1 .arg-default,
+.devhub-wrap .wp-parser-function .signature-highlight .arg-default,
+.devhub-wrap .wp-parser-hook h1 .arg-default,
+.devhub-wrap .wp-parser-hook .signature-highlight .arg-default,
+.devhub-wrap .wp-parser-method h1 .arg-default,
+.devhub-wrap .wp-parser-method .signature-highlight .arg-default {
+  color: #000;
+}
+
+.devhub-wrap .wp-parser-class h1 a,
+.devhub-wrap .wp-parser-class .signature-highlight a,
+.devhub-wrap .wp-parser-function h1 a,
+.devhub-wrap .wp-parser-function .signature-highlight a,
+.devhub-wrap .wp-parser-hook h1 a,
+.devhub-wrap .wp-parser-hook .signature-highlight a,
+.devhub-wrap .wp-parser-method h1 a,
+.devhub-wrap .wp-parser-method .signature-highlight a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.devhub-wrap .wp-parser-class h1 a:hover,
+.devhub-wrap .wp-parser-class .signature-highlight a:hover,
+.devhub-wrap .wp-parser-function h1 a:hover,
+.devhub-wrap .wp-parser-function .signature-highlight a:hover,
+.devhub-wrap .wp-parser-hook h1 a:hover,
+.devhub-wrap .wp-parser-hook .signature-highlight a:hover,
+.devhub-wrap .wp-parser-method h1 a:hover,
+.devhub-wrap .wp-parser-method .signature-highlight a:hover {
+  border-bottom: 1px dotted #2271b1;
+}
+
+.devhub-wrap .wp-parser-class .return .return-type,
+.devhub-wrap .wp-parser-function .return .return-type,
+.devhub-wrap .wp-parser-hook .return .return-type,
+.devhub-wrap .wp-parser-method .return .return-type {
+  margin-right: 8px;
+  font-size: 14px;
+}
+
+.devhub-wrap .wp-parser-class .return-type,
+.devhub-wrap .wp-parser-class .return .type,
+.devhub-wrap .wp-parser-class .parameters .type,
+.devhub-wrap .wp-parser-function .return-type,
+.devhub-wrap .wp-parser-function .return .type,
+.devhub-wrap .wp-parser-function .parameters .type,
+.devhub-wrap .wp-parser-hook .return-type,
+.devhub-wrap .wp-parser-hook .return .type,
+.devhub-wrap .wp-parser-hook .parameters .type,
+.devhub-wrap .wp-parser-method .return-type,
+.devhub-wrap .wp-parser-method .return .type,
+.devhub-wrap .wp-parser-method .parameters .type {
+  color: #d63638;
+}
+
+.devhub-wrap .wp-parser-class .return-type a,
+.devhub-wrap .wp-parser-class .return .type a,
+.devhub-wrap .wp-parser-class .parameters .type a,
+.devhub-wrap .wp-parser-function .return-type a,
+.devhub-wrap .wp-parser-function .return .type a,
+.devhub-wrap .wp-parser-function .parameters .type a,
+.devhub-wrap .wp-parser-hook .return-type a,
+.devhub-wrap .wp-parser-hook .return .type a,
+.devhub-wrap .wp-parser-hook .parameters .type a,
+.devhub-wrap .wp-parser-method .return-type a,
+.devhub-wrap .wp-parser-method .return .type a,
+.devhub-wrap .wp-parser-method .parameters .type a {
+  color: inherit;
+  text-decoration: none;
+  border-bottom: 1px dotted #3c434a;
+}
+
+.devhub-wrap .wp-parser-class .return-type a:hover,
+.devhub-wrap .wp-parser-class .return .type a:hover,
+.devhub-wrap .wp-parser-class .parameters .type a:hover,
+.devhub-wrap .wp-parser-function .return-type a:hover,
+.devhub-wrap .wp-parser-function .return .type a:hover,
+.devhub-wrap .wp-parser-function .parameters .type a:hover,
+.devhub-wrap .wp-parser-hook .return-type a:hover,
+.devhub-wrap .wp-parser-hook .return .type a:hover,
+.devhub-wrap .wp-parser-hook .parameters .type a:hover,
+.devhub-wrap .wp-parser-method .return-type a:hover,
+.devhub-wrap .wp-parser-method .return .type a:hover,
+.devhub-wrap .wp-parser-method .parameters .type a:hover {
+  border-bottom-style: solid;
+}
+
+.devhub-wrap .wp-parser-class .parameters p,
+.devhub-wrap .wp-parser-class .return p,
+.devhub-wrap .wp-parser-function .parameters p,
+.devhub-wrap .wp-parser-function .return p,
+.devhub-wrap .wp-parser-hook .parameters p,
+.devhub-wrap .wp-parser-hook .return p,
+.devhub-wrap .wp-parser-method .parameters p,
+.devhub-wrap .wp-parser-method .return p {
   margin-bottom: 0;
 }
 
-.devhub-wrap .wp-parser-class .parameters dd .desc .type, .devhub-wrap .wp-parser-class .parameters dd .desc .required, .devhub-wrap .wp-parser-function .parameters dd .desc .type, .devhub-wrap .wp-parser-function .parameters dd .desc .required, .devhub-wrap .wp-parser-hook .parameters dd .desc .type, .devhub-wrap .wp-parser-hook .parameters dd .desc .required, .devhub-wrap .wp-parser-method .parameters dd .desc .type, .devhub-wrap .wp-parser-method .parameters dd .desc .required {
-  font-style: italic;
-}
-
-.devhub-wrap .wp-parser-class .parameters dd .default, .devhub-wrap .wp-parser-function .parameters dd .default, .devhub-wrap .wp-parser-hook .parameters dd .default, .devhub-wrap .wp-parser-method .parameters dd .default {
-  font-style: italic;
-}
-
-.devhub-wrap .wp-parser-class .parameters dd ul, .devhub-wrap .wp-parser-function .parameters dd ul, .devhub-wrap .wp-parser-hook .parameters dd ul, .devhub-wrap .wp-parser-method .parameters dd ul {
-  margin-left: 25px;
+.devhub-wrap .wp-parser-class .parameters dt code,
+.devhub-wrap .wp-parser-class .return dt code,
+.devhub-wrap .wp-parser-function .parameters dt code,
+.devhub-wrap .wp-parser-function .return dt code,
+.devhub-wrap .wp-parser-hook .parameters dt code,
+.devhub-wrap .wp-parser-hook .return dt code,
+.devhub-wrap .wp-parser-method .parameters dt code,
+.devhub-wrap .wp-parser-method .return dt code {
+  font-weight: 400;
+}
+
+.devhub-wrap .wp-parser-class .parameters dd,
+.devhub-wrap .wp-parser-class .return dd,
+.devhub-wrap .wp-parser-function .parameters dd,
+.devhub-wrap .wp-parser-function .return dd,
+.devhub-wrap .wp-parser-hook .parameters dd,
+.devhub-wrap .wp-parser-hook .return dd,
+.devhub-wrap .wp-parser-method .parameters dd,
+.devhub-wrap .wp-parser-method .return dd {
+  margin-bottom: 2em;
+}
+
+.devhub-wrap .wp-parser-class .parameters dd ul,
+.devhub-wrap .wp-parser-class .return dd ul,
+.devhub-wrap .wp-parser-function .parameters dd ul,
+.devhub-wrap .wp-parser-function .return dd ul,
+.devhub-wrap .wp-parser-hook .parameters dd ul,
+.devhub-wrap .wp-parser-hook .return dd ul,
+.devhub-wrap .wp-parser-method .parameters dd ul,
+.devhub-wrap .wp-parser-method .return dd ul {
   margin-left: 2.5rem;
 }
 
-.devhub-wrap .wp-parser-class .parameters .param-hash, .devhub-wrap .wp-parser-function .parameters .param-hash, .devhub-wrap .wp-parser-hook .parameters .param-hash, .devhub-wrap .wp-parser-method .parameters .param-hash {
+.devhub-wrap .wp-parser-class .parameters dd ul ul,
+.devhub-wrap .wp-parser-class .return dd ul ul,
+.devhub-wrap .wp-parser-function .parameters dd ul ul,
+.devhub-wrap .wp-parser-function .return dd ul ul,
+.devhub-wrap .wp-parser-hook .parameters dd ul ul,
+.devhub-wrap .wp-parser-hook .return dd ul ul,
+.devhub-wrap .wp-parser-method .parameters dd ul ul,
+.devhub-wrap .wp-parser-method .return dd ul ul {
+  margin-bottom: 0.5em;
+}
+
+.devhub-wrap .wp-parser-class .parameters dd code,
+.devhub-wrap .wp-parser-class .return dd code,
+.devhub-wrap .wp-parser-function .parameters dd code,
+.devhub-wrap .wp-parser-function .return dd code,
+.devhub-wrap .wp-parser-hook .parameters dd code,
+.devhub-wrap .wp-parser-hook .return dd code,
+.devhub-wrap .wp-parser-method .parameters dd code,
+.devhub-wrap .wp-parser-method .return dd code {
+  background: #efefef;
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+.devhub-wrap .wp-parser-class .parameters dd:last-child,
+.devhub-wrap .wp-parser-class .return dd:last-child,
+.devhub-wrap .wp-parser-function .parameters dd:last-child,
+.devhub-wrap .wp-parser-function .return dd:last-child,
+.devhub-wrap .wp-parser-hook .parameters dd:last-child,
+.devhub-wrap .wp-parser-hook .return dd:last-child,
+.devhub-wrap .wp-parser-method .parameters dd:last-child,
+.devhub-wrap .wp-parser-method .return dd:last-child {
+  margin-bottom: 0;
+}
+
+.devhub-wrap .wp-parser-class .parameters .param-hash,
+.devhub-wrap .wp-parser-class .return .param-hash,
+.devhub-wrap .wp-parser-function .parameters .param-hash,
+.devhub-wrap .wp-parser-function .return .param-hash,
+.devhub-wrap .wp-parser-hook .parameters .param-hash,
+.devhub-wrap .wp-parser-hook .return .param-hash,
+.devhub-wrap .wp-parser-method .parameters .param-hash,
+.devhub-wrap .wp-parser-method .return .param-hash {
   margin-left: 1.2em;
   margin-bottom: 0.5em;
 }
 
-.devhub-wrap .wp-parser-class .parameters .param-hash > li, .devhub-wrap .wp-parser-function .parameters .param-hash > li, .devhub-wrap .wp-parser-hook .parameters .param-hash > li, .devhub-wrap .wp-parser-method .parameters .param-hash > li {
+.devhub-wrap .wp-parser-class .parameters .param-hash .desc,
+.devhub-wrap .wp-parser-class .return .param-hash .desc,
+.devhub-wrap .wp-parser-function .parameters .param-hash .desc,
+.devhub-wrap .wp-parser-function .return .param-hash .desc,
+.devhub-wrap .wp-parser-hook .parameters .param-hash .desc,
+.devhub-wrap .wp-parser-hook .return .param-hash .desc,
+.devhub-wrap .wp-parser-method .parameters .param-hash .desc,
+.devhub-wrap .wp-parser-method .return .param-hash .desc {
+  margin-left: 1.5em;
+}
+
+.devhub-wrap .wp-parser-class .parameters .param-hash > li,
+.devhub-wrap .wp-parser-class .return .param-hash > li,
+.devhub-wrap .wp-parser-function .parameters .param-hash > li,
+.devhub-wrap .wp-parser-function .return .param-hash > li,
+.devhub-wrap .wp-parser-hook .parameters .param-hash > li,
+.devhub-wrap .wp-parser-hook .return .param-hash > li,
+.devhub-wrap .wp-parser-method .parameters .param-hash > li,
+.devhub-wrap .wp-parser-method .return .param-hash > li {
+  margin-top: 1.5em;
+}
+
+.devhub-wrap .wp-parser-class .parameters .param-hash > li > code,
+.devhub-wrap .wp-parser-class .return .param-hash > li > code,
+.devhub-wrap .wp-parser-function .parameters .param-hash > li > code,
+.devhub-wrap .wp-parser-function .return .param-hash > li > code,
+.devhub-wrap .wp-parser-hook .parameters .param-hash > li > code,
+.devhub-wrap .wp-parser-hook .return .param-hash > li > code,
+.devhub-wrap .wp-parser-method .parameters .param-hash > li > code,
+.devhub-wrap .wp-parser-method .return .param-hash > li > code {
+  background: transparent;
+  padding: unset;
+}
+
+.devhub-wrap .wp-parser-class .parameters .param-hash li li,
+.devhub-wrap .wp-parser-class .return .param-hash li li,
+.devhub-wrap .wp-parser-function .parameters .param-hash li li,
+.devhub-wrap .wp-parser-function .return .param-hash li li,
+.devhub-wrap .wp-parser-hook .parameters .param-hash li li,
+.devhub-wrap .wp-parser-hook .return .param-hash li li,
+.devhub-wrap .wp-parser-method .parameters .param-hash li li,
+.devhub-wrap .wp-parser-method .return .param-hash li li {
+  list-style-type: circle;
+}
+
+.devhub-wrap .wp-parser-class .parameters .param-hash .param-hash > li,
+.devhub-wrap .wp-parser-class .return .param-hash .param-hash > li,
+.devhub-wrap .wp-parser-function .parameters .param-hash .param-hash > li,
+.devhub-wrap .wp-parser-function .return .param-hash .param-hash > li,
+.devhub-wrap .wp-parser-hook .parameters .param-hash .param-hash > li,
+.devhub-wrap .wp-parser-hook .return .param-hash .param-hash > li,
+.devhub-wrap .wp-parser-method .parameters .param-hash .param-hash > li,
+.devhub-wrap .wp-parser-method .return .param-hash .param-hash > li {
+  list-style-type: disc;
+}
+
+.devhub-wrap .wp-parser-class .parameters .desc,
+.devhub-wrap .wp-parser-class .return .desc,
+.devhub-wrap .wp-parser-function .parameters .desc,
+.devhub-wrap .wp-parser-function .return .desc,
+.devhub-wrap .wp-parser-hook .parameters .desc,
+.devhub-wrap .wp-parser-hook .return .desc,
+.devhub-wrap .wp-parser-method .parameters .desc,
+.devhub-wrap .wp-parser-method .return .desc {
+  margin: 1rem 0 0.5rem;
+}
+
+.devhub-wrap .wp-parser-class .parameters .extended-description,
+.devhub-wrap .wp-parser-class .return .extended-description,
+.devhub-wrap .wp-parser-function .parameters .extended-description,
+.devhub-wrap .wp-parser-function .return .extended-description,
+.devhub-wrap .wp-parser-hook .parameters .extended-description,
+.devhub-wrap .wp-parser-hook .return .extended-description,
+.devhub-wrap .wp-parser-method .parameters .extended-description,
+.devhub-wrap .wp-parser-method .return .extended-description {
+  margin: 1.5em 0 1.5em 1.2em;
+}
+
+.devhub-wrap .wp-parser-class .parameters .extended-description summary + .description,
+.devhub-wrap .wp-parser-class .return .extended-description summary + .description,
+.devhub-wrap .wp-parser-function .parameters .extended-description summary + .description,
+.devhub-wrap .wp-parser-function .return .extended-description summary + .description,
+.devhub-wrap .wp-parser-hook .parameters .extended-description summary + .description,
+.devhub-wrap .wp-parser-hook .return .extended-description summary + .description,
+.devhub-wrap .wp-parser-method .parameters .extended-description summary + .description,
+.devhub-wrap .wp-parser-method .return .extended-description summary + .description {
+  display: block;
   margin-top: 1em;
 }
 
-.devhub-wrap .wp-parser-class .parameters .param-hash li li, .devhub-wrap .wp-parser-function .parameters .param-hash li li, .devhub-wrap .wp-parser-hook .parameters .param-hash li li, .devhub-wrap .wp-parser-method .parameters .param-hash li li {
-  list-style-type: circle;
-}
-
-.devhub-wrap .wp-parser-class .parameters .param-hash .param-hash > li, .devhub-wrap .wp-parser-function .parameters .param-hash .param-hash > li, .devhub-wrap .wp-parser-hook .parameters .param-hash .param-hash > li, .devhub-wrap .wp-parser-method .parameters .param-hash .param-hash > li {
-  list-style-type: disc;
-}
-
-.devhub-wrap .wp-parser-class .learn-more, .devhub-wrap .wp-parser-function .learn-more, .devhub-wrap .wp-parser-hook .learn-more, .devhub-wrap .wp-parser-method .learn-more {
+.devhub-wrap .wp-parser-class .parameters .extended-description summary,
+.devhub-wrap .wp-parser-class .return .extended-description summary,
+.devhub-wrap .wp-parser-function .parameters .extended-description summary,
+.devhub-wrap .wp-parser-function .return .extended-description summary,
+.devhub-wrap .wp-parser-hook .parameters .extended-description summary,
+.devhub-wrap .wp-parser-hook .return .extended-description summary,
+.devhub-wrap .wp-parser-method .parameters .extended-description summary,
+.devhub-wrap .wp-parser-method .return .extended-description summary {
+  color: #21759b;
+  text-decoration: underline;
+}
+
+.devhub-wrap .wp-parser-class .parameters .type,
+.devhub-wrap .wp-parser-class .parameters .required,
+.devhub-wrap .wp-parser-class .return .type,
+.devhub-wrap .wp-parser-class .return .required,
+.devhub-wrap .wp-parser-function .parameters .type,
+.devhub-wrap .wp-parser-function .parameters .required,
+.devhub-wrap .wp-parser-function .return .type,
+.devhub-wrap .wp-parser-function .return .required,
+.devhub-wrap .wp-parser-hook .parameters .type,
+.devhub-wrap .wp-parser-hook .parameters .required,
+.devhub-wrap .wp-parser-hook .return .type,
+.devhub-wrap .wp-parser-hook .return .required,
+.devhub-wrap .wp-parser-method .parameters .type,
+.devhub-wrap .wp-parser-method .parameters .required,
+.devhub-wrap .wp-parser-method .return .type,
+.devhub-wrap .wp-parser-method .return .required {
+  margin: 0 4px;
+  font-weight: 400;
+}
+
+.devhub-wrap .wp-parser-class .parameters .type,
+.devhub-wrap .wp-parser-class .return .type,
+.devhub-wrap .wp-parser-function .parameters .type,
+.devhub-wrap .wp-parser-function .return .type,
+.devhub-wrap .wp-parser-hook .parameters .type,
+.devhub-wrap .wp-parser-hook .return .type,
+.devhub-wrap .wp-parser-method .parameters .type,
+.devhub-wrap .wp-parser-method .return .type {
+  margin-left: 8px;
+  font-size: 14px;
+  font-style: 400;
+}
+
+.devhub-wrap .wp-parser-class .parameters .required,
+.devhub-wrap .wp-parser-class .return .required,
+.devhub-wrap .wp-parser-function .parameters .required,
+.devhub-wrap .wp-parser-function .return .required,
+.devhub-wrap .wp-parser-hook .parameters .required,
+.devhub-wrap .wp-parser-hook .return .required,
+.devhub-wrap .wp-parser-method .parameters .required,
+.devhub-wrap .wp-parser-method .return .required {
+  font-size: 12px;
+}
+
+.devhub-wrap .wp-parser-class .learn-more,
+.devhub-wrap .wp-parser-function .learn-more,
+.devhub-wrap .wp-parser-hook .learn-more,
+.devhub-wrap .wp-parser-method .learn-more {
   background-color: #f1f1f1;
   border: 1px solid #dfdfdf;
@@ -1499 +1649 @@
 
 .devhub-wrap .wp-parser-class .deprecated,
-.devhub-wrap .wp-parser-class .private-access, .devhub-wrap .wp-parser-function .deprecated,
-.devhub-wrap .wp-parser-function .private-access, .devhub-wrap .wp-parser-hook .deprecated,
-.devhub-wrap .wp-parser-hook .private-access, .devhub-wrap .wp-parser-method .deprecated,
+.devhub-wrap .wp-parser-class .private-access,
+.devhub-wrap .wp-parser-function .deprecated,
+.devhub-wrap .wp-parser-function .private-access,
+.devhub-wrap .wp-parser-hook .deprecated,
+.devhub-wrap .wp-parser-hook .private-access,
+.devhub-wrap .wp-parser-method .deprecated,
 .devhub-wrap .wp-parser-method .private-access {
   margin-top: 30px;
@@ -1508 +1661 @@
 
 .devhub-wrap .wp-parser-class .deprecated p,
-.devhub-wrap .wp-parser-class .private-access p, .devhub-wrap .wp-parser-function .deprecated p,
-.devhub-wrap .wp-parser-function .private-access p, .devhub-wrap .wp-parser-hook .deprecated p,
-.devhub-wrap .wp-parser-hook .private-access p, .devhub-wrap .wp-parser-method .deprecated p,
+.devhub-wrap .wp-parser-class .private-access p,
+.devhub-wrap .wp-parser-function .deprecated p,
+.devhub-wrap .wp-parser-function .private-access p,
+.devhub-wrap .wp-parser-hook .deprecated p,
+.devhub-wrap .wp-parser-hook .private-access p,
+.devhub-wrap .wp-parser-method .deprecated p,
 .devhub-wrap .wp-parser-method .private-access p {
-  margin-bottom: 0px;
-}
-
-.devhub-wrap .wp-parser-class .deprecated, .devhub-wrap .wp-parser-function .deprecated, .devhub-wrap .wp-parser-hook .deprecated, .devhub-wrap .wp-parser-method .deprecated {
+  margin-bottom: 0;
+}
+
+.devhub-wrap .wp-parser-class .deprecated,
+.devhub-wrap .wp-parser-function .deprecated,
+.devhub-wrap .wp-parser-hook .deprecated,
+.devhub-wrap .wp-parser-method .deprecated {
   background-color: #fbeaea;
   border: 1px solid #dc3232;
 }
 
-.devhub-wrap .wp-parser-class .deprecated-method, .devhub-wrap .wp-parser-function .deprecated-method, .devhub-wrap .wp-parser-hook .deprecated-method, .devhub-wrap .wp-parser-method .deprecated-method {
+.devhub-wrap .wp-parser-class .deprecated-method,
+.devhub-wrap .wp-parser-function .deprecated-method,
+.devhub-wrap .wp-parser-hook .deprecated-method,
+.devhub-wrap .wp-parser-method .deprecated-method {
   color: #be2423;
   font-style: italic;
 }
 
-.devhub-wrap .wp-parser-class .private-access, .devhub-wrap .wp-parser-function .private-access, .devhub-wrap .wp-parser-hook .private-access, .devhub-wrap .wp-parser-method .private-access {
+.devhub-wrap .wp-parser-class .private-access,
+.devhub-wrap .wp-parser-function .private-access,
+.devhub-wrap .wp-parser-hook .private-access,
+.devhub-wrap .wp-parser-method .private-access {
   border: 1px solid #ffb900;
   background-color: #fff8e5;
 }
 
-.devhub-wrap .wp-parser-class .callout, .devhub-wrap .wp-parser-function .callout, .devhub-wrap .wp-parser-hook .callout, .devhub-wrap .wp-parser-method .callout {
+.devhub-wrap .wp-parser-class .callout,
+.devhub-wrap .wp-parser-function .callout,
+.devhub-wrap .wp-parser-hook .callout,
+.devhub-wrap .wp-parser-method .callout {
   margin-top: 30px;
 }
 
-.devhub-wrap .wp-parser-class .toc-jump, .devhub-wrap .wp-parser-function .toc-jump, .devhub-wrap .wp-parser-hook .toc-jump, .devhub-wrap .wp-parser-method .toc-jump {
-  display: inline-block;
-  float: right;
-}
-
-.devhub-wrap .callout:before {
+.devhub-wrap .callout::before {
   top: 0.4em;
 }
 
-.devhub-wrap.archive .wp-parser-class h1, .devhub-wrap.archive .wp-parser-function h1, .devhub-wrap.archive .wp-parser-hook h1, .devhub-wrap.archive .wp-parser-method h1, .devhub-wrap.search .wp-parser-class h1, .devhub-wrap.search .wp-parser-function h1, .devhub-wrap.search .wp-parser-hook h1, .devhub-wrap.search .wp-parser-method h1 {
+.devhub-wrap.archive .wp-parser-class h1,
+.devhub-wrap.archive .wp-parser-function h1,
+.devhub-wrap.archive .wp-parser-hook h1,
+.devhub-wrap.archive .wp-parser-method h1, .devhub-wrap.search .wp-parser-class h1,
+.devhub-wrap.search .wp-parser-function h1,
+.devhub-wrap.search .wp-parser-hook h1,
+.devhub-wrap.search .wp-parser-method h1 {
   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: #21759b;
-  font-weight: normal;
-}
-
-.devhub-wrap.archive .wp-parser-class div.sourcefile, .devhub-wrap.archive .wp-parser-function div.sourcefile, .devhub-wrap.archive .wp-parser-hook div.sourcefile, .devhub-wrap.archive .wp-parser-method div.sourcefile, .devhub-wrap.search .wp-parser-class div.sourcefile, .devhub-wrap.search .wp-parser-function div.sourcefile, .devhub-wrap.search .wp-parser-hook div.sourcefile, .devhub-wrap.search .wp-parser-method div.sourcefile {
-  color: #999999;
+  font-weight: 400;
+}
+
+.devhub-wrap.archive .wp-parser-class div.sourcefile,
+.devhub-wrap.archive .wp-parser-function div.sourcefile,
+.devhub-wrap.archive .wp-parser-hook div.sourcefile,
+.devhub-wrap.archive .wp-parser-method div.sourcefile, .devhub-wrap.search .wp-parser-class div.sourcefile,
+.devhub-wrap.search .wp-parser-function div.sourcefile,
+.devhub-wrap.search .wp-parser-hook div.sourcefile,
+.devhub-wrap.search .wp-parser-method div.sourcefile {
+  color: #999;
   font-style: italic;
 }
 
-.devhub-wrap .single .wp-parser-class, .devhub-wrap .single .wp-parser-function, .devhub-wrap .single .wp-parser-hook, .devhub-wrap .single .wp-parser-method {
+.devhub-wrap .single .wp-parser-class,
+.devhub-wrap .single .wp-parser-function,
+.devhub-wrap .single .wp-parser-hook,
+.devhub-wrap .single .wp-parser-method {
   border-bottom-style: none;
 }
@@ -1563 +1741 @@
 }
 
-.devhub-wrap .related .show-more, .devhub-wrap .related .hide-more {
+.devhub-wrap .related .show-more,
+.devhub-wrap .related .hide-more {
   display: none;
 }
 
-.devhub-wrap .related h3, .devhub-wrap .related .uses .toc-jump, .devhub-wrap .related .used-by .toc-jump {
+.devhub-wrap .related h3,
+.devhub-wrap .related .uses .toc-jump,
+.devhub-wrap .related .used-by .toc-jump {
   height: 0;
   margin-bottom: 0;
@@ -1574 +1755 @@
 }
 
-.devhub-wrap .related .used-by, .devhub-wrap .related .uses {
+.devhub-wrap .related .used-by,
+.devhub-wrap .related .uses {
   overflow-x: auto;
   clear: right;
@@ -1583 +1765 @@
 }
 
-.devhub-wrap .related th, .devhub-wrap .related td {
+.devhub-wrap .related th,
+.devhub-wrap .related td {
   width: 50%;
 }
 
+.devhub-wrap .related .used-by td.related-title span,
+.devhub-wrap .related .uses td.related-title span {
+  display: block;
+  color: #666;
+}
+
 @media (max-width: 43em) {
-  .devhub-wrap .related .related-desc, .devhub-wrap .related span {
+  .devhub-wrap .related .related-desc,
+  .devhub-wrap .related span {
     display: none;
   }
-}
-
-.devhub-wrap .source-content {
-  overflow: auto;
 }
 
@@ -1603 +1789 @@
 
 .devhub-wrap .source-code-links span {
-  border-left: 1px solid #999;
-  margin-left: 1em;
-  padding-left: 1em;
-}
-
-.devhub-wrap .source-code-links span:first-child {
-  display: none;
-  border-left: 0;
-  margin-left: 1em;
-  padding-left: 0;
+  border-right: 1px solid #999;
+  margin-right: 1em;
+  padding-right: 1em;
+}
+
+.devhub-wrap .source-code-links span:last-of-type {
+  border-right: none;
 }
 
@@ -1620 +1803 @@
 }
 
-.devhub-wrap .show-complete-source, .devhub-wrap .less-complete-source {
+.devhub-wrap .show-complete-source,
+.devhub-wrap .less-complete-source {
   display: none;
 }
@@ -1633 +1817 @@
 
 .devhub-wrap .loop-pagination {
-  text-align: center;
-  font-size: 18px;
-  margin-bottom: 20px;
+  display: flex;
+  margin: 3rem 0;
+  list-style: none;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.devhub-wrap .loop-pagination .page-numbers {
+  display: inline-block;
+  padding: 1rem 1.25rem;
+  background: #fff;
+  border: 1px solid #dcdcde;
+  border-radius: 2px;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.devhub-wrap .loop-pagination .page-numbers:hover, .devhub-wrap .loop-pagination .page-numbers:active {
+  color: #d54e21;
+}
+
+.devhub-wrap .loop-pagination .page-numbers.current {
+  border: 1px solid #1d2327;
+  background: #1d2327;
+  color: #fff;
+}
+
+.devhub-wrap .loop-pagination .page-numbers.dots {
+  border: none;
 }
 
@@ -1642 +1853 @@
 }
 
-.devhub-wrap .single-wp-parser-function .bad-note .comment-content, .devhub-wrap .single-wp-parser-method .bad-note .comment-content, .devhub-wrap .single-wp-parser-hook .bad-note .comment-content, .devhub-wrap .single-wp-parser-class .bad-note .comment-content {
-  opacity: .6;
-}
-
-.devhub-wrap .single-wp-parser-function .bad-note .comment-content:hover, .devhub-wrap .single-wp-parser-method .bad-note .comment-content:hover, .devhub-wrap .single-wp-parser-hook .bad-note .comment-content:hover, .devhub-wrap .single-wp-parser-class .bad-note .comment-content:hover {
+.devhub-wrap .single-wp-parser-function,
+.devhub-wrap .single-wp-parser-method,
+.devhub-wrap .single-wp-parser-hook,
+.devhub-wrap .single-wp-parser-class {
+  /* Feedback*/
+}
+
+.devhub-wrap .single-wp-parser-function .bad-note .comment-content,
+.devhub-wrap .single-wp-parser-method .bad-note .comment-content,
+.devhub-wrap .single-wp-parser-hook .bad-note .comment-content,
+.devhub-wrap .single-wp-parser-class .bad-note .comment-content {
+  opacity: 0.6;
+}
+
+.devhub-wrap .single-wp-parser-function .bad-note .comment-content:hover,
+.devhub-wrap .single-wp-parser-method .bad-note .comment-content:hover,
+.devhub-wrap .single-wp-parser-hook .bad-note .comment-content:hover,
+.devhub-wrap .single-wp-parser-class .bad-note .comment-content:hover {
   opacity: 1;
 }
 
 .devhub-wrap .single-wp-parser-function .comment-awaiting-moderation,
-.devhub-wrap .single-wp-parser-function .comment-edited, .devhub-wrap .single-wp-parser-method .comment-awaiting-moderation,
-.devhub-wrap .single-wp-parser-method .comment-edited, .devhub-wrap .single-wp-parser-hook .comment-awaiting-moderation,
-.devhub-wrap .single-wp-parser-hook .comment-edited, .devhub-wrap .single-wp-parser-class .comment-awaiting-moderation,
+.devhub-wrap .single-wp-parser-function .comment-edited,
+.devhub-wrap .single-wp-parser-method .comment-awaiting-moderation,
+.devhub-wrap .single-wp-parser-method .comment-edited,
+.devhub-wrap .single-wp-parser-hook .comment-awaiting-moderation,
+.devhub-wrap .single-wp-parser-hook .comment-edited,
+.devhub-wrap .single-wp-parser-class .comment-awaiting-moderation,
 .devhub-wrap .single-wp-parser-class .comment-edited {
   background-color: #fff8e5;
-  padding: .2em .5em;
-  margin-right: .5em;
+  padding: 0.2em 0.5em;
+  margin-right: 0.5em;
   border-radius: 3px;
   border: 1px solid #ffb900;
@@ -1663 +1890 @@
 
 .devhub-wrap .single-wp-parser-function .depth-2 .comment-awaiting-moderation,
-.devhub-wrap .single-wp-parser-function .depth-2 .comment-edited, .devhub-wrap .single-wp-parser-method .depth-2 .comment-awaiting-moderation,
-.devhub-wrap .single-wp-parser-method .depth-2 .comment-edited, .devhub-wrap .single-wp-parser-hook .depth-2 .comment-awaiting-moderation,
-.devhub-wrap .single-wp-parser-hook .depth-2 .comment-edited, .devhub-wrap .single-wp-parser-class .depth-2 .comment-awaiting-moderation,
+.devhub-wrap .single-wp-parser-function .depth-2 .comment-edited,
+.devhub-wrap .single-wp-parser-method .depth-2 .comment-awaiting-moderation,
+.devhub-wrap .single-wp-parser-method .depth-2 .comment-edited,
+.devhub-wrap .single-wp-parser-hook .depth-2 .comment-awaiting-moderation,
+.devhub-wrap .single-wp-parser-hook .depth-2 .comment-edited,
+.devhub-wrap .single-wp-parser-class .depth-2 .comment-awaiting-moderation,
 .devhub-wrap .single-wp-parser-class .depth-2 .comment-edited {
   display: inline-block;
@@ -1672 +1902 @@
 
 .devhub-wrap .single-wp-parser-function .comment-list,
-.devhub-wrap .single-wp-parser-function .comment-list ol, .devhub-wrap .single-wp-parser-method .comment-list,
-.devhub-wrap .single-wp-parser-method .comment-list ol, .devhub-wrap .single-wp-parser-hook .comment-list,
-.devhub-wrap .single-wp-parser-hook .comment-list ol, .devhub-wrap .single-wp-parser-class .comment-list,
+.devhub-wrap .single-wp-parser-function .comment-list ol,
+.devhub-wrap .single-wp-parser-method .comment-list,
+.devhub-wrap .single-wp-parser-method .comment-list ol,
+.devhub-wrap .single-wp-parser-hook .comment-list,
+.devhub-wrap .single-wp-parser-hook .comment-list ol,
+.devhub-wrap .single-wp-parser-class .comment-list,
 .devhub-wrap .single-wp-parser-class .comment-list ol {
   list-style: none;
@@ -1682 +1915 @@
 
 .devhub-wrap .single-wp-parser-function .comment-list li,
-.devhub-wrap .single-wp-parser-function #comment-preview, .devhub-wrap .single-wp-parser-method .comment-list li,
-.devhub-wrap .single-wp-parser-method #comment-preview, .devhub-wrap .single-wp-parser-hook .comment-list li,
-.devhub-wrap .single-wp-parser-hook #comment-preview, .devhub-wrap .single-wp-parser-class .comment-list li,
+.devhub-wrap .single-wp-parser-function #comment-preview,
+.devhub-wrap .single-wp-parser-method .comment-list li,
+.devhub-wrap .single-wp-parser-method #comment-preview,
+.devhub-wrap .single-wp-parser-hook .comment-list li,
+.devhub-wrap .single-wp-parser-hook #comment-preview,
+.devhub-wrap .single-wp-parser-class .comment-list li,
 .devhub-wrap .single-wp-parser-class #comment-preview {
   margin-top: 3rem;
@@ -1692 +1928 @@
 
 .devhub-wrap .single-wp-parser-function .comment-list li article,
-.devhub-wrap .single-wp-parser-function #comment-preview article, .devhub-wrap .single-wp-parser-method .comment-list li article,
-.devhub-wrap .single-wp-parser-method #comment-preview article, .devhub-wrap .single-wp-parser-hook .comment-list li article,
-.devhub-wrap .single-wp-parser-hook #comment-preview article, .devhub-wrap .single-wp-parser-class .comment-list li article,
+.devhub-wrap .single-wp-parser-function #comment-preview article,
+.devhub-wrap .single-wp-parser-method .comment-list li article,
+.devhub-wrap .single-wp-parser-method #comment-preview article,
+.devhub-wrap .single-wp-parser-hook .comment-list li article,
+.devhub-wrap .single-wp-parser-hook #comment-preview article,
+.devhub-wrap .single-wp-parser-class .comment-list li article,
 .devhub-wrap .single-wp-parser-class #comment-preview article {
   overflow: auto;
@@ -1700 +1939 @@
 
 .devhub-wrap .single-wp-parser-function .comment-list li.depth-1,
-.devhub-wrap .single-wp-parser-function #comment-preview, .devhub-wrap .single-wp-parser-method .comment-list li.depth-1,
-.devhub-wrap .single-wp-parser-method #comment-preview, .devhub-wrap .single-wp-parser-hook .comment-list li.depth-1,
-.devhub-wrap .single-wp-parser-hook #comment-preview, .devhub-wrap .single-wp-parser-class .comment-list li.depth-1,
+.devhub-wrap .single-wp-parser-function #comment-preview,
+.devhub-wrap .single-wp-parser-method .comment-list li.depth-1,
+.devhub-wrap .single-wp-parser-method #comment-preview,
+.devhub-wrap .single-wp-parser-hook .comment-list li.depth-1,
+.devhub-wrap .single-wp-parser-hook #comment-preview,
+.devhub-wrap .single-wp-parser-class .comment-list li.depth-1,
 .devhub-wrap .single-wp-parser-class #comment-preview {
   border: 1px solid #dfdfdf;
@@ -1709 +1951 @@
 }
 
-.devhub-wrap .single-wp-parser-function .comment-list li.depth-2, .devhub-wrap .single-wp-parser-method .comment-list li.depth-2, .devhub-wrap .single-wp-parser-hook .comment-list li.depth-2, .devhub-wrap .single-wp-parser-class .comment-list li.depth-2 {
+.devhub-wrap .single-wp-parser-function .comment-list li.depth-2,
+.devhub-wrap .single-wp-parser-method .comment-list li.depth-2,
+.devhub-wrap .single-wp-parser-hook .comment-list li.depth-2,
+.devhub-wrap .single-wp-parser-class .comment-list li.depth-2 {
   border-top: 1px solid #dfdfdf;
   padding: 0;
@@ -1715 +1960 @@
 }
 
-.devhub-wrap .single-wp-parser-function .comment-list li.depth-2 .comment-content, .devhub-wrap .single-wp-parser-method .comment-list li.depth-2 .comment-content, .devhub-wrap .single-wp-parser-hook .comment-list li.depth-2 .comment-content, .devhub-wrap .single-wp-parser-class .comment-list li.depth-2 .comment-content {
-  padding: .9em 0;
-}
-
-.devhub-wrap .single-wp-parser-function .comment-list li.depth-2 .comment-content p, .devhub-wrap .single-wp-parser-method .comment-list li.depth-2 .comment-content p, .devhub-wrap .single-wp-parser-hook .comment-list li.depth-2 .comment-content p, .devhub-wrap .single-wp-parser-class .comment-list li.depth-2 .comment-content p {
+.devhub-wrap .single-wp-parser-function .comment-list li.depth-2 .comment-content,
+.devhub-wrap .single-wp-parser-method .comment-list li.depth-2 .comment-content,
+.devhub-wrap .single-wp-parser-hook .comment-list li.depth-2 .comment-content,
+.devhub-wrap .single-wp-parser-class .comment-list li.depth-2 .comment-content {
+  padding: 0.9em 0;
+}
+
+.devhub-wrap .single-wp-parser-function .comment-list li.depth-2 .comment-content p,
+.devhub-wrap .single-wp-parser-method .comment-list li.depth-2 .comment-content p,
+.devhub-wrap .single-wp-parser-hook .comment-list li.depth-2 .comment-content p,
+.devhub-wrap .single-wp-parser-class .comment-list li.depth-2 .comment-content p {
   margin-bottom: 0;
-  font-size: .9em;
-}
-
-.devhub-wrap .single-wp-parser-function .comment ul.children, .devhub-wrap .single-wp-parser-method .comment ul.children, .devhub-wrap .single-wp-parser-hook .comment ul.children, .devhub-wrap .single-wp-parser-class .comment ul.children {
+  font-size: 0.9em;
+}
+
+.devhub-wrap .single-wp-parser-function .comment ul.children,
+.devhub-wrap .single-wp-parser-method .comment ul.children,
+.devhub-wrap .single-wp-parser-hook .comment ul.children,
+.devhub-wrap .single-wp-parser-class .comment ul.children {
   margin: 0 0 1.5em 0;
   border-bottom: 1px solid #dfdfdf;
 }
 
-.devhub-wrap .single-wp-parser-function .feedback, .devhub-wrap .single-wp-parser-method .feedback, .devhub-wrap .single-wp-parser-hook .feedback, .devhub-wrap .single-wp-parser-class .feedback {
+.devhub-wrap .single-wp-parser-function .feedback,
+.devhub-wrap .single-wp-parser-method .feedback,
+.devhub-wrap .single-wp-parser-hook .feedback,
+.devhub-wrap .single-wp-parser-class .feedback {
   width: 90%;
   float: right;
@@ -1735 +1992 @@
 }
 
-.devhub-wrap .single-wp-parser-function .feedback-links, .devhub-wrap .single-wp-parser-method .feedback-links, .devhub-wrap .single-wp-parser-hook .feedback-links, .devhub-wrap .single-wp-parser-class .feedback-links {
+.devhub-wrap .single-wp-parser-function .feedback-links,
+.devhub-wrap .single-wp-parser-method .feedback-links,
+.devhub-wrap .single-wp-parser-hook .feedback-links,
+.devhub-wrap .single-wp-parser-class .feedback-links {
   margin: 0 1.5rem 1em 1.5rem;
   font-size: 0.9em;
@@ -1742 +2002 @@
 
 .devhub-wrap .single-wp-parser-function .feedback-editor-title,
-.devhub-wrap .single-wp-parser-function .feedback-title, .devhub-wrap .single-wp-parser-method .feedback-editor-title,
-.devhub-wrap .single-wp-parser-method .feedback-title, .devhub-wrap .single-wp-parser-hook .feedback-editor-title,
-.devhub-wrap .single-wp-parser-hook .feedback-title, .devhub-wrap .single-wp-parser-class .feedback-editor-title,
+.devhub-wrap .single-wp-parser-function .feedback-title,
+.devhub-wrap .single-wp-parser-method .feedback-editor-title,
+.devhub-wrap .single-wp-parser-method .feedback-title,
+.devhub-wrap .single-wp-parser-hook .feedback-editor-title,
+.devhub-wrap .single-wp-parser-hook .feedback-title,
+.devhub-wrap .single-wp-parser-class .feedback-editor-title,
 .devhub-wrap .single-wp-parser-class .feedback-title {
   font-size: 1.8rem;
   font-weight: 300;
-  line-height: 2.2rem;
+  line-height: 1.222;
   margin-bottom: 1em;
 }
 
-.devhub-wrap .single-wp-parser-function .feedback-toggle, .devhub-wrap .single-wp-parser-method .feedback-toggle, .devhub-wrap .single-wp-parser-hook .feedback-toggle, .devhub-wrap .single-wp-parser-class .feedback-toggle {
+.devhub-wrap .single-wp-parser-function .feedback-toggle,
+.devhub-wrap .single-wp-parser-method .feedback-toggle,
+.devhub-wrap .single-wp-parser-hook .feedback-toggle,
+.devhub-wrap .single-wp-parser-class .feedback-toggle {
   margin: 0 0 0 1.5rem;
   display: inline-block;
 }
 
-.devhub-wrap .single-wp-parser-function #wp-feedback-wrap, .devhub-wrap .single-wp-parser-method #wp-feedback-wrap, .devhub-wrap .single-wp-parser-hook #wp-feedback-wrap, .devhub-wrap .single-wp-parser-class #wp-feedback-wrap {
+.devhub-wrap .single-wp-parser-function #wp-feedback-wrap,
+.devhub-wrap .single-wp-parser-method #wp-feedback-wrap,
+.devhub-wrap .single-wp-parser-hook #wp-feedback-wrap,
+.devhub-wrap .single-wp-parser-class #wp-feedback-wrap {
   padding-bottom: 1em;
 }
 
 .devhub-wrap .single-wp-parser-function #comment-preview,
-.js .devhub-wrap .single-wp-parser-function .comment-form-comment, .devhub-wrap .single-wp-parser-method #comment-preview,
-.js .devhub-wrap .single-wp-parser-method .comment-form-comment, .devhub-wrap .single-wp-parser-hook #comment-preview,
-.js .devhub-wrap .single-wp-parser-hook .comment-form-comment, .devhub-wrap .single-wp-parser-class #comment-preview,
-.js .devhub-wrap .single-wp-parser-class .comment-form-comment {
+.js .devhub-wrap .single-wp-parser-function .comment-form-comment,
+.devhub-wrap .single-wp-parser-method #comment-preview,
+.js
+.devhub-wrap .single-wp-parser-method .comment-form-comment,
+.devhub-wrap .single-wp-parser-hook #comment-preview,
+.js
+.devhub-wrap .single-wp-parser-hook .comment-form-comment,
+.devhub-wrap .single-wp-parser-class #comment-preview,
+.js
+.devhub-wrap .single-wp-parser-class .comment-form-comment {
   margin-top: 0;
   border: 1px solid #ccc;
@@ -1772 +2047 @@
 }
 
-.devhub-wrap .single-wp-parser-function #comment-preview.tab-section-selected, .devhub-wrap .single-wp-parser-method #comment-preview.tab-section-selected, .devhub-wrap .single-wp-parser-hook #comment-preview.tab-section-selected, .devhub-wrap .single-wp-parser-class #comment-preview.tab-section-selected {
+.devhub-wrap .single-wp-parser-function #comment-preview.tab-section-selected,
+.devhub-wrap .single-wp-parser-method #comment-preview.tab-section-selected,
+.devhub-wrap .single-wp-parser-hook #comment-preview.tab-section-selected,
+.devhub-wrap .single-wp-parser-class #comment-preview.tab-section-selected {
   border-radius: 3px;
 }
 
-.devhub-wrap .single-wp-parser-function #comment-preview .comment-content, .devhub-wrap .single-wp-parser-method #comment-preview .comment-content, .devhub-wrap .single-wp-parser-hook #comment-preview .comment-content, .devhub-wrap .single-wp-parser-class #comment-preview .comment-content {
+.devhub-wrap .single-wp-parser-function #comment-preview .comment-content,
+.devhub-wrap .single-wp-parser-method #comment-preview .comment-content,
+.devhub-wrap .single-wp-parser-hook #comment-preview .comment-content,
+.devhub-wrap .single-wp-parser-class #comment-preview .comment-content {
   min-height: 6em;
 }
 
-.devhub-wrap .single-wp-parser-function label[for=comment],
+.devhub-wrap .single-wp-parser-function label[for="comment"],
 .devhub-wrap .single-wp-parser-function .comment-form-comment,
-.devhub-wrap .single-wp-parser-function .comment-preview, .devhub-wrap .single-wp-parser-method label[for=comment],
+.devhub-wrap .single-wp-parser-function .comment-preview,
+.devhub-wrap .single-wp-parser-method label[for="comment"],
 .devhub-wrap .single-wp-parser-method .comment-form-comment,
-.devhub-wrap .single-wp-parser-method .comment-preview, .devhub-wrap .single-wp-parser-hook label[for=comment],
+.devhub-wrap .single-wp-parser-method .comment-preview,
+.devhub-wrap .single-wp-parser-hook label[for="comment"],
 .devhub-wrap .single-wp-parser-hook .comment-form-comment,
-.devhub-wrap .single-wp-parser-hook .comment-preview, .devhub-wrap .single-wp-parser-class label[for=comment],
+.devhub-wrap .single-wp-parser-hook .comment-preview,
+.devhub-wrap .single-wp-parser-class label[for="comment"],
 .devhub-wrap .single-wp-parser-class .comment-form-comment,
 .devhub-wrap .single-wp-parser-class .comment-preview {
@@ -1792 +2076 @@
 }
 
-.js .devhub-wrap .single-wp-parser-function .comment-form-comment, .js .devhub-wrap .single-wp-parser-method .comment-form-comment, .js .devhub-wrap .single-wp-parser-hook .comment-form-comment, .js .devhub-wrap .single-wp-parser-class .comment-form-comment {
-  padding: 0 .7em .7em;
-}
-
-.devhub-wrap .single-wp-parser-function .tablist .spinner, .devhub-wrap .single-wp-parser-method .tablist .spinner, .devhub-wrap .single-wp-parser-hook .tablist .spinner, .devhub-wrap .single-wp-parser-class .tablist .spinner {
+.js .devhub-wrap .single-wp-parser-function .comment-form-comment, .js
+.devhub-wrap .single-wp-parser-method .comment-form-comment, .js
+.devhub-wrap .single-wp-parser-hook .comment-form-comment, .js
+.devhub-wrap .single-wp-parser-class .comment-form-comment {
+  padding: 0 0.7em 0.7em;
+}
+
+.devhub-wrap .single-wp-parser-function .tablist .spinner,
+.devhub-wrap .single-wp-parser-method .tablist .spinner,
+.devhub-wrap .single-wp-parser-hook .tablist .spinner,
+.devhub-wrap .single-wp-parser-class .tablist .spinner {
   background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
   -webkit-background-size: 20px 20px;
@@ -1804 +2094 @@
 }
 
-.devhub-wrap .single-wp-parser-function .comment-list .avatar, .devhub-wrap .single-wp-parser-method .comment-list .avatar, .devhub-wrap .single-wp-parser-hook .comment-list .avatar, .devhub-wrap .single-wp-parser-class .comment-list .avatar {
+.devhub-wrap .single-wp-parser-function .comment-list .avatar,
+.devhub-wrap .single-wp-parser-method .comment-list .avatar,
+.devhub-wrap .single-wp-parser-hook .comment-list .avatar,
+.devhub-wrap .single-wp-parser-class .comment-list .avatar {
   float: left;
   margin: -2px 1em 0 0;
@@ -1811 +2104 @@
 }
 
-.devhub-wrap .single-wp-parser-function .comment-meta, .devhub-wrap .single-wp-parser-method .comment-meta, .devhub-wrap .single-wp-parser-hook .comment-meta, .devhub-wrap .single-wp-parser-class .comment-meta {
-  padding: .5em 1em;
+.devhub-wrap .single-wp-parser-function .comment-meta,
+.devhub-wrap .single-wp-parser-method .comment-meta,
+.devhub-wrap .single-wp-parser-hook .comment-meta,
+.devhub-wrap .single-wp-parser-class .comment-meta {
+  padding: 0.5em 1em;
   background-color: #f7f7f7;
   overflow: auto;
 }
 
-.devhub-wrap .single-wp-parser-function .comment-content, .devhub-wrap .single-wp-parser-method .comment-content, .devhub-wrap .single-wp-parser-hook .comment-content, .devhub-wrap .single-wp-parser-class .comment-content {
-  margin-left: 60px;
-  margin-left: 3.75rem;
+.devhub-wrap .single-wp-parser-function .comment-content,
+.devhub-wrap .single-wp-parser-method .comment-content,
+.devhub-wrap .single-wp-parser-hook .comment-content,
+.devhub-wrap .single-wp-parser-class .comment-content {
   margin-left: 0;
   clear: both;
-  padding: 2rem 1.5rem .5rem;
-}
-
-.devhub-wrap .single-wp-parser-function .comment-content ol, .devhub-wrap .single-wp-parser-method .comment-content ol, .devhub-wrap .single-wp-parser-hook .comment-content ol, .devhub-wrap .single-wp-parser-class .comment-content ol {
+  padding: 2rem 1.5rem 0.5rem;
+}
+
+.devhub-wrap .single-wp-parser-function .comment-content ol,
+.devhub-wrap .single-wp-parser-method .comment-content ol,
+.devhub-wrap .single-wp-parser-hook .comment-content ol,
+.devhub-wrap .single-wp-parser-class .comment-content ol {
   list-style: decimal inside;
-  margin: 0 0 1.5em 0;
-  border-top: none;
   margin: 0 0 1.5em 1.5em;
   padding: 0;
-}
-
-.devhub-wrap .single-wp-parser-function .comment-content ul, .devhub-wrap .single-wp-parser-method .comment-content ul, .devhub-wrap .single-wp-parser-hook .comment-content ul, .devhub-wrap .single-wp-parser-class .comment-content ul {
+  border-top: none;
+}
+
+.devhub-wrap .single-wp-parser-function .comment-content ul,
+.devhub-wrap .single-wp-parser-method .comment-content ul,
+.devhub-wrap .single-wp-parser-hook .comment-content ul,
+.devhub-wrap .single-wp-parser-class .comment-content ul {
   list-style: square inside;
-  margin: 0 0 1.5em 0;
-  border-top: none;
   margin: 0 0 1.5em 1.5em;
   padding: 0;
-}
-
-.devhub-wrap .single-wp-parser-function .comment-content li, .devhub-wrap .single-wp-parser-method .comment-content li, .devhub-wrap .single-wp-parser-hook .comment-content li, .devhub-wrap .single-wp-parser-class .comment-content li {
+  border-top: none;
+}
+
+.devhub-wrap .single-wp-parser-function .comment-content li,
+.devhub-wrap .single-wp-parser-method .comment-content li,
+.devhub-wrap .single-wp-parser-hook .comment-content li,
+.devhub-wrap .single-wp-parser-class .comment-content li {
   border: none;
   padding: 0;
 }
 
-.devhub-wrap .single-wp-parser-function #respond, .devhub-wrap .single-wp-parser-method #respond, .devhub-wrap .single-wp-parser-hook #respond, .devhub-wrap .single-wp-parser-class #respond {
+.devhub-wrap .single-wp-parser-function #respond,
+.devhub-wrap .single-wp-parser-method #respond,
+.devhub-wrap .single-wp-parser-hook #respond,
+.devhub-wrap .single-wp-parser-class #respond {
   overflow: hidden;
 }
 
-.devhub-wrap .single-wp-parser-function #respond .log-in-out a, .devhub-wrap .single-wp-parser-method #respond .log-in-out a, .devhub-wrap .single-wp-parser-hook #respond .log-in-out a, .devhub-wrap .single-wp-parser-class #respond .log-in-out a {
+.devhub-wrap .single-wp-parser-function #respond .log-in-out a,
+.devhub-wrap .single-wp-parser-method #respond .log-in-out a,
+.devhub-wrap .single-wp-parser-hook #respond .log-in-out a,
+.devhub-wrap .single-wp-parser-class #respond .log-in-out a {
   font-style: italic;
 }
 
-.devhub-wrap .single-wp-parser-function #reply-title small a, .devhub-wrap .single-wp-parser-method #reply-title small a, .devhub-wrap .single-wp-parser-hook #reply-title small a, .devhub-wrap .single-wp-parser-class #reply-title small a {
+.devhub-wrap .single-wp-parser-function #reply-title small a,
+.devhub-wrap .single-wp-parser-method #reply-title small a,
+.devhub-wrap .single-wp-parser-hook #reply-title small a,
+.devhub-wrap .single-wp-parser-class #reply-title small a {
   font-style: italic;
 }
 
-.devhub-wrap .single-wp-parser-function #respond #submit, .devhub-wrap .single-wp-parser-method #respond #submit, .devhub-wrap .single-wp-parser-hook #respond #submit, .devhub-wrap .single-wp-parser-class #respond #submit {
+.devhub-wrap .single-wp-parser-function #respond #submit,
+.devhub-wrap .single-wp-parser-method #respond #submit,
+.devhub-wrap .single-wp-parser-hook #respond #submit,
+.devhub-wrap .single-wp-parser-class #respond #submit {
   float: left;
   margin: 0 0 1.5em;
 }
 
-.devhub-wrap .single-wp-parser-function .comment-author, .devhub-wrap .single-wp-parser-method .comment-author, .devhub-wrap .single-wp-parser-hook .comment-author, .devhub-wrap .single-wp-parser-class .comment-author {
+.devhub-wrap .single-wp-parser-function .comment-author,
+.devhub-wrap .single-wp-parser-method .comment-author,
+.devhub-wrap .single-wp-parser-hook .comment-author,
+.devhub-wrap .single-wp-parser-class .comment-author {
   float: left;
   line-height: 1.8;
 }
 
-.devhub-wrap .single-wp-parser-function #add-user-note, .devhub-wrap .single-wp-parser-method #add-user-note, .devhub-wrap .single-wp-parser-hook #add-user-note, .devhub-wrap .single-wp-parser-class #add-user-note {
+.devhub-wrap .single-wp-parser-function #add-user-note,
+.devhub-wrap .single-wp-parser-method #add-user-note,
+.devhub-wrap .single-wp-parser-hook #add-user-note,
+.devhub-wrap .single-wp-parser-class #add-user-note {
   font-size: 1.6rem;
 }
 
-.devhub-wrap .single-wp-parser-function .text-button, .devhub-wrap .single-wp-parser-method .text-button, .devhub-wrap .single-wp-parser-hook .text-button, .devhub-wrap .single-wp-parser-class .text-button {
+.devhub-wrap .single-wp-parser-function .text-button,
+.devhub-wrap .single-wp-parser-method .text-button,
+.devhub-wrap .single-wp-parser-hook .text-button,
+.devhub-wrap .single-wp-parser-class .text-button {
   background: #fff none repeat scroll 0 0;
   border-color: #ccc #ccc #bbb;
@@ -1881 +2206 @@
 }
 
-.devhub-wrap .single-wp-parser-function .comment-form ul, .devhub-wrap .single-wp-parser-function .feedback-form ul, .devhub-wrap .single-wp-parser-method .comment-form ul, .devhub-wrap .single-wp-parser-method .feedback-form ul, .devhub-wrap .single-wp-parser-hook .comment-form ul, .devhub-wrap .single-wp-parser-hook .feedback-form ul, .devhub-wrap .single-wp-parser-class .comment-form ul, .devhub-wrap .single-wp-parser-class .feedback-form ul {
+.devhub-wrap .single-wp-parser-function .comment-form ul,
+.devhub-wrap .single-wp-parser-function .feedback-form ul,
+.devhub-wrap .single-wp-parser-method .comment-form ul,
+.devhub-wrap .single-wp-parser-method .feedback-form ul,
+.devhub-wrap .single-wp-parser-hook .comment-form ul,
+.devhub-wrap .single-wp-parser-hook .feedback-form ul,
+.devhub-wrap .single-wp-parser-class .comment-form ul,
+.devhub-wrap .single-wp-parser-class .feedback-form ul {
   margin-left: 1.5em;
 }
 
-.devhub-wrap .single-wp-parser-function .feedback-form ul li, .devhub-wrap .single-wp-parser-method .feedback-form ul li, .devhub-wrap .single-wp-parser-hook .feedback-form ul li, .devhub-wrap .single-wp-parser-class .feedback-form ul li {
+.devhub-wrap .single-wp-parser-function .feedback-form ul li,
+.devhub-wrap .single-wp-parser-method .feedback-form ul li,
+.devhub-wrap .single-wp-parser-hook .feedback-form ul li,
+.devhub-wrap .single-wp-parser-class .feedback-form ul li {
   margin: 0;
   overflow: visible;
@@ -1938 +2273 @@
   margin: 0;
   clear: none;
-  padding: 0 12px;
   padding: 0 1.2rem;
 }
@@ -1946 +2280 @@
   overflow: hidden;
   width: 27%;
-  margin-left: -55px;
   margin: 0;
   clear: none;
@@ -1980 +2313 @@
 }
 
-.devhub-wrap .user-note-voting-up .dashicons, .devhub-wrap .user-note-voting-down .dashicons {
+.devhub-wrap .user-note-voting-up .dashicons,
+.devhub-wrap .user-note-voting-down .dashicons {
   font-size: 30px;
   height: 30px;
@@ -1987 +2321 @@
 }
 
-.devhub-wrap .site-main .user-note-voting-down, .devhub-wrap .site-main .user-note-voting-up {
+.devhub-wrap .site-main .user-note-voting-down,
+.devhub-wrap .site-main .user-note-voting-up {
   text-decoration: none;
 }
@@ -2005 +2340 @@
 
 .devhub-wrap .user-voted.user-note-voting-up .dashicons {
-  color: green;
+  color: color(green-50);
 }
 
 .devhub-wrap .user-voted.user-note-voting-down .dashicons {
-  color: red;
+  color: color(red-50);
 }
 
 .devhub-wrap .user-submitted-note .dashicons {
-  color: grey;
-}
-
-.devhub-wrap .syntaxhighlighter {
-  /* These are !important due to use of !important in SyntaxHighlighter Evolved plugin. */
-  max-width: 100% !important;
-  width: inherit !important;
-  padding-bottom: 0.5rem !important;
+  color: color(gray-50);
 }
 
@@ -2026 +2354 @@
   padding: 0 0 1.5em 0;
   border-bottom: 1px solid #ddd;
+}
+
+/** Fix screen-reader-text font size. **/
+a.screen-reader-text:focus,
+.screen-reader-text:focus {
+  font-size: 1.4rem;
 }
 
@@ -2032 +2366 @@
   background: #0073aa;
   float: none;
-  margin: 0 0 4em;
+  margin: 0;
   padding: 18px 0;
   width: auto;
-  margin: 0;
 }
 
 .site-branding {
-  height: 32px;
   box-sizing: border-box;
   margin: 0 auto;
   max-width: 960px;
-  padding: 0 10px;
+  padding: 0 24px;
   position: relative;
+}
+
+.site-branding.has-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@media screen and (max-width: 500px) {
+  .site-branding.has-actions {
+    flex-direction: column;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .site-branding.has-actions .site-title {
+    margin-bottom: 2rem;
+  }
+}
+
+.site-branding.has-actions .site-title a {
+  font-size: 28px;
 }
 
@@ -2051 +2405 @@
   margin: 0;
   padding: 0;
-  font-family: 'Open Sans', sans-serif;
+  font-family: "Open Sans", sans-serif;
   display: inline-block;
   text-align: left;
-  color: black;
+  color: #000;
 }
 
@@ -2082 +2436 @@
 
 .site-header.home {
-  padding: 28px 20px;
-  padding: 2.8rem 2.0rem;
+  padding: 2.8rem 2rem;
   text-align: center;
 }
@@ -2094 +2447 @@
   max-width: none;
   font-weight: 300;
-  margin: 36px 0 11.25px;
   margin: 3.6rem 0 1.125rem;
   text-align: center;
@@ -2102 +2454 @@
 
 .site-header.home .site-title a {
-  font-size: 68.6646px;
   font-size: 6.86646rem;
 }
@@ -2143 +2494 @@
   display: block;
   text-decoration: none;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 12.8px;
 }
@@ -2211 +2562 @@
 }
 
-.toggled .menu-toggle.dashicons:before {
+.toggled .menu-toggle.dashicons::before {
   content: "\f343";
 }
@@ -2288 +2639 @@
 
 .handbook-header {
-  line-height: 2em;
+  line-height: 2;
 }
 
@@ -2296 +2647 @@
 
 .single-handbook {
-  font-size: 13px;
   font-size: 1.3rem;
 }
 
-.single-handbook p, .single-handbook ol, .single-handbook ul {
+.single-handbook p,
+.single-handbook ol,
+.single-handbook ul {
   line-height: 1.6;
 }
 
-.single-handbook .site-main p, .single-handbook .site-main ol, .single-handbook .site-main ul {
+.single-handbook .site-main p,
+.single-handbook .site-main ol,
+.single-handbook .site-main ul {
   font-size: 1.05em;
   color: #555;
@@ -2341 +2695 @@
 /** Table of Contents */
 .site-main .table-of-contents {
-  float: right;
-  width: 250px;
+  display: flex;
+  flex-direction: column;
+  min-width: 230px;
   border: 1px solid #eee;
-  margin: 0 0 15px 15px;
+  margin: 30px 0;
   z-index: 1;
   position: relative;
@@ -2353 +2708 @@
 }
 
-@media (min-width: 971px) {
-  .site-main .table-of-contents {
-    margin: 0 -30px 15px 15px;
-  }
+.code-reference .site-main .table-of-contents {
+  float: right;
+  margin-top: 15px;
+  margin-left: 15px;
 }
 
@@ -2362 +2717 @@
   margin: 0;
   padding: 0.7rem 1.2rem;
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1.3em;
   color: #32373c;
@@ -2368 +2723 @@
   border-bottom: 1px solid #eee;
   margin-bottom: 0;
+}
+
+.site-main .table-of-contents .items {
+  overflow-y: scroll;
 }
 
@@ -2407 +2766 @@
 }
 
-/* Highlight current heading and adjust scroll position for fixed toolbar */
-.toc-heading:target {
-  position: initial;
-  padding-top: 50px;
-  margin-top: -50px;
-}
-
-/* Remove negative margin because there is no jump link before these headlines */
-.entry-content h2.toc-heading:first-of-type:target,
-.entry-content h3.toc-heading:first-of-type:target,
-h2.toc-heading + h3.toc-heading:target {
-  margin-top: 0;
-}
-
-.toc-heading:target:before {
-  content: '';
-  position: absolute;
-  left: -10px;
-  top: 50px;
-  border-left: 5px solid #0073aa;
-  height: 50%;
-  height: calc(100% - 50px);
-}
-
-.toc-jump {
+.toc-header {
+  margin-bottom: 1em;
+}
+
+.toc-heading {
   position: relative;
-  height: 50px;
-}
-
-.toc-jump:after {
-  content: '';
-  display: table;
-  clear: both;
-}
-
-.toc-jump a {
-  z-index: 1;
-}
-
-@media (max-width: 480px) {
-  .table-of-contents {
-    display: none;
-  }
+}
+
+.toc-heading a::before {
+  color: #8c8f94;
+}
+
+.toc-heading:target a::before {
+  color: inherit;
+}
+
+.toc-heading a:hover::before,
+.toc-heading a:active::before,
+.toc-heading a:focus::before {
+  color: #2271b1;
 }
 
@@ -2463 +2799 @@
 .widget_nav_menu h1 {
   font-size: 1.6em;
-  font-weight: bold;
+  font-weight: 700;
   margin-bottom: 0.6em;
 }
@@ -2538 +2874 @@
   color: #555;
   background-color: #fff;
-  font-weight: bold;
+  font-weight: 700;
 }
 
@@ -2599 +2935 @@
   margin: 0 auto;
   display: flex;
-  padding-top: 0;
+  padding: 0 max( 20px, 2% );
 }
 
@@ -2656 +2992 @@
 
 .rest-api-handbook-reference .table-of-contents ul.items li ul li::after {
-  content: '; ';
+  content: "; ";
 }
 
 .rest-api-handbook-reference .table-of-contents ul.items li ul li:last-child::after {
-  content: '';
+  content: "";
 }
 
@@ -2677 +3013 @@
   overflow-y: scroll;
   z-index: 500;
-}
-
-body.responsive-show #secondary .search-section {
-  margin-top: 32px;
-  width: 100%;
 }
 
@@ -2714 +3045 @@
     position: fixed;
     z-index: 10;
-    bottom: 0px;
+    bottom: 0;
     overflow-y: auto;
-    transition: all .25s ease;
+    transition: all 0.25s ease;
     top: 32px;
     left: -100%;
@@ -2734 +3065 @@
     z-index: 1;
   }
-  #secondary-toggle:before {
-    content: '\f333';
+  #secondary-toggle::before {
+    content: "\f333";
     -webkit-font-smoothing: antialiased;
-    font: normal 32px/1 'dashicons';
+    font: 400 32px/1 dashicons;
     position: relative;
     top: 0;
@@ -2755 +3086 @@
     overflow-x: visible;
   }
-  body.responsive-show #secondary-toggle:before {
+  body.responsive-show #secondary-toggle::before {
     color: #0073aa;
   }
@@ -2789 +3120 @@
 }
 
+@media (min-width: 90em) {
+  .site-main .table-of-contents {
+    position: fixed;
+    width: 15vw;
+  }
+  .code-reference .site-main .table-of-contents {
+    margin-left: 0;
+    left: calc( 60em + ( ( 100vw - 60em ) / 2 ));
+    top: 210px;
+    max-height: calc(90vh - 210px);
+  }
+  .widget-area + .site-main .table-of-contents {
+    left: calc( 960px + ( ( 100vw - 960px ) / 2 ));
+    top: 200px;
+    max-height: calc(90vh - 200px);
+  }
+}
+
+@media (min-width: 877px) {
+  .site-main .table-of-contents:not(.code-reference .site-main .table-of-contents):not(.widget-area + .site-main .table-of-contents) {
+    position: fixed;
+    width: 15vw;
+    top: 200px;
+    left: calc( 960px * 0.72 + ( ( 100vw - 960px ) / 2 ) + 15px);
+    max-height: calc(90vh - 200px);
+  }
+}
+
 @media (min-width: 43em) {
   .devhub-wrap.archive .meta, .devhub-wrap.search .meta {
@@ -2795 +3154 @@
   .devhub-wrap.archive .sourcefile, .devhub-wrap.search .sourcefile {
     float: left;
+  }
+}
+
+@media (max-width: 889px) {
+  .code-reference .site-main .table-of-contents {
+    float: none;
+    margin-left: 0;
+    width: 100%;
   }
 }
@@ -2804 +3171 @@
     margin: 0 auto;
     clear: both;
-    padding: 0 12px;
     padding: 0 1.2rem;
   }
@@ -2844 +3210 @@
   }
   .devhub-wrap .horizontal-list li:first-child a {
-    padding: 0 40px;
     padding: 0 4rem;
   }
-  .devhub-wrap .reference-landing .searchform {
-    text-align: center;
-  }
-  .devhub-wrap .reference-landing .searchform input[type="text"],
-  .devhub-wrap .reference-landing .searchform input[type="submit"] {
-    width: 100%;
-    margin-right: 0;
-    margin-bottom: 1em;
-    float: none;
-    clear: both;
-  }
-  .devhub-wrap .wp-parser-class h1, .devhub-wrap .wp-parser-function h1, .devhub-wrap .wp-parser-hook h1, .devhub-wrap .wp-parser-method h1 {
+  .devhub-wrap .wp-parser-class h1,
+  .devhub-wrap .wp-parser-function h1,
+  .devhub-wrap .wp-parser-hook h1,
+  .devhub-wrap .wp-parser-method h1 {
     padding-left: 45px;
     text-indent: -45px;
@@ -2868 +3225 @@
 
 @media (max-width: 32em) {
-  .devhub-wrap .table-of-contents {
-    float: none;
-    margin-left: 0;
-    width: 100%;
-  }
   .devhub-wrap section {
     overflow: inherit;
@@ -2882 +3234 @@
 
 @media (max-width: 22em) {
-  ul, ol {
+  ul,
+  ol {
     margin-left: 1.2em;
   }
-  .devhub-wrap .wp-parser-class h1, .devhub-wrap .wp-parser-function h1, .devhub-wrap .wp-parser-hook h1, .devhub-wrap .wp-parser-method h1 {
+  .devhub-wrap .wp-parser-class h1,
+  .devhub-wrap .wp-parser-function h1,
+  .devhub-wrap .wp-parser-hook h1,
+  .devhub-wrap .wp-parser-method h1 {
     padding-left: 20px;
-    line-height: 2rem;
     text-indent: -20px;
-    font-size: 16px;
+    font-size: 1.6rem;
+    line-height: 1.25;
   }
   .devhub-wrap.single-wp-parser-function .comment-list li, .devhub-wrap.single-wp-parser-method .comment-list li, .devhub-wrap.single-wp-parser-hook .comment-list li {
@@ -2906 +3262 @@
 }
 
-.single-command #content h2, .single-command #content h3 {
+.single-command #content h2,
+.single-command #content h3 {
   margin-top: 4rem;
   margin-bottom: 2.5rem;
@@ -2915 +3272 @@
   padding: 0;
   font-size: 3.5rem;
-  line-height: 4.5rem;
+  line-height: 1.29;
   margin-top: 3rem;
   margin-bottom: 1rem;
@@ -2939 +3296 @@
 .single-command #content .quick-links {
   margin-left: 0.5rem;
-  color: #ABABAB;
+  color: #ababab;
 }
 
 .single-command #content .quick-links a {
   text-decoration: underline;
-  color: #ABABAB;
+  color: #ababab;
 }
 
 .single-command #content .quick-links a:hover {
   color: #757575;
-}
-
-.single-command #content .toc-jump {
-  float: right;
-  font-size: 75%;
-  margin-top: 11px;
 }
 
@@ -2971 +3322 @@
 
 .single-command #content table thead th {
-  font-weight: bold;
+  font-weight: 700;
   padding: 1em;
 }
 
-.single-command #content table th, .single-command #content table td {
+.single-command #content table th,
+.single-command #content table td {
   padding: 0.8em 1em;
   margin: 0;
-  font-weight: normal;
+  font-weight: 400;
   text-align: left;
   vertical-align: top;
@@ -2988 +3340 @@
 }
 
-.single-command .devhub-wrap *, .single-command .devhub-wrap *::before, .single-command .devhub-wrap *::after {
+.single-command .devhub-wrap *,
+.single-command .devhub-wrap *::before,
+.single-command .devhub-wrap *::after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -2994 +3348 @@
 }
 
-.single-command .devhub-wrap a.button, .single-command .devhub-wrap button, .single-command .devhub-wrap input[type="button"], .single-command .devhub-wrap input[type="reset"], .single-command .devhub-wrap input[type="submit"] {
+.single-command .devhub-wrap a.button,
+.single-command .devhub-wrap button,
+.single-command .devhub-wrap input[type="button"],
+.single-command .devhub-wrap input[type="reset"],
+.single-command .devhub-wrap input[type="submit"] {
   border: 1px solid;
   border-color: #ccc;
@@ -3005 +3363 @@
   float: none;
   height: auto;
-  padding: .8rem 1.2rem;
-  margin: .4rem 0;
+  padding: 0.8rem 1.2rem;
+  margin: 0.4rem 0;
   text-decoration: none;
   -webkit-appearance: none;
 }
 
-.single-command .devhub-wrap a.button:hover, .single-command .devhub-wrap button:hover, .single-command .devhub-wrap input[type="button"]:hover, .single-command .devhub-wrap input[type="reset"]:hover, .single-command .devhub-wrap input[type="submit"]:hover {
+.single-command .devhub-wrap a.button:hover,
+.single-command .devhub-wrap button:hover,
+.single-command .devhub-wrap input[type="button"]:hover,
+.single-command .devhub-wrap input[type="reset"]:hover,
+.single-command .devhub-wrap input[type="submit"]:hover {
   border-color: #ccc #bbb #aaa #bbb;
   background: #eee;
 }
 
-.single-command .devhub-wrap a.button:focus, .single-command .devhub-wrap a.button:active, .single-command .devhub-wrap button:focus, .single-command .devhub-wrap button:active, .single-command .devhub-wrap input[type="button"]:focus, .single-command .devhub-wrap input[type="button"]:active, .single-command .devhub-wrap input[type="reset"]:focus, .single-command .devhub-wrap input[type="reset"]:active, .single-command .devhub-wrap input[type="submit"]:focus, .single-command .devhub-wrap input[type="submit"]:active {
+.single-command .devhub-wrap a.button:focus, .single-command .devhub-wrap a.button:active,
+.single-command .devhub-wrap button:focus,
+.single-command .devhub-wrap button:active,
+.single-command .devhub-wrap input[type="button"]:focus,
+.single-command .devhub-wrap input[type="button"]:active,
+.single-command .devhub-wrap input[type="reset"]:focus,
+.single-command .devhub-wrap input[type="reset"]:active,
+.single-command .devhub-wrap input[type="submit"]:focus,
+.single-command .devhub-wrap input[type="submit"]:active {
   border-color: #bbb;
   background: #eee;
@@ -3023 +3393 @@
 }
 
-.single-command .devhub-wrap a.button > span, .single-command .devhub-wrap button > span, .single-command .devhub-wrap input[type="button"] > span, .single-command .devhub-wrap input[type="reset"] > span, .single-command .devhub-wrap input[type="submit"] > span {
+.single-command .devhub-wrap a.button > span,
+.single-command .devhub-wrap button > span,
+.single-command .devhub-wrap input[type="button"] > span,
+.single-command .devhub-wrap input[type="reset"] > span,
+.single-command .devhub-wrap input[type="submit"] > span {
   color: #757575;
 }
 
-.single-command .devhub-wrap a.button > span.red, .single-command .devhub-wrap button > span.red, .single-command .devhub-wrap input[type="button"] > span.red, .single-command .devhub-wrap input[type="reset"] > span.red, .single-command .devhub-wrap input[type="submit"] > span.red {
+.single-command .devhub-wrap a.button > span.red,
+.single-command .devhub-wrap button > span.red,
+.single-command .devhub-wrap input[type="button"] > span.red,
+.single-command .devhub-wrap input[type="reset"] > span.red,
+.single-command .devhub-wrap input[type="submit"] > span.red {
   color: #dc3232;
 }
 
-.single-command .devhub-wrap a.button > span.green, .single-command .devhub-wrap button > span.green, .single-command .devhub-wrap input[type="button"] > span.green, .single-command .devhub-wrap input[type="reset"] > span.green, .single-command .devhub-wrap input[type="submit"] > span.green {
-  color: #46B450;
+.single-command .devhub-wrap a.button > span.green,
+.single-command .devhub-wrap button > span.green,
+.single-command .devhub-wrap input[type="button"] > span.green,
+.single-command .devhub-wrap input[type="reset"] > span.green,
+.single-command .devhub-wrap input[type="submit"] > span.green {
+  color: #46b450;
 }
 
@@ -3065 +3447 @@
 }
 
-code[class*="language-"], pre[class*="language-"] {
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-  background: #2b303b;
-  color: #c0c5ce;
-}
-
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #a7adba;
-}
-
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #a7adba;
-}
-
-pre[class*="language-"] {
-  overflow: auto;
-}
-
-:not(pre) > code[class*="language-"] {
-  border-radius: .3em;
-}
-
-.token.comment, .token.prolog, .token.doctype, .token.cdata {
-  color: #65737e;
-}
-
-.token.punctuation {
-  color: #c0c5ce;
-}
-
-.token.namespace {
-  opacity: .7;
-}
-
-.token.operator, .token.boolean, .token.number {
-  color: #d08770;
-}
-
-.token.property {
-  color: #ebcb8b;
-}
-
-.token.tag {
-  color: #8fa1b3;
-}
-
-.token.string {
-  color: #96b5b4;
-}
-
-.token.selector {
-  color: #b48ead;
-}
-
-.token.attr-name {
-  color: #d08770;
-}
-
-.token.entity, .token.url, .language-css .token.string, .style .token.string {
-  color: #96b5b4;
-}
-
-.token.attr-value, .token.keyword, .token.control, .token.directive, .token.unit {
-  color: #a3be8c;
-}
-
-.token.statement, .token.regex, .token.atrule {
-  color: #96b5b4;
-}
-
-.token.placeholder, .token.variable {
-  color: #8fa1b3;
-}
-
-.token.deleted {
-  text-decoration: line-through;
-}
-
-.token.inserted {
-  border-bottom: 1px dotted #eff1f5;
-  text-decoration: none;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.important, .token.bold {
-  font-weight: bold;
-}
-
-.token.important {
-  color: #bf616a;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-pre > code.highlight {
-  outline: 0.4em solid #bf616a;
-  outline-offset: .4em;
-}
-
 button.code-tab,
 button.code-tab:hover {
   background: #fff;
-  border: none;
   box-shadow: none;
   text-shadow: none;
-  border: 1px solid #D0DFDA;
+  border: 1px solid #d0dfda;
   border-radius: 30px 0 0 30px;
   padding: 8px 20px;
@@ -3205 +3469 @@
 
 button.code-tab.is-active {
-  background: #00B975;
-  border: 1px solid #00B975;
+  background: #00b975;
+  border: 1px solid #00b975;
   box-shadow: none;
   color: #fff;
@@ -3218 +3482 @@
   display: block;
 }
+
+.search-wrap .searchform {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  position: relative;
+  border-radius: 2px;
+  margin: 3rem auto 0;
+}
+
+.search-wrap .searchform input[type="search"] {
+  flex-grow: 1;
+  margin: 0;
+  padding: 1rem 45px 1rem 1rem;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  box-shadow: none;
+  font-size: 13px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.search-wrap .searchform .search-field {
+  position: relative;
+  margin-bottom: 2rem;
+  display: flex;
+  border: 1px solid #000;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.search-wrap .searchform .search-field ul {
+  left: 50%;
+  transform: translate(-50%, 0);
+  max-width: calc(100vw - 40px - 48px);
+  /* Match parents padding/margin. */
+}
+
+.search-wrap .searchform .search-field ul li {
+  padding-right: 20px;
+}
+
+.search-wrap .searchform .button-search {
+  display: flex;
+  padding: 0;
+  position: absolute;
+  cursor: pointer;
+  right: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  height: 100%;
+  width: 40px;
+  align-items: center;
+  top: 0;
+}
+
+.search-wrap .searchform .button-search:active {
+  background: #dcdcde;
+}
+
+.search-wrap .searchform .button-search > svg {
+  flex: 1;
+}
+
+.search-wrap .searchform .search-post-type {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  margin: 0 0 2rem;
+  color: #000;
+  font-size: 13px;
+  flex-wrap: wrap;
+}
+
+.search-wrap .searchform .search-post-type > span,
+.search-wrap .searchform .search-post-type > div {
+  position: relative;
+  margin: 0.25rem;
+}
+
+.search-wrap .searchform .search-post-type label {
+  padding: 0.5rem 0.5rem 0.5rem 2.5rem;
+  border-radius: 2px;
+  user-select: none;
+}
+
+.search-wrap .searchform .search-post-type input {
+  position: absolute;
+  z-index: 1;
+  top: 3px;
+  left: 6px;
+}
+
+.search-wrap .searchform .search-post-type label,
+.search-wrap .searchform .search-post-type input {
+  cursor: pointer;
+}
+
+.search-wrap .searchform.searchform-handbook .search-field {
+  border-color: #c3c4c7;
+  border-radius: 0;
+}
+
+.widget_search .search-wrap .searchform.searchform-handbook {
+  padding-right: 1em;
+}
+
+@media (max-width: 876px) {
+  .widget_search .search-wrap .searchform.searchform-handbook {
+    padding: 1.5em 1em 0;
+  }
+}
+
+.search-wrap.search-wrap-inline .searchform {
+  margin: 0;
+}
+
+.search-wrap.search-wrap-inline .search-field {
+  margin: 0;
+  border: none;
+}
+
+.search-wrap.search-wrap-embedded .search-field {
+  margin-bottom: 0;
+  max-width: 400px;
+  border: none;
+}
+
+.search-wrap.search-wrap-embedded .search-post-type {
+  margin-top: 2rem;
+  justify-content: space-between;
+  color: #fff;
+  max-width: 450px;
+}
+
+.search-wrap.search-wrap-embedded .search-post-type input:checked + label {
+  content: "";
+  background: #fff;
+  color: #000;
+}
+
+@media (max-width: 688px) {
+  .search-wrap.search-wrap-embedded .search-post-type {
+    justify-content: center;
+  }
+  .search-wrap.search-wrap-embedded .search-post-type > span {
+    flex-basis: 100%;
+    margin-bottom: 1rem;
+  }
+  .search-wrap.search-wrap-embedded .search-post-type > div {
+    position: relative;
+    margin: 1rem;
+  }
+}
+
+.not-found {
+  padding: 4rem 0;
+  text-align: center;
+}

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/page-dashicons.css

@@ -78 +78 @@
 
 .dashicons-page #glyph .name {
-  font-size: .9em;
+  font-size: 0.9em;
 }
 
@@ -84 +84 @@
   margin: 1.5em 0;
   padding-top: 25px;
-  border-top: 1px solid lightgrey;
+  border-top: 1px solid #d3d3d3;
 }
 
@@ -150 +150 @@
 .dashicons-page #instructions {
   margin-top: 1.5em;
-  border-top: 1px solid lightgrey;
+  border-top: 1px solid #d3d3d3;
 }