Changeset 10440 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section-blocks.php

Timestamp:

11/11/2020 04:23:45 PM (4 years ago)

Author:

ryelle

Message:

Plugin Directory: Show available block names, icons, and descriptions.

Props michael-arestad for design.
Fixes #5411.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/section-blocks.php (modified) (2 diffs)

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

@@ -14 +14 @@
 $classes = [ 'plugin-' . $section_slug, 'section' ];
 $classes = implode( ' ', $classes );
+
+$allowed_svg = array(
+    'svg'   => array(
+        'class' => true,
+        'aria-hidden' => true,
+        'aria-labelledby' => true,
+        'role' => true,
+        'xmlns' => true,
+        'width' => true,
+        'height' => true,
+        'viewbox' => true,
+    ),
+    'g'     => array( 'fill' => true ),
+    'title' => array( 'title' => true ),
+    'path'  => array(
+        'd' => true,
+        'fill' => true,
+        'transform' => true,
+    ),
+);
 ?>
 
@@ -20 +40 @@
 
     <p><?php printf( esc_html( _n( 'This plugin provides %d block.', 'This plugin provides %d blocks.', count( $section_content ), 'wporg-plugins'  ) ), count( $section_content ) ); ?></p>
-    <dl>
-        <?php foreach ( $section_content as $block ) : ?>
-            <dt><?php if ( isset( $block->name ) ) echo esc_html( $block->name ); ?></dt>
-                <dd><?php if ( isset( $block->title ) ) echo esc_html( $block->title ); ?></dd>
+    <ul class="plugin-blocks-list">
+        <?php
+        foreach ( $section_content as $block ) :
+            $block_name = isset( $block->title ) ? $block->title : false;
+            if ( ! $block_name ) {
+                $block_name = isset( $block->name ) ? $block->name : false;
+            }
+            if ( ! $block_name ) {
+                // If we still have no name, we don't have a valid block.
+                continue;
+            }
+            $block_icon = isset( $block->icon ) ? $block->icon : '';
+            $block_classes = 'plugin-blocks-list-item';
+            $block_classes .= isset( $block->description ) ? ' has-description' : '';
+            ?>
+            <li class="<?php echo esc_attr( $block_classes ); ?>">
+                <?php if ( false !== strpos( $block_icon, '<svg' ) ) : ?>
+                    <span class="block-icon">
+                        <?php echo wp_kses( str_replace( '<svg ', '<svg role="img" aria-hidden="true" focusable="false" ', $block_icon ), $allowed_svg ); ?>
+                    </span>
+                <?php elseif ( $block_icon ) : ?>
+                    <span class="block-icon dashicons dashicons-<?php echo esc_attr( $block->icon ); ?>"></span>
+                <?php else : ?>
+                    <span class="block-icon dashicons dashicons-block-default"></span>
+                <?php endif; ?>
+                <span class="block-title"><?php echo esc_html( $block_name ); ?></span>
+                <?php if ( isset( $block->description ) ) : ?>
+                    <span class="block-description"><?php echo esc_html( $block->description ); ?></dd>
+                <?php endif; ?>
+            </li>
         <?php endforeach; ?>
-    </dl>
+    </ul>
 </div>