From afdf8a6cacbf6f8cfce56e5822d76ca864564bbf Mon Sep 17 00:00:00 2001 From: Justin Ahinon Date: Mon, 31 Aug 2020 11:55:02 +0100 Subject: [PATCH 1/6] Draft block icon component readme --- .../block-editor/src/components/block-icon/README.md | 11 +++++++++++ 1 file changed, 11 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..507fc40d5d48ec --- /dev/null +++ b/packages/block-editor/src/components/block-icon/README.md @@ -0,0 +1,11 @@ +# 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. + +![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. [Design guidelines](#design-guidelines) +2. [Development guidelines](#development-guidelines) +3. [Related components](#related-components) From c064567e386d62876930d344a057b07f7daed428 Mon Sep 17 00:00:00 2001 From: Justin Ahinon Date: Mon, 31 Aug 2020 18:55:59 +0100 Subject: [PATCH 2/6] Update block icon component readme --- .../src/components/block-icon/README.md | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-icon/README.md b/packages/block-editor/src/components/block-icon/README.md index 507fc40d5d48ec..63d8228cdfd915 100644 --- a/packages/block-editor/src/components/block-icon/README.md +++ b/packages/block-editor/src/components/block-icon/README.md @@ -2,10 +2,24 @@ 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. [Design guidelines](#design-guidelines) -2. [Development guidelines](#development-guidelines) -3. [Related components](#related-components) +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 MyIcon = () => ; +``` From e1d0485984994c29efd540545f21b113db6a8d1a Mon Sep 17 00:00:00 2001 From: Justin Ahinon Date: Tue, 1 Sep 2020 07:31:56 +0100 Subject: [PATCH 3/6] Update block icon component readme --- packages/block-editor/src/components/block-icon/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/block-icon/README.md b/packages/block-editor/src/components/block-icon/README.md index 63d8228cdfd915..cc28f26ea6796a 100644 --- a/packages/block-editor/src/components/block-icon/README.md +++ b/packages/block-editor/src/components/block-icon/README.md @@ -23,3 +23,8 @@ import { BlockIcon } from '@wordpress/block-editor'; const MyIcon = () => ; ``` + + +## 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. From 687e0ddfade5312b068188a0792a35bf4ced7066 Mon Sep 17 00:00:00 2001 From: Justin Ahinon Date: Tue, 1 Sep 2020 07:40:39 +0100 Subject: [PATCH 4/6] Update BlockIcon component code sample --- packages/block-editor/src/components/block-icon/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-icon/README.md b/packages/block-editor/src/components/block-icon/README.md index cc28f26ea6796a..b7632d80b45b72 100644 --- a/packages/block-editor/src/components/block-icon/README.md +++ b/packages/block-editor/src/components/block-icon/README.md @@ -20,8 +20,9 @@ Renders a block icon with default style. ```jsx import { BlockIcon } from '@wordpress/block-editor'; +import { getBlockType } from '@wordpress/blocks'; -const MyIcon = () => ; +const MyIcon = () => ``` From 5564a9e39ac474f51093b2dbb25f3c02fcec7683 Mon Sep 17 00:00:00 2001 From: Justin Ahinon Date: Tue, 1 Sep 2020 07:43:06 +0100 Subject: [PATCH 5/6] Update BlockIcon component code sample --- packages/block-editor/src/components/block-icon/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-icon/README.md b/packages/block-editor/src/components/block-icon/README.md index b7632d80b45b72..1c5418b2956a36 100644 --- a/packages/block-editor/src/components/block-icon/README.md +++ b/packages/block-editor/src/components/block-icon/README.md @@ -22,7 +22,7 @@ Renders a block icon with default style. import { BlockIcon } from '@wordpress/block-editor'; import { getBlockType } from '@wordpress/blocks'; -const MyIcon = () => +const MyBlockIcon = () => ``` From c3a3bb9076495664e42ba1d4a63440e34dec0b52 Mon Sep 17 00:00:00 2001 From: Justin Ahinon Date: Mon, 7 Sep 2020 08:07:06 +0100 Subject: [PATCH 6/6] Update JSX code sample --- packages/block-editor/src/components/block-icon/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-icon/README.md b/packages/block-editor/src/components/block-icon/README.md index 1c5418b2956a36..cc366e7afad72d 100644 --- a/packages/block-editor/src/components/block-icon/README.md +++ b/packages/block-editor/src/components/block-icon/README.md @@ -20,12 +20,10 @@ Renders a block icon with default style. ```jsx import { BlockIcon } from '@wordpress/block-editor'; -import { getBlockType } from '@wordpress/blocks'; -const MyBlockIcon = () => +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.