WordPress.org
Get WordPress

Make WordPress Core

Changeset 44961


Ignore:
Timestamp:
03/21/2019 03:30:52 PM (6 years ago)
Author:
SergeyBiryukov
Message:

Accessibility: Remove post format filter links from format icons in the Posts list table.

Introduce a dedicated 'Formats' drop-down filter as a replacement.

Keep the icons as a simple visual indicator of the post format for now.

Props afercia, melchoyce, GaryJ, chiaralovelaces, SergeyBiryukov.
Fixes #35497.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/edit.css

    r44945 r44961  
    864864------------------------------------------------------------------------------*/
    865865
    866 .post-state-format {
    867     overflow: hidden;
     866.post-format-icon::before {
    868867    display: inline-block;
    869868    vertical-align: middle;
    870869    height: 20px;
    871870    width: 20px;
    872     margin-right: 5px;
    873871    margin-top: -4px;
    874 }
    875 
    876 .post-state-format:before {
    877     display: block;
    878     height: 20px;
    879     width: 20px;
    880     font: normal 20px/1 dashicons !important;
    881     speak: none;
    882     -webkit-font-smoothing: antialiased;
    883     -moz-osx-font-smoothing: grayscale;
    884 }
    885 
    886 .post-state-format:before,
    887 .post-format-icon:before {
     872    margin-right: 7px;
    888873    color: #ddd;
    889     transition: all .1s ease-in-out;
    890 }
    891 
    892 a.post-state-format:hover:before,
    893 a.post-format-icon:hover:before {
    894     color: #00a0d2;
    895 }
    896 
    897 #post-formats-select {
    898     line-height: 2em;
    899 }
    900 
    901 #post-formats-select .post-format-icon:before {
    902     top: 5px;
    903 }
    904 
    905 input.post-format {
    906     margin-top: 1px;
    907 }
    908 
    909 label.post-format-icon {
    910     margin-left: 0px;
    911     padding: 2px 0 2px 0px;
    912 }
    913 
    914 .post-format-icon:before {
    915     position: relative;
    916     display: inline-block;
    917     margin-right: 7px;
    918874    font: normal 20px/1 dashicons;
    919875    speak: none;
    920876    -webkit-font-smoothing: antialiased;
    921877    -moz-osx-font-smoothing: grayscale;
    922 }
    923 
    924 .post-state-format.post-format-standard:before,
    925 .post-format-icon.post-format-standard:before,
    926 a.post-state-format.format-standard:before {
     878    transition: all .1s ease-in-out;
     879}
     880
     881a.post-format-icon:hover:before {
     882    color: #00a0d2;
     883}
     884
     885#post-formats-select {
     886    line-height: 2em;
     887}
     888
     889#post-formats-select .post-format-icon::before {
     890    top: 5px;
     891}
     892
     893input.post-format {
     894    margin-top: 1px;
     895}
     896
     897label.post-format-icon {
     898    margin-left: 0;
     899    padding: 2px 0;
     900}
     901
     902.post-format-icon.post-format-standard::before {
    927903    content: "\f109";
    928904}
    929905
    930 .post-state-format.post-format-image:before,
    931 .post-format-icon.post-format-image:before,
    932 a.post-state-format.format-image:before {
     906.post-format-icon.post-format-image::before {
    933907    content: "\f128";
    934908}
    935909
    936 .post-state-format.post-format-gallery:before,
    937 .post-format-icon.post-format-gallery:before,
    938 a.post-state-format.format-gallery:before {
     910.post-format-icon.post-format-gallery::before {
    939911    content: "\f161";
    940912}
    941913
    942 .post-state-format.post-format-audio:before,
    943 .post-format-icon.post-format-audio:before,
    944 a.post-state-format.format-audio:before {
     914.post-format-icon.post-format-audio::before {
    945915    content: "\f127";
    946916}
    947917
    948 .post-state-format.post-format-video:before,
    949 .post-format-icon.post-format-video:before,
    950 a.post-state-format.format-video:before {
     918.post-format-icon.post-format-video::before {
    951919    content: "\f126";
    952920}
    953921
    954 .post-state-format.post-format-chat:before,
    955 .post-format-icon.post-format-chat:before,
    956 a.post-state-format.format-chat:before {
     922.post-format-icon.post-format-chat::before {
    957923    content: "\f125";
    958924}
    959925
    960 .post-state-format.post-format-status:before,
    961 .post-format-icon.post-format-status:before,
    962 a.post-state-format.format-status:before {
     926.post-format-icon.post-format-status::before {
    963927    content: "\f130";
    964928}
    965929
    966 .post-state-format.post-format-aside:before,
    967 .post-format-icon.post-format-aside:before,
    968 a.post-state-format.format-aside:before {
     930.post-format-icon.post-format-aside::before {
    969931    content: "\f123";
    970932}
    971933
    972 .post-state-format.post-format-quote:before,
    973 .post-format-icon.post-format-quote:before,
    974 a.post-state-format.format-quote:before {
     934.post-format-icon.post-format-quote::before {
    975935    content: "\f122";
    976936}
    977937
    978 .post-state-format.post-format-link:before,
    979 .post-format-icon.post-format-link:before,
    980 a.post-state-format.format-link:before {
     938.post-format-icon.post-format-link::before {
    981939    content: "\f103";
    982940}

  • trunk/src/wp-admin/css/ie.css

    r44637 r44961  
    470470.subsubsub li {
    471471    display: inline;
    472 }
    473 
    474 a.post-state-format {
    475     text-indent: 0;
    476     line-height: 0;
    477     font-size: 0;
    478472}
    479473

  • trunk/src/wp-admin/includes/class-wp-posts-list-table.php

    r44822 r44961  
    460460
    461461    /**
     462     * Displays a formats drop-down for filtering items.
     463     *
     464     * @since 5.2.0
     465     * @access protected
     466     *
     467     * @param string $post_type Post type key.
     468     */
     469    protected function formats_dropdown( $post_type ) {
     470        /**
     471         * Filters whether to remove the 'Formats' drop-down from the post list table.
     472         *
     473         * @since 5.2.0
     474         *
     475         * @param bool $disable Whether to disable the drop-down. Default false.
     476         */
     477        if ( apply_filters( 'disable_formats_dropdown', false ) ) {
     478            return;
     479        }
     480
     481        // Make sure the dropdown shows only formats with a post count greater than 0.
     482        $used_post_formats = get_terms(
     483            array(
     484                'taxonomy'   => 'post_format',
     485                'hide_empty' => true,
     486            )
     487        );
     488
     489        /*
     490         * Return if the post type doesn't have post formats, or there are no posts using formats,
     491         * or if we're in the trash.
     492         */
     493        if ( ! is_object_in_taxonomy( $post_type, 'post_format' ) || ! $used_post_formats || $this->is_trash ) {
     494            return;
     495        }
     496
     497        $displayed_post_format = isset( $_GET['post_format'] ) ? $_GET['post_format'] : '';
     498        ?>
     499        <label for="filter-by-format" class="screen-reader-text"><?php _e( 'Filter by post format' ); ?></label>
     500        <select name="post_format" id="filter-by-format">
     501            <option<?php selected( $displayed_post_format, '' ); ?> value=""><?php _e( 'All formats' ); ?></option>
     502            <?php
     503            foreach ( $used_post_formats as $used_post_format ) {
     504                // Post format slug.
     505                $slug = str_replace( 'post-format-', '', $used_post_format->slug );
     506                // Pretty, translated version of the post format slug.
     507                $pretty_name = get_post_format_string( $slug );
     508                // Skip the standard post format.
     509                if ( 'standard' === $slug ) {
     510                    continue;
     511                }
     512                ?>
     513                <option<?php selected( $displayed_post_format, $slug ); ?> value="<?php echo esc_attr( $slug ); ?>"><?php echo esc_html( $pretty_name ); ?></option>
     514                <?php
     515            }
     516            ?>
     517        </select>
     518        <?php
     519    }
     520
     521    /**
    462522     * @param string $which
    463523     */
    … …  
    471531            $this->months_dropdown( $this->screen->post_type );
    472532            $this->categories_dropdown( $this->screen->post_type );
     533            $this->formats_dropdown( $this->screen->post_type );
    473534
    474535            /**
    … …  
    9441005        echo '<strong>';
    9451006
    946         $format = get_post_format( $post->ID );
    947         if ( $format ) {
    948             $label = get_post_format_string( $format );
    949 
    950             $format_class = 'post-state-format post-format-icon post-format-' . $format;
    951 
    952             $format_args = array(
    953                 'post_format' => $format,
    954                 'post_type'   => $post->post_type,
    955             );
    956 
    957             echo $this->get_edit_link( $format_args, $label . ':', $format_class );
    958         }
     1007        $format         = get_post_format( $post->ID );
     1008        $format_classes = ( $format ) ? 'post-format-icon post-format-' . esc_attr( $format ) : '';
    9591009
    9601010        $title = _draft_or_post_title();
    … …  
    9621012        if ( $can_edit_post && $post->post_status != 'trash' ) {
    9631013            printf(
    964                 '<a class="row-title" href="%s" aria-label="%s">%s%s</a>',
     1014                '<a class="row-title %s" href="%s" aria-label="%s">%s%s</a>',
     1015                $format_classes,
    9651016                get_edit_post_link( $post->ID ),
    9661017                /* translators: %s: post title */
    … …  
    9701021            );
    9711022        } else {
    972             echo $pad . $title;
     1023            printf(
     1024                '<span class="%s">%s%s</span>',
     1025                $format_classes,
     1026                $pad,
     1027                $title
     1028            );
    9731029        }
    9741030        _post_states( $post );
Note: See TracChangeset for help on using the changeset viewer.