add orbiters programatically
This commit is contained in:
parent
9ec3321850
commit
cc3c68254d
17
src/edit.js
17
src/edit.js
|
@ -1,20 +1,25 @@
|
||||||
import { useSelect } 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 { useBlockProps, InnerBlocks, InspectorControls } from "@wordpress/block-editor";
|
||||||
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
|
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
|
||||||
import { getSaveElement } from '@wordpress/blocks';
|
import { getSaveElement, createBlock } from '@wordpress/blocks';
|
||||||
|
|
||||||
import "./editor.scss";
|
import "./editor.scss";
|
||||||
|
|
||||||
import Orbital from './orbital.js';
|
import Orbiter from './orbiter.js';
|
||||||
|
|
||||||
export default function Edit( { attributes, setAttributes, clientId }) {
|
export default function Edit( { attributes, setAttributes, 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(attributes.primaries.length);
|
const [count, setCount] = useState(innerBlocks.length);
|
||||||
|
|
||||||
const onCountChange = (value) => {
|
const onCountChange = (value) => {
|
||||||
|
if (value > count) {
|
||||||
|
const orbiter = createBlock('red-block/red-orbiter');
|
||||||
|
const index = count;
|
||||||
|
dispatch('core/editor').insertBlock(orbiter, index, clientId);
|
||||||
|
}
|
||||||
setCount(value);
|
setCount(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,7 +40,7 @@ export default function Edit( { attributes, setAttributes, clientId }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Orbital primary={primary} secondary={secondary}/>
|
<Orbiter primary={primary} secondary={secondary}/>
|
||||||
)
|
)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -52,7 +57,7 @@ export default function Edit( { attributes, setAttributes, clientId }) {
|
||||||
</InspectorControls>
|
</InspectorControls>
|
||||||
<div {...useBlockProps()}>
|
<div {...useBlockProps()}>
|
||||||
|
|
||||||
<ul className={`orbitals clockwise 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">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
export default function Orbital({ primary, secondary }) {
|
export default function Orbiter({ primary, secondary }) {
|
||||||
return (
|
return (
|
||||||
<li className="orbital bg bg--red pulse">
|
<li className="orbiter bg bg--red pulse">
|
||||||
<div className="orbital-content content-center anti-clockwise">
|
<div className="orbiter-content content-center anti-clockwise">
|
||||||
<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>
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
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">{primary}</div>
|
||||||
|
<div className="feature-item secondary">{secondary}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
|
@ -23,11 +23,13 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
|
||||||
* @return {WPElement} Element to render.
|
* @return {WPElement} Element to render.
|
||||||
*/
|
*/
|
||||||
export default function save({ attributes }) {
|
export default function save({ attributes }) {
|
||||||
const blockProps = useBlockProps.save();
|
const blockProps = useBlockProps.save({
|
||||||
|
className: "pulse",
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...blockProps}>
|
<div {...blockProps}>
|
||||||
<ul className={`orbitals clockwise count-${attributes.primaries.length}`}>
|
<ul className={`orbiters clockwise count-${attributes.primaries.length}`}>
|
||||||
<InnerBlocks.Content />
|
<InnerBlocks.Content />
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
194
src/style.scss
194
src/style.scss
|
@ -12,9 +12,7 @@
|
||||||
--radius: 14em;
|
--radius: 14em;
|
||||||
|
|
||||||
--duration__rotation: 50s;
|
--duration__rotation: 50s;
|
||||||
--duration__pulse: 1.5s;
|
|
||||||
--duration__image-hover: 0.3s;
|
--duration__image-hover: 0.3s;
|
||||||
--duration__feature-hover: 0.3s;
|
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
|
@ -34,11 +32,11 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.orbitals {
|
.orbiters {
|
||||||
--count__orbitals: 4;
|
--count__orbiters: 4;
|
||||||
@for $i from 1 through 12 {
|
@for $i from 1 through 12 {
|
||||||
&.count-#{$i} {
|
&.count-#{$i} {
|
||||||
--count__orbitals: #{$i};
|
--count__orbiters: #{$i};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -49,10 +47,10 @@
|
||||||
top: 50%;
|
top: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.orbital {
|
.orbiter {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: var(--width__orbital);
|
width: var(--width__orbiter);
|
||||||
height: var(--width__orbital);
|
height: var(--width__orbiter);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
@ -62,9 +60,9 @@
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.orbital {
|
.orbiter {
|
||||||
/* --angle must be in radians so multiply by 2 * pi */
|
/* --angle must be in radians so multiply by 2 * pi */
|
||||||
--angle: calc(6.2831853036 * var(--index) / var(--count__orbitals));
|
--angle: calc(6.2831853036 * var(--index) / var(--count__orbiters));
|
||||||
|
|
||||||
/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
|
/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
|
||||||
--sin-term1: var(--angle);
|
--sin-term1: var(--angle);
|
||||||
|
@ -160,7 +158,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.orbital-content {
|
.orbiter-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -188,14 +186,14 @@
|
||||||
inset: 0;
|
inset: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
||||||
&:last-child {
|
&:nth-child(2) {
|
||||||
transition: opacity var(--duration__image-hover);
|
transition: opacity var(--duration__image-hover);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover > .img {
|
&:hover > .img {
|
||||||
&:last-child {
|
&:nth-child(2) {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -208,106 +206,13 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg {
|
.orbiters:hover {
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
transition: background-color var(--duration__feature-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg--red {
|
|
||||||
&::before {
|
|
||||||
background-color: rgba(255, 200, 200);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
background-color: rgba(255, 150, 150);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg--green {
|
|
||||||
&::before {
|
|
||||||
background-color: rgba(200, 255, 200);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
background-color: rgba(150, 255, 150);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg--blue {
|
|
||||||
&::before {
|
|
||||||
background-color: rgba(200, 200, 255);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
|
||||||
background-color: rgba(150, 150, 255);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
& > *[class*=' wp-block-'],
|
|
||||||
& > *[class^='wp-block-'],
|
|
||||||
& > .feature-item {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
transition: opacity var(--duration__feature-hover);
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
& > *[class*=' wp-block-'],
|
|
||||||
& > *[class^='wp-block-'],
|
|
||||||
& > .feature-item {
|
|
||||||
&:first-child {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.orbitals:hover {
|
|
||||||
&.clockwise,
|
&.clockwise,
|
||||||
& .anti-clockwise {
|
& .anti-clockwise {
|
||||||
animation-play-state: paused;
|
animation-play-state: paused;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.orbital.pulse:hover {
|
|
||||||
&::before {
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.clockwise {
|
.clockwise {
|
||||||
animation: rotate var(--duration__rotation) linear infinite running;
|
animation: rotate var(--duration__rotation) linear infinite running;
|
||||||
}
|
}
|
||||||
|
@ -316,55 +221,6 @@
|
||||||
animation: rotate var(--duration__rotation) reverse linear infinite running;
|
animation: rotate var(--duration__rotation) reverse linear infinite running;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pulse {
|
|
||||||
&::before {
|
|
||||||
animation: pulse var(--duration__pulse) alternate ease-in-out infinite
|
|
||||||
running;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2) {
|
|
||||||
&::before {
|
|
||||||
animation-delay: 2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(3) {
|
|
||||||
&::before {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(4) {
|
|
||||||
&::before {
|
|
||||||
animation-delay: 1.5s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(5) {
|
|
||||||
&::before {
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(6) {
|
|
||||||
&::before {
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(7) {
|
|
||||||
&::before {
|
|
||||||
animation-delay: 1.1s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(8) {
|
|
||||||
&::before {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
@keyframes rotate {
|
||||||
from {
|
from {
|
||||||
transform: rotate(0);
|
transform: rotate(0);
|
||||||
|
@ -373,30 +229,4 @@
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
from {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.wp-admin .wp-block-red-block-red-orbital {
|
|
||||||
.clockwise {
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anti-clockwise {
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pulse {
|
|
||||||
&::before {
|
|
||||||
animation: rotate var(--duration__rotation) reverse linear infinite
|
|
||||||
running;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue