Making WordPress.org

Changeset 11157


Ignore:
Timestamp:
07/28/2021 07:44:34 PM (6 months ago)
Author:
coffee2code
Message:

Developer: Add examples for dashicons usage in block editor.

Props derweili, coffeed2code.
Fixes #4949.

File:
1 edited

Legend:

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

    r10186 r11157  
    536536</pre>
    537537
     538                <h3><?php _e( 'Block Usage', 'wporg' ); ?></h3>
     539
     540                <p><?php _e( 'The block editor supports use of dashicons as block icons and as its own component.', 'wporg' ); ?></p>
     541
     542                <h4><?php _e( 'Examples', 'wporg' ); ?></h4>
     543
     544                <p><?php printf(
     545                    /* translators: %s: URL to Block Editor Handbook for registering a block. */
     546                    __( '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' ),
     547                    'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/#registering-the-block'
     548                ); ?></p>
     549
     550<pre>
     551registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
     552    apiVersion: 2,
     553    title: 'Example: Basic (esnext)',
     554    icon: 'universal-access-alt',
     555    category: 'design',
     556    example: {},
     557    edit() {},
     558    save() {},
     559} );
     560</pre>
     561                <p><?php printf(
     562                    /* translators: %s: URL to handbook page for Dashicon component. */
     563                    __( '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' ),
     564                    'https://developer.wordpress.org/block-editor/reference-guides/components/dashicon/'
     565                ); ?></p>
     566
     567<pre>
     568import { Dashicon } from '@wordpress/components';
     569 
     570const MyDashicon = () =&gt; (
     571    &lt;div&gt;
     572        &lt;Dashicon icon="admin-home" /&gt;
     573        &lt;Dashicon icon="products" /&gt;
     574        &lt;Dashicon icon="wordpress" /&gt;
     575    &lt;/div&gt;
     576);
     577</pre>
     578
    538579                <h3><?php _e( 'Photoshop Usage', 'wporg' ); ?></h3>
    539580
Note: See TracChangeset for help on using the changeset viewer.