diff --git a/src/edit.js b/src/edit.js index ebd1012..5297142 100644 --- a/src/edit.js +++ b/src/edit.js @@ -1,31 +1,29 @@ 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 https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps - */ -import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; +import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; import { ColorPicker } from '@wordpress/components'; -/** - * 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 https://www.npmjs.com/package/@wordpress/scripts#using-css - */ 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 https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit - * - * @return {WPElement} Element to render. - */ -export default function Edit({ attributes, setAttributes }) { +const InnerBlocksWithLimit = ( {clientId, limit=2, ...rest} ) => { + const { blockCount } = useSelect(select => ({ + blockCount: select('core/block-editor').getBlockCount(clientId) + })) + + const blockAppender = () => { + return blockCount < limit ? () : false; + } + + return ( + blockAppender() } + {...rest} + /> + ) +} + +export default function Edit({ attributes, setAttributes, clientId }) { return ( <> @@ -47,12 +45,7 @@ export default function Edit({ attributes, setAttributes }) { }) }>
-
- -
-
-

Hallo!

-
+
diff --git a/src/editor.scss b/src/editor.scss index f8ebf5c..ce7ca19 100644 --- a/src/editor.scss +++ b/src/editor.scss @@ -31,12 +31,19 @@ color: #555; } - .feature { + .block-editor-inner-blocks > .block-editor-block-list__layout { display: flex; align-items: center; - } - .feature-item { - margin: 16px; + > * { + max-height: 120px; + margin: 16px; + } + + img { + max-height: 120px; + width: auto; + max-width: 240px; + } } } diff --git a/src/save.js b/src/save.js index ba81eeb..d94dfd8 100644 --- a/src/save.js +++ b/src/save.js @@ -3,7 +3,7 @@ * * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/ */ -import { __ } from '@wordpress/i18n'; +import { __ } from "@wordpress/i18n"; /** * React hook that is used to mark the block wrapper element. @@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n'; * * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps */ -import { useBlockProps } from '@wordpress/block-editor'; +import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; /** * The save function defines the way in which the different attributes should @@ -22,13 +22,21 @@ import { useBlockProps } from '@wordpress/block-editor'; * * @return {WPElement} Element to render. */ -export default function save() { +export default function save({ attributes }) { return ( -

- { __( - 'Red Orbital Orbiter – hello from the saved content!', - 'red-orbiter' - ) } -

+
  • +
    +
    + +
    +
    +
  • ); }