Зображення в кастомному блоці Gutenberg з можливістю редагування
03.12.2022 | Написав eugenem
1. у block.json додаємо attributes:
"attributes": { ......................... "img": "/wp-content/plugins/theme-core/includes/assets/img/placeholder.png", "imgWidth": "584", "imgHeight": "676", ........................ }, |
Тут зразу додамо зображення по замовчуванню. Це може бути як плейсхолдер, так і потрібне згідно призначення нашого блока.
2. У edit.js імпортуємо компонент MediaUpload:
import { ................. MediaUpload, } from '@wordpress/block-editor'; |
Нижче в export додаємо функцію selectImage:
export default function Edit({ attributes, setAttributes }) { ................. function selectImage(value) { setAttributes({ imgUrl: value.sizes.full.url, img = value.sizes.full.url; imgWidth = value.sizes.full.width; imgHeight = value.sizes.full.height; }) } ................. |
нижче в блоке return виводимо наше зображення:
<MediaUpload onSelect={selectImage} render={ ({open}) => { return ( <button onClick={open}> <img src={ attributes.img } alt={ attributes.name } width={ attributes.imgWidth } height={ attributes.imgHeight } /> </button> ); }} /> |
Теперь по кліку на зображення буде відкриватися медіабібліотека, і ми зможемо замінювати зображення на наш розсуд.
Рубрика: Веброзробка
Коментарі читачів статті "Зображення в кастомному блоці Gutenberg з можливістю редагування"
Немає коментарів.