diff --git a/src/edit.js b/src/edit.js index 743e72a..9dba04e 100644 --- a/src/edit.js +++ b/src/edit.js @@ -1,37 +1,41 @@ -import {useState} from "@wordpress/element"; +import { useSelect } from '@wordpress/data'; +import {useState, createElement} from "@wordpress/element"; import { __ } from "@wordpress/i18n"; -import { useBlockProps, InspectorControls } from "@wordpress/block-editor"; +import { useBlockProps, InnerBlocks, InspectorControls } from "@wordpress/block-editor"; import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; - -import Orbital from "./orbital.js"; +import { getSaveElement } from '@wordpress/blocks'; import "./editor.scss"; -export default function Edit( { attributes, setAttributes }) { - const [discardedPrimaries, setDiscardedPrimaries] = useState([]); +import Orbital from './orbital.js'; + +export default function Edit( { attributes, setAttributes, clientId }) { + const { innerBlocks } = useSelect(select => select('core/block-editor').getBlock(clientId)); + const [count, setCount] = useState(attributes.primaries.length); const onCountChange = (value) => { - if (value > attributes.primaries.length) { - const newPrimary = discardedPrimaries.length < 1 ? - { url: "https://via.placeholder.com/64x64" } : - discardedPrimaries.pop(); - const newPrimaries = attributes.primaries.concat([newPrimary]); - setAttributes({ primaries: newPrimaries }); - } - - if (value < attributes.primaries.length) { - const newPrimaries = attributes.primaries; - setDiscardedPrimaries(discardedPrimaries.concat([newPrimaries.pop()])); - setAttributes({ primaries: newPrimaries }); - } - setCount(value); } - const primaryList = attributes.primaries.map((primary) => { + const viewList = innerBlocks.map(block => { + let primary = null; + let secondary = null; + + if(block.innerBlocks.length > 0) { + const {name, attributes, innerBlocks} = block.innerBlocks[0]; + const element = getSaveElement( name, attributes, innerBlocks ); + primary = element; + } + + if(block.innerBlocks.length > 1) { + const {name, attributes, innerBlocks} = block.innerBlocks[1]; + const element = getSaveElement( name, attributes, innerBlocks ); + secondary = element; + } + return ( - + ) }); @@ -48,9 +52,7 @@ export default function Edit( { attributes, setAttributes }) {
-
    - {primaryList} -
+
    {viewList}
@@ -65,6 +67,10 @@ export default function Edit( { attributes, setAttributes }) {
+ +
+ +
); } diff --git a/src/orbital.js b/src/orbital.js index c185df9..8a2a873 100644 --- a/src/orbital.js +++ b/src/orbital.js @@ -1,14 +1,10 @@ -export default function Orbital({ img }) { +export default function Orbital({ primary, secondary }) { return (
  • -
    - -
    -
    -

    Hallo!

    -
    +
    {primary}
    +
    {secondary}
  • diff --git a/src/save.js b/src/save.js index df6e13f..2a60f5a 100644 --- a/src/save.js +++ b/src/save.js @@ -11,8 +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 Orbital from "./orbital.js"; +import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; /** * The save function defines the way in which the different attributes should @@ -23,34 +22,27 @@ import Orbital from "./orbital.js"; * * @return {WPElement} Element to render. */ -export default function save( {attributes} ) { +export default function save({ attributes }) { const blockProps = useBlockProps.save(); - const primaryList = attributes.primaries.map((primary) => { - return ( - - ) - }); - return ( -
    +
    +
      + +
    -
      - {primaryList} -
    - -
    -
    - - -
    +
    +
    + +
    +
    ); } diff --git a/src/style.scss b/src/style.scss index b17a0c6..47eefc8 100644 --- a/src/style.scss +++ b/src/style.scss @@ -6,8 +6,6 @@ */ .wp-block-red-block-red-orbital { - --count__orbitals: 8; - --width__inner-content: 11em; --width__orbital: 7.5em; @@ -37,6 +35,13 @@ } .orbitals { + --count__orbitals: 4; + @for $i from 1 through 12 { + &.count-#{$i} { + --count__orbitals: #{$i}; + } + } + position: relative; width: 0; height: 0; @@ -254,6 +259,8 @@ height: 100%; text-align: center; + & > *[class*=' wp-block-'], + & > *[class^='wp-block-'], & > .feature-item { position: absolute; inset: 0; @@ -274,6 +281,8 @@ } &:hover { + & > *[class*=' wp-block-'], + & > *[class^='wp-block-'], & > .feature-item { &:first-child { opacity: 0;