Base JS Components for Gutenberg Blocks

This package contains two components that can be used for WordPress Gutenberg block development:

• Link Picker


• Image Picker

Installation

To install this package, use:

npm install base-js-sw

Usage

1. LinkPicker Component

The 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.

Usage in a Gutenberg Block:

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:

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:

• setAttributes: Function to set the block's attributes


• imageObject: The current image object with properties like url, alt, etc.


• imageRef: (Optional) The reference name for the image object (default is 'imageObject')


• buttonText: (Optional) The button label text (default is 'Select an image')

Block requirements

{
	"$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"]
}

Contributing

Contributions are welcome. Please submit issues or pull requests to help improve the package.

License

This project is licensed under the MIT License.