49 lines
1.1 KiB
JavaScript
49 lines
1.1 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
|
|
import {
|
|
useBlockProps,
|
|
InnerBlocks,
|
|
InspectorControls,
|
|
} from "@wordpress/block-editor";
|
|
import { useSelect } from "@wordpress/data";
|
|
import { ColorPicker } from "@wordpress/components";
|
|
|
|
import "./editor.scss";
|
|
|
|
const InnerBlocksWithLimit = ({ clientId, limit = 2, ...rest }) => {
|
|
const { blockCount } = useSelect((select) => ({
|
|
blockCount: select("core/block-editor").getBlockCount(clientId),
|
|
}));
|
|
|
|
const blockAppender = () => {
|
|
return blockCount < limit ? <InnerBlocks.DefaultBlockAppender /> : false;
|
|
};
|
|
|
|
return <InnerBlocks renderAppender={() => blockAppender()} {...rest} />;
|
|
};
|
|
|
|
export default function Edit({ attributes, setAttributes, clientId }) {
|
|
return (
|
|
<>
|
|
<InspectorControls>
|
|
<ColorPicker
|
|
color={attributes.backgroundColor}
|
|
onChange={(color) => setAttributes({ backgroundColor: color })}
|
|
enableAlpha
|
|
defaultValue="#000"
|
|
/>
|
|
</InspectorControls>
|
|
|
|
<div
|
|
{...useBlockProps({
|
|
style: {
|
|
backgroundColor: attributes.backgroundColor,
|
|
},
|
|
})}
|
|
>
|
|
<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|