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

View File

@ -5,4 +5,60 @@
*/
.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 (
<li className="orbital bg bg--red pulse">
<div className="orbital-content content-center anti-clockwise">
<li className="orbiter">
<div
className="orbiter-bg"
style={{
backgroundColor: backgroundColor,
}}
/>
<div className="orbiter-content content-center">
<div className="feature">
<div className="feature-item primary">{primary}</div>
<div className="feature-item secondary">{secondary}</div>

View File

@ -7,7 +7,7 @@
.wp-block-red-block-red-orbital {
--width__inner-content: 11em;
--width__orbital: 7.5em;
--width__orbiter: 7.5em;
--radius: 14em;
@ -215,18 +215,27 @@
.clockwise {
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 {
animation: rotate var(--duration__rotation) reverse linear infinite running;
.orbiter-content {
animation: rotate var(--duration__rotation) linear infinite running;
}
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
}