Reusable Gutenberg block components for WordPress projects
npm install base-js-swThis package contains two components that can be used for WordPress Gutenberg block development:
To install this package, use:
npm install base-js-swLinkPicker ComponentThe LinkPicker component allows you to select a URL, internal post, or anchor link within your block editor. It stores the selected link as a link object and supports setting a post ID or external URL.
import { LinkPicker } from 'base-js-sw';registerBlockType('sw/link-block', {
edit: ({ attributes, setAttributes }) => {return ..
`` setAttributes={setAttributes}
at={attributes}
linkRef="link"
/>`},
save: () => null, // handled by render.php
});
Attributes:
'link')ImagePicker ComponentThe ImagePicker component allows you to select and manage images in your Gutenberg blocks, with options to crop, replace, and remove images.
import { ImagePicker } from 'base-js-sw';`registerBlockType('sw/image-block', {
edit: ({ attributes, setAttributes }) => {
return ...
``
setAttributes={setAttributes}
imageObject={attributes.imageObject}
imageRef="imageObject"
buttonText="Select an image"
/>
},
save: () => null, // handled by render.php
});
Attributes:
url, alt, etc.'imageObject')'Select an image')
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "theme/block",
"title": "Block"
"attributes": {
"text": {
"type": "string",
"default": ""
},
"link": {
"type": "object",
"properties": {
"url": {
"type": "string",
"default": ""
},
"linkTarget": {
"type": "string",
"default": ""
},
"id": {
"type": "integer",
"default": false
}
}
},
"imageObject":{
"type": "object",
"id": {
"type": "integer",
"default": ""
},
"url": {
"type": "string",
"default": ""
},
"alt": {
"type": "string",
"default": ""
}
}
},
"editorScript": "theme-block-js",
"style": "theme-editor-styles",
"render": "file:./render.php",
"postTypes": ["all"]
}
Contributions are welcome. Please submit issues or pull requests to help improve the package.
This project is licensed under the MIT License.