plugins - Editing a block to add a button to have a drop cap

admin管理员组

文章数量:1134247

Currently, I have a code to edit the paragraph block and add a button to convert it into having a drop cap.

const { __ } = wp.i18n;

const enableToolbarButtonOnBlocks = ["core/paragraph"];

const { createHigherOrderComponent } = wppose;
const { Fragment } = wp.element;
const { BlockControls } = wp.blockEditor;
const { ToolbarGroup, ToolbarButton } = wpponents;

const setToolbarButtonAttribute = (settings, name) => {
    if (!enableToolbarButtonOnBlocks.includes(name)) {
        return settings;
    }

    return Object.assign({}, settings, {
        attributes: Object.assign({}, settings.attributes, {
            dropCapAttribute: { type: "string" },
        }),
    });
};
wp.hooks.addFilter(
    "blocks.registerBlockType",
    "custom-attributes/set-toolbar-button-attribute",
    setToolbarButtonAttribute
);

const withToolbarButton = createHigherOrderComponent((BlockEdit) => {
    return (props) => {
        if (!enableToolbarButtonOnBlocks.includes(props.name)) {
            return <BlockEdit {...props} />;
        }
        const { attributes, setAttributes } = props;
        const { dropCapAttribute } = attributes;
        
        return (
            <Fragment>
                <BlockControls group="block">
                    <ToolbarGroup>
                        <ToolbarButton
                            icon="editor-paragraph"
                            label={__("drop cap", "core-block-custom-attributes")}
                            isActive={dropCapAttribute === "true"}
                            onClick={() => {
                                if (dropCapAttribute === "true") {
                                    setAttributes({ dropCapAttribute: false });
                                } else {
                                    setAttributes({ dropCapAttribute: "true" });
                                }
                            }}
                        />
                    </ToolbarGroup>
                </BlockControls>
                <BlockEdit {...props} />
            </Fragment>
        );
    };
}, "withToolbarButton");

wp.hooks.addFilter(
    "editor.BlockEdit",
    "custom-attributes/with-toolbar-button",
    withToolbarButton
);

const withToolbarButtonProp = createHigherOrderComponent((BlockListBlock) => {
    return (props) => <BlockListBlock {...props} />;
}, "withToolbarButtonProp");

wp.hooks.addFilter(
    "editor.BlockListBlock",
    "custom-attributes/with-toolbar-button-prop",
    withToolbarButtonProp
);

const saveToolbarButtonAttribute = (extraProps, blockType, attributes) => {
    if (enableToolbarButtonOnBlocks.includes(blockType.name)) {
        const { dropCapAttribute } = attributes;
        if (dropCapAttribute && "true" === dropCapAttribute) {
            return {
                ...extraProps,
                "data-dropcap": "true",
            };
        }
    }

    return extraProps;
};
wp.hooks.addFilter(
    "blocks.getSaveContent.extraProps",
    "custom-attributes/save-toolbar-button-attribute",
    saveToolbarButtonAttribute
);

I have this code in the folder: myplugin/src/attributes/dropcap, I also have styles.scss in the same folder with in myplugin I have other blocks so I can run npm run start in the folder and it will build them in the build folder.

My question how can I get wp-scripts to include these attributes within my build process?

I'm currently adding the code to add the new block by wp_register_script and adding it with wp_enqueue_script.

Do I add the folder to the register_block_type?

本文标签： pluginsEditing a block to add a button to have a drop cap