Changeset 12050

Timestamp:

09/05/2022 05:14:31 AM (2 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) {