rayelliott
/
wp-red-orbital
1
0
Fork 0
Code Issues Pull Requests Projects 2 Releases Wiki Activity

use inner blocks as orbital content

This commit is contained in:
Ray Elliott 2022-07-18 21:41:28 +01:00
parent 021cdda7a3
commit 9ec3321850
4 changed files with 62 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/edit.js
View File

@ -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 (
<Orbital img={primary.url} />
<Orbital primary={primary} secondary={secondary}/>
)
});
@ -48,9 +52,7 @@ export default function Edit( { attributes, setAttributes }) {
</InspectorControls>
<div {...useBlockProps()}>
<ul className="orbitals clockwise">
{primaryList}
</ul>
<ul className={`orbitals clockwise count-${count}`}>{viewList}</ul>
<div className="inner-content">
<div className="image-hover">
@ -65,6 +67,10 @@ export default function Edit( { attributes, setAttributes }) {
</div>
</div>
</div>
<div class="block-list">
<InnerBlocks />
</div>
</>
);
}

10
src/orbital.js
View File

@ -1,14 +1,10 @@
export default function Orbital({ img }) {
export default function Orbital({ primary, secondary }) {
return (
<li className="orbital bg bg--red pulse">
<div className="orbital-content content-center anti-clockwise">
<div className="feature">
<div className="feature-item primary">
<img className="img" src={img} />
</div>
<div className="feature-item secondary">
<p>Hallo!</p>
</div>
<div className="feature-item primary">{primary}</div>
<div className="feature-item secondary">{secondary}</div>
</div>
</div>
</li>

42
src/save.js
View File

@ -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 (
<Orbital img={primary.url} />
)
});
return (
<div {...blockProps}>
<div {...blockProps}>
<ul className={`orbitals clockwise count-${attributes.primaries.length}`}>
<InnerBlocks.Content />
</ul>
<ul className="orbitals clockwise">
{primaryList}
</ul>
<div className="inner-content">
<div className="image-hover">
<img
className="img"
src="https://via.placeholder.com/256x256/999/333"
/>
<img
className="img"
src="https://via.placeholder.com/256x256/666/ccc"
/>
</div>
<div className="inner-content">
<div className="image-hover">
<img
className="img"
src="https://via.placeholder.com/256x256/999/333"
/>
<img
className="img"
src="https://via.placeholder.com/256x256/666/ccc"
/>
</div>
</div>
</div>
);
}

13
src/style.scss
View File

@ -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;