diff --git a/packages/schema-blocks/css/schema-blocks.css b/packages/schema-blocks/css/schema-blocks.css index 77364ec01..f7795ed8c 100644 --- a/packages/schema-blocks/css/schema-blocks.css +++ b/packages/schema-blocks/css/schema-blocks.css @@ -126,3 +126,7 @@ .yoast-block-date-picker .components-datetime__time > fieldset:last-child { display: none; } + +.yoast-schema-blocks-icon svg { + fill:none; +} diff --git a/packages/schema-blocks/src/core/blocks/BlockDefinition.tsx b/packages/schema-blocks/src/core/blocks/BlockDefinition.tsx index faf421786..9c191397c 100644 --- a/packages/schema-blocks/src/core/blocks/BlockDefinition.tsx +++ b/packages/schema-blocks/src/core/blocks/BlockDefinition.tsx @@ -1,6 +1,11 @@ import { createElement, Fragment, ReactElement } from "@wordpress/element"; -import { registerBlockType, BlockConfiguration, BlockEditProps, BlockSaveProps } from "@wordpress/blocks"; -import { InspectorControls } from "@wordpress/block-editor"; +import { + registerBlockType, + BlockConfiguration, + BlockEditProps, + BlockSaveProps, +} from "@wordpress/blocks"; +import { InspectorControls, BlockIcon } from "@wordpress/block-editor"; import BlockInstruction from "./BlockInstruction"; import Definition from "../Definition"; import BlockRootLeaf from "../../leaves/blocks/BlockRootLeaf"; @@ -87,6 +92,10 @@ export default class BlockDefinition extends Definition { logger.debug( "registering block " + name ); + if ( configuration.icon && typeof configuration.icon === "string" && configuration.icon.startsWith( " instruction.sidebar( props, index ) ) .filter( e => e !== null ); } + + /** + * Creates an block icon. + * + * @param {MutableBlockConfiguration} configuration The block configuration. + * + * @returns {ReactElement[]} The sidebar element to render. + */ + private createBlockIcon( configuration: MutableBlockConfiguration ): ReactElement { + const icon = ; + + return ; + } }