Hey all I need some help with a custom block. I have built a block that allows me to select an image from the media library. This works fine on the editor side but I can’t work out how to display it on the front end. I used the wordpress create-block tool to do the initial scaffolding.
I think the relevant files are block.json, index.js, edit.js and render.php
Block.json
{
“$schema”: “https://schemas.wp.org/trunk/block.json”,
“apiVersion”: 3,
“name”: “create-block/cat-image-block”,
“version”: “0.1.0”,
“title”: “Cat Image Block”,
“category”: “widgets”,
“icon”: “smiley”,
“description”: “Example block scaffolded with Create Block tool.”,
“example”: {},
“supports”: {
“html”: false,
“align”: true,
“__experimentalBorder”: {
“radius”: true,
“width”: true,
“color”: true,
“style”: true
},
“color”: {
“background”: true,
“text”: true
}
},
“textdomain”: “cat-image-block”,
“editorScript”: “file:./index.js”,
“editorStyle”: “file:./index.css”,
“style”: “file:./style-index.css”,
“render”: “file:./render.php”,
“viewScript”: “file:./view.js”,
“attributes”: {
“customImage”: {
“type”: “string”,
“default”: null
}
}
}
Index.js
/**
* Registers a new block provided a unique name and an object defining its behavior.
*
* @see
*/
import { registerBlockType } from ‘@wordpress/blocks’;
/**
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
* All files containing `style` keyword are bundled together. The code used
* gets applied both to the front of your site and to the editor.
*
* @see
*/
import ‘./style.scss’;
/**
* Internal dependencies
*/
import Edit from ‘./edit’;
import metadata from ‘./block.json’;
/**
* Every block starts by registering a new block type definition.
*
* @see
*/
registerBlockType(metadata.name, {
/**
* @see ./edit.js
*/
edit: Edit,
});
Edit.js
/**
* Retrieves the translation of text.
*
* @see
*/
import { __ } from ‘@wordpress/i18n’;
/**
* React hook that is used to mark the block wrapper element.
* It provides all the necessary props like the class name.
*
* @see
*/
import { useBlockProps } from ‘@wordpress/block-editor’;
/**
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
* Those files can contain any CSS code that gets applied to the editor.
*
* @see
*/
import ‘./editor.scss’;
/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @see
*
* @return {WPElement} Element to render.
*/
import { MediaUpload, InspectorControls} from ‘@wordpress/block-editor’;
import { PanelBody, TextControl } from ‘@wordpress/components’;
export default function Edit(props) {
const {attributes, setAttributes} = props;
//Function to handle the image selection
const onSelectImage = (media) => {
setAttributes({ customImage: media.url});
};
const divStyle = {
backgroundImage: `url(${attributes.customImage})`,
backgroundSize: ‘cover’,
backgroundPosition: ‘center’,
width: ‘100%’,
height: ‘200px’, // Adjust the height as needed
backgroundColor: ‘transparent’,
backgroundRepeat: ‘no-repeat’,
}
return (
<div {…useBlockProps()}>
<InspectorControls>
<PanelBody title={__(‘Custom Image’, ‘cat_image_block’)}>
<MediaUpload
onSelect={onSelectImage}
allowedTypes={[‘image’]}
value={attributes.customImage}
render={({ open }) => (
<>
{!attributes.customImage && (
<p>
{__(‘Select an image from the media library’, ‘cat-image-block’)}
</p>
)}
<img
src = {attributes.customImage}
alt = {__(‘Custom Image’, ‘cat-image-block’)}
style = {{maxWidth: ‘100%’}}
/>
<button onClick={open} className=”button”>
{__(‘Choose Image’, ‘cat-image-block’)}
</button>
</>
)}
/>
</PanelBody>
</InspectorControls>
{/* Custom Image Control */}
{/* Display the image as a background */}
<div style={divStyle}></div>
</div>
);
}
Render.php
<?php
/**
* @see
*/
?>
<p <?php echo get_block_wrapper_attributes(); ?>>
<?php esc_html_e( ‘Cat Image Block – hello from a dynamic block!’, ‘cat-image-block’ ); ?>
</p>
I think the changes i need are in Render.php, but I have also come across references to a save function that i think needs to be in index.js. Just not sure where to go with this.
Any help greatly appreciated. I know there is already an image block, but my intention is build this out and add a category selector to show an image panel for the selected category
​
[ad_2]