Hi I have been working on a block that displays a selected category with an image. I have the editor side working, in that i can select a category and image. However I cannot work out how to use the save function to display this to the front end
My return part of the edit function along wits some attributes i am setting are as follows
const setWidth = (newWidth => {
setAttributes({width: newWidth})
})
const setHeight = (newHeight => {
setAttributes({height: newHeight})
})
const cardProps = useBlockProps({
style: {
width: attributes.width,
height: attributes.height,
backgroundColor: “transparent”,
backgroundImage: `url(${selectedImage})`,
backgroundRepeat: ‘no-repeat’,
backgroundSize: ‘cover’,
}
})
Return (
<InspectorControls> … </>
<Card {…cardProps} >
<a href=””>
<CardBody >
</CardBody>
<CardFooter>
</CardFooter>
</a>
</Card>
</>
);
The save function I have been trying is as follows.
import { useBlockProps } from ‘@wordpress/block-editor’;
import { Card, CardBody, CardFooter} from ‘@wordpress/components’;
/**
* The save function defines the way in which the different attributes should
* be combined into the final markup, which is then serialized by the block
* editor into `post_content`.
*
* @see
*
* @return {Element} Element to render.
*/
export default function save( {attributes}) {
const {selectedCategory, selectedImage, categoryURL} = attributes
const blockProps = useBlockProps.save()
const cardProps = useBlockProps.save({
style: {
width: attributes.width,
height: attributes.height,
backgroundColor: “red”,
backgroundImage: `url(${selectedImage})`,
backgroundRepeat: ‘no-repeat’,
backgroundSize: ‘cover’,
}
})
return (
<Card {…cardProps}>
<a href=””>
<CardBody >
</CardBody>
<CardFooter>
</CardFooter>
</a>
</Card>
);
}
When I use this however it just seems to mess up the edit section, in that it wont even render.
Can someone please help me figure out what is going on. All I want to do is render the card block from as displayed in the edit section to the front end.
Thanks
[ad_2]