properly display in editor

This commit is contained in:
Ray Elliott 2022-07-20 09:42:05 +01:00
parent cc3c68254d
commit f2a2442063
4 changed files with 112 additions and 38 deletions

View File

@ -1,63 +1,66 @@
import { useSelect, dispatch } from '@wordpress/data'; import { useSelect, dispatch } from "@wordpress/data";
import {useState, createElement} from "@wordpress/element"; import { useState, createElement } from "@wordpress/element";
import { __ } from "@wordpress/i18n"; import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks, InspectorControls } from "@wordpress/block-editor"; import {
import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; useBlockProps,
import { getSaveElement, createBlock } from '@wordpress/blocks'; InnerBlocks,
InspectorControls,
} from "@wordpress/block-editor";
import { __experimentalNumberControl as NumberControl } from "@wordpress/components";
import { getSaveElement, createBlock } from "@wordpress/blocks";
import "./editor.scss"; import "./editor.scss";
import Orbiter from './orbiter.js'; import Orbiter from "./orbiter.js";
export default function Edit( { attributes, setAttributes, clientId }) { export default function Edit({ clientId }) {
const { innerBlocks } = useSelect(select => select('core/block-editor').getBlock(clientId)); const { innerBlocks } = useSelect((select) =>
select("core/block-editor").getBlock(clientId)
);
const [count, setCount] = useState(innerBlocks.length); const [count, setCount] = useState(innerBlocks.length);
const onCountChange = (value) => { const onCountChange = (value) => {
if (value > count) { if (value > count) {
const orbiter = createBlock('red-block/red-orbiter'); const orbiter = createBlock("red-block/red-orbiter");
const index = count; const index = count;
dispatch('core/editor').insertBlock(orbiter, index, clientId); dispatch("core/editor").insertBlock(orbiter, index, clientId);
} }
setCount(value); setCount(value);
} };
const viewList = innerBlocks.map(block => { const viewList = innerBlocks.map((block) => {
let primary = null; let primary = null;
let secondary = null; let secondary = null;
if(block.innerBlocks.length > 0) { if (block.innerBlocks.length > 0) {
const {name, attributes, innerBlocks} = block.innerBlocks[0]; const { name, attributes, innerBlocks } = block.innerBlocks[0];
const element = getSaveElement( name, attributes, innerBlocks ); const element = getSaveElement(name, attributes, innerBlocks);
primary = element; primary = element;
} }
if(block.innerBlocks.length > 1) { if (block.innerBlocks.length > 1) {
const {name, attributes, innerBlocks} = block.innerBlocks[1]; const { name, attributes, innerBlocks } = block.innerBlocks[1];
const element = getSaveElement( name, attributes, innerBlocks ); const element = getSaveElement(name, attributes, innerBlocks);
secondary = element; secondary = element;
} }
return ( return <Orbiter
<Orbiter primary={primary} secondary={secondary}/> primary={primary}
) secondary={secondary}
backgroundColor={block.attributes.backgroundColor}
/>;
}); });
return ( return (
<> <>
<InspectorControls> <InspectorControls>
<div> <div>
<NumberControl <NumberControl value={count} min={1} onChange={onCountChange} />
value={ count }
min={1}
onChange={ onCountChange }
/>
</div> </div>
</InspectorControls> </InspectorControls>
<div {...useBlockProps()}> <div {...useBlockProps()}>
<ul className={`orbiters count-${count}`}>{viewList}</ul>
<ul className={`orbiters clockwise count-${count}`}>{viewList}</ul>
<div className="inner-content"> <div className="inner-content">
<div className="image-hover"> <div className="image-hover">

View File

@ -5,4 +5,60 @@
*/ */
.wp-block-red-block-red-orbital { .wp-block-red-block-red-orbital {
.orbiter-bg {
position: absolute;
inset: 0;
border-radius: 50%;
}
.feature {
position: relative;
width: 100%;
height: 100%;
text-align: center;
figure {
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 75%;
height: 75%;
object-fit: contain;
}
& > * {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
transition: opacity var(--duration__feature-hover);
&:nth-child(1) {
opacity: 1;
}
&:nth-child(2) {
opacity: 0;
}
}
&:hover {
& > * {
&:first-child {
opacity: 0;
}
&:last-child {
opacity: 1;
}
}
}
}
} }

View File

@ -1,7 +1,13 @@
export default function Orbital({ primary, secondary }) { export default function Orbiter({ primary, secondary, backgroundColor }) {
return ( return (
<li className="orbital bg bg--red pulse"> <li className="orbiter">
<div className="orbital-content content-center anti-clockwise"> <div
className="orbiter-bg"
style={{
backgroundColor: backgroundColor,
}}
/>
<div className="orbiter-content content-center">
<div className="feature"> <div className="feature">
<div className="feature-item primary">{primary}</div> <div className="feature-item primary">{primary}</div>
<div className="feature-item secondary">{secondary}</div> <div className="feature-item secondary">{secondary}</div>

View File

@ -7,7 +7,7 @@
.wp-block-red-block-red-orbital { .wp-block-red-block-red-orbital {
--width__inner-content: 11em; --width__inner-content: 11em;
--width__orbital: 7.5em; --width__orbiter: 7.5em;
--radius: 14em; --radius: 14em;
@ -215,18 +215,27 @@
.clockwise { .clockwise {
animation: rotate var(--duration__rotation) linear infinite running; animation: rotate var(--duration__rotation) linear infinite running;
.orbiter-content {
animation: rotate var(--duration__rotation) reverse linear infinite running;
}
} }
// TOOD set this with block variant
.anti-clockwise { .anti-clockwise {
animation: rotate var(--duration__rotation) reverse linear infinite running; animation: rotate var(--duration__rotation) reverse linear infinite running;
.orbiter-content {
animation: rotate var(--duration__rotation) linear infinite running;
}
} }
@keyframes rotate { @keyframes rotate {
from { from {
transform: rotate(0); transform: rotate(0);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
} }