ImageSizeControl в WordPress предоставляет мощный инструмент для управления размерами изображений в вашем проекте. Этот компонент позволяет легко изменить его размеры, что удобно для задач, требующих альтернативных вариантов размеров изображения. Благодаря гибкости ImageSizeControl, разработчики могут создавать более настраиваемые и отзывчивые блоки в редакторе WordPress.
Давайте разберемся, как использовать ImageSizeControl в блоках WordPress. Ниже приведен пример, который демонстрирует создание блочного компонента, использующего возможности этого элемента для изменения размеров изображений.
Создание блочного компонента
Для начала необходимо зарегистрировать новый блок, который будет использовать ImageSizeControl. Создадим блок с привлечением API для автоматического управления изображениями:
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
__experimentalImageSizeControl as ImageSizeControl
} from '@wordpress/block-editor';
//styles that make it look good in the editor
import './editor.scss';
const BLOCKNAME = "image-size-control";
const BLOCKPATH = `wp-gb/${BLOCKNAME}`;
registerBlockType( BLOCKPATH, {
apiVersion: 2,
title: __( BLOCKNAME.replace("-", " ").toUpperCase(), 'wp-gb' ),
description: __( 'The description' ),
category: 'wp-gb',
icon: 'smiley',
attributes: {
imageWidth: {
type: "number",
default: 200
},
imageHeight: {
type: "number",
default: 200
},
dimensionWidth: {
type: "number",
default: 200
},
dimensionHeight: {
type: "number",
default: 200
},
},
edit: ( {attributes, setAttributes} ) => {
return (
<div { ...useBlockProps() }>
<ImageSizeControl
width={ attributes.dimensionWidth }
height={ attributes.dimensionHeight }
imageWidth={ attributes.imageWidth }
imageHeight={ attributes.imageHeight }
imageSizeOptions={ [
{ value: '{"width":"200","height":"200"}', label: '200/200' },
{ value: '{"width":"100","height":"300"}', label: '100/300' },
{ value: '{"width":"400","height":"800"}', label: '400/800' },
] }
slug={ JSON.stringify({
width: attributes.imageWidth.toString(),
height: attributes.imageHeight.toString()
}) }
onChange={ (dimensionSizes) => setAttributes({
dimensionWidth: dimensionSizes.width ?? attributes.dimensionWidth,
dimensionHeight: dimensionSizes.height ?? attributes.dimensionHeight
}) }
onChangeImage={ (imageSizes) => setAttributes({
imageWidth: parseFloat(JSON.parse(imageSizes).width),
imageHeight: parseFloat(JSON.parse(imageSizes).height),
dimensionWidth: parseFloat(JSON.parse(imageSizes).width),
dimensionHeight: parseFloat(JSON.parse(imageSizes).height)
}) }
/>
</div>
)
},
} );Заключение
ImageSizeControl предоставляет возможность гибкого управления размерами изображений в блоках WordPress, что позволяет разработчикам более тщательно адаптировать и стилизовать объекты под нужды сайта или пользователя. Этот компонент широко используется в проектах, требующих динамическую регулировку изображения относительно различных требований.
