From 0397f87c1cf395e98f31daaa6c397565a90d3071 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Justin=20S=C3=A8gb=C3=A9dji=20Ahinon?= Date: Wed, 9 Sep 2020 16:33:34 +0100 Subject: [PATCH] Add/block icon component readme (#24947) * Draft block icon component readme * Update block icon component readme * Update block icon component readme * Update BlockIcon component code sample * Update BlockIcon component code sample * Update JSX code sample --- .../src/components/block-icon/README.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 packages/block-editor/src/components/block-icon/README.md diff --git a/packages/block-editor/src/components/block-icon/README.md b/packages/block-editor/src/components/block-icon/README.md new file mode 100644 index 00000000000000..cc366e7afad72d --- /dev/null +++ b/packages/block-editor/src/components/block-icon/README.md @@ -0,0 +1,29 @@ +# Block Icon + +The BlockIcon component provides an icon for blocks in different places in the editor: the toolbar of a selected block, the placeholders of certain blocks (gallery, image), the block insertion panel of the editor or the left sidebar. + +The rendered an [Icon](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/icon) component with default styles. + +![Image block icons in various places](https://make.wordpress.org/core/files/2020/08/image-block-icons-in-various-places.png) + +## Table of contents + +1. [Development guidelines](#development-guidelines) +2. [Related components](#related-components) + + +## Development guidelines + +### Usage + +Renders a block icon with default style. + +```jsx +import { BlockIcon } from '@wordpress/block-editor'; + +const MyBlockIcon = () => +``` + +## Related components + +Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/provider/README.md) in the components tree.