use inner blocks as orbital content
This commit is contained in:
parent
021cdda7a3
commit
9ec3321850
56
src/edit.js
56
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 { __ } 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 { __experimentalNumberControl as NumberControl } from '@wordpress/components';
|
||||||
|
import { getSaveElement } from '@wordpress/blocks';
|
||||||
import Orbital from "./orbital.js";
|
|
||||||
|
|
||||||
import "./editor.scss";
|
import "./editor.scss";
|
||||||
|
|
||||||
export default function Edit( { attributes, setAttributes }) {
|
import Orbital from './orbital.js';
|
||||||
const [discardedPrimaries, setDiscardedPrimaries] = useState([]);
|
|
||||||
|
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 [count, setCount] = useState(attributes.primaries.length);
|
||||||
|
|
||||||
const onCountChange = (value) => {
|
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);
|
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 (
|
return (
|
||||||
<Orbital img={primary.url} />
|
<Orbital primary={primary} secondary={secondary}/>
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -48,9 +52,7 @@ export default function Edit( { attributes, setAttributes }) {
|
||||||
</InspectorControls>
|
</InspectorControls>
|
||||||
<div {...useBlockProps()}>
|
<div {...useBlockProps()}>
|
||||||
|
|
||||||
<ul className="orbitals clockwise">
|
<ul className={`orbitals clockwise count-${count}`}>{viewList}</ul>
|
||||||
{primaryList}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className="inner-content">
|
<div className="inner-content">
|
||||||
<div className="image-hover">
|
<div className="image-hover">
|
||||||
|
@ -65,6 +67,10 @@ export default function Edit( { attributes, setAttributes }) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="block-list">
|
||||||
|
<InnerBlocks />
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,10 @@
|
||||||
export default function Orbital({ img }) {
|
export default function Orbital({ primary, secondary }) {
|
||||||
return (
|
return (
|
||||||
<li className="orbital bg bg--red pulse">
|
<li className="orbital bg bg--red pulse">
|
||||||
<div className="orbital-content content-center anti-clockwise">
|
<div className="orbital-content content-center anti-clockwise">
|
||||||
<div className="feature">
|
<div className="feature">
|
||||||
<div className="feature-item primary">
|
<div className="feature-item primary">{primary}</div>
|
||||||
<img className="img" src={img} />
|
<div className="feature-item secondary">{secondary}</div>
|
||||||
</div>
|
|
||||||
<div className="feature-item secondary">
|
|
||||||
<p>Hallo!</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
16
src/save.js
16
src/save.js
|
@ -11,8 +11,7 @@ import { __ } from "@wordpress/i18n";
|
||||||
*
|
*
|
||||||
* @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
|
* @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";
|
||||||
import Orbital from "./orbital.js";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The save function defines the way in which the different attributes should
|
* The save function defines the way in which the different attributes should
|
||||||
|
@ -23,20 +22,13 @@ import Orbital from "./orbital.js";
|
||||||
*
|
*
|
||||||
* @return {WPElement} Element to render.
|
* @return {WPElement} Element to render.
|
||||||
*/
|
*/
|
||||||
export default function save( {attributes} ) {
|
export default function save({ attributes }) {
|
||||||
const blockProps = useBlockProps.save();
|
const blockProps = useBlockProps.save();
|
||||||
|
|
||||||
const primaryList = attributes.primaries.map((primary) => {
|
|
||||||
return (
|
|
||||||
<Orbital img={primary.url} />
|
|
||||||
)
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...blockProps}>
|
<div {...blockProps}>
|
||||||
|
<ul className={`orbitals clockwise count-${attributes.primaries.length}`}>
|
||||||
<ul className="orbitals clockwise">
|
<InnerBlocks.Content />
|
||||||
{primaryList}
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div className="inner-content">
|
<div className="inner-content">
|
||||||
|
|
|
@ -6,8 +6,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.wp-block-red-block-red-orbital {
|
.wp-block-red-block-red-orbital {
|
||||||
--count__orbitals: 8;
|
|
||||||
|
|
||||||
--width__inner-content: 11em;
|
--width__inner-content: 11em;
|
||||||
--width__orbital: 7.5em;
|
--width__orbital: 7.5em;
|
||||||
|
|
||||||
|
@ -37,6 +35,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.orbitals {
|
.orbitals {
|
||||||
|
--count__orbitals: 4;
|
||||||
|
@for $i from 1 through 12 {
|
||||||
|
&.count-#{$i} {
|
||||||
|
--count__orbitals: #{$i};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
@ -254,6 +259,8 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
& > *[class*=' wp-block-'],
|
||||||
|
& > *[class^='wp-block-'],
|
||||||
& > .feature-item {
|
& > .feature-item {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
@ -274,6 +281,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
& > *[class*=' wp-block-'],
|
||||||
|
& > *[class^='wp-block-'],
|
||||||
& > .feature-item {
|
& > .feature-item {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
Loading…
Reference in New Issue