Changeset 11157 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-dashicons.php

Timestamp:

07/28/2021 07:44:34 PM (3 years ago)

Author:

coffee2code

Message:

Developer: Add examples for dashicons usage in block editor.

Props derweili, coffeed2code.
Fixes #4949.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-dashicons.php (modified) (1 diff)

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

@@ -536 +536 @@
 </pre>
 
+                <h3><?php _e( 'Block Usage', 'wporg' ); ?></h3>
+
+                <p><?php _e( 'The block editor supports use of dashicons as block icons and as its own component.', 'wporg' ); ?></p>
+
+                <h4><?php _e( 'Examples', 'wporg' ); ?></h4>
+
+                <p><?php printf(
+                    /* translators: %s: URL to Block Editor Handbook for registering a block. */
+                    __( 'Adding an icon to a block. The <code>registerBlockType</code> function accepts a parameter "icon" which accepts the name of a dashicon. The provided example is truncated. See the <a href="%s">full example</a> in the Block Editor Handbook.', 'wporg' ),
+                    'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/#registering-the-block'
+                ); ?></p>
+
+<pre>
+registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
+    apiVersion: 2,
+    title: 'Example: Basic (esnext)',
+    icon: 'universal-access-alt',
+    category: 'design',
+    example: {},
+    edit() {},
+    save() {},
+} );
+</pre>
+                <p><?php printf(
+                    /* translators: %s: URL to handbook page for Dashicon component. */
+                    __( 'Using an icon as a component. A dedicated <code>Dashicon</code> component is available. See the <a href="%s">related documentation</a> in the Block Editor Handbook.', 'wporg' ),
+                    'https://developer.wordpress.org/block-editor/reference-guides/components/dashicon/'
+                ); ?></p>
+
+<pre>
+import { Dashicon } from '@wordpress/components';
+ 
+const MyDashicon = () =&gt; (
+    &lt;div&gt;
+        &lt;Dashicon icon="admin-home" /&gt;
+        &lt;Dashicon icon="products" /&gt;
+        &lt;Dashicon icon="wordpress" /&gt;
+    &lt;/div&gt;
+);
+</pre>
+
                 <h3><?php _e( 'Photoshop Usage', 'wporg' ); ?></h3>