properly display in editor
This commit is contained in:
parent
cc3c68254d
commit
f2a2442063
59
src/edit.js
59
src/edit.js
|
@ -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">
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue