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 {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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue