From cc3c68254da7eb16a189d7c19c2316bd90f62965 Mon Sep 17 00:00:00 2001 From: ray Date: Tue, 19 Jul 2022 11:13:49 +0100 Subject: [PATCH] add orbiters programatically --- src/edit.js | 17 +++-- src/orbital.js | 6 +- src/orbiter.js | 12 +++ src/save.js | 6 +- src/style.scss | 194 +++---------------------------------------------- 5 files changed, 42 insertions(+), 193 deletions(-) create mode 100644 src/orbiter.js diff --git a/src/edit.js b/src/edit.js index 9dba04e..2d9ebff 100644 --- a/src/edit.js +++ b/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 { __ } from "@wordpress/i18n"; import { useBlockProps, InnerBlocks, InspectorControls } from "@wordpress/block-editor"; import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; -import { getSaveElement } from '@wordpress/blocks'; +import { getSaveElement, createBlock } from '@wordpress/blocks'; import "./editor.scss"; -import Orbital from './orbital.js'; +import Orbiter from './orbiter.js'; export default function Edit( { attributes, setAttributes, 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) => { + if (value > count) { + const orbiter = createBlock('red-block/red-orbiter'); + const index = count; + dispatch('core/editor').insertBlock(orbiter, index, clientId); + } setCount(value); } @@ -35,7 +40,7 @@ export default function Edit( { attributes, setAttributes, clientId }) { } return ( - + ) }); @@ -52,7 +57,7 @@ export default function Edit( { attributes, setAttributes, clientId }) {
-
    {viewList}
+
    {viewList}
diff --git a/src/orbital.js b/src/orbital.js index 8a2a873..b55fe89 100644 --- a/src/orbital.js +++ b/src/orbital.js @@ -1,7 +1,7 @@ -export default function Orbital({ primary, secondary }) { +export default function Orbiter({ primary, secondary }) { return ( -
  • -
    +
  • +
    {primary}
    {secondary}
    diff --git a/src/orbiter.js b/src/orbiter.js new file mode 100644 index 0000000..8a2a873 --- /dev/null +++ b/src/orbiter.js @@ -0,0 +1,12 @@ +export default function Orbital({ primary, secondary }) { + return ( +
  • +
    +
    +
    {primary}
    +
    {secondary}
    +
    +
    +
    • + ); +} diff --git a/src/save.js b/src/save.js index 2a60f5a..6c58741 100644 --- a/src/save.js +++ b/src/save.js @@ -23,11 +23,13 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; * @return {WPElement} Element to render. */ export default function save({ attributes }) { - const blockProps = useBlockProps.save(); + const blockProps = useBlockProps.save({ + className: "pulse", + }); return (
    -
      +
      diff --git a/src/style.scss b/src/style.scss index 47eefc8..61d42af 100644 --- a/src/style.scss +++ b/src/style.scss @@ -12,9 +12,7 @@ --radius: 14em; --duration__rotation: 50s; - --duration__pulse: 1.5s; --duration__image-hover: 0.3s; - --duration__feature-hover: 0.3s; position: relative; width: 80vw; @@ -34,11 +32,11 @@ list-style: none; } - .orbitals { - --count__orbitals: 4; + .orbiters { + --count__orbiters: 4; @for $i from 1 through 12 { &.count-#{$i} { - --count__orbitals: #{$i}; + --count__orbiters: #{$i}; } } @@ -49,10 +47,10 @@ top: 50%; } - .orbital { + .orbiter { position: absolute; - width: var(--width__orbital); - height: var(--width__orbital); + width: var(--width__orbiter); + height: var(--width__orbiter); border-radius: 50%; left: 50%; top: 50%; @@ -62,9 +60,9 @@ ); } - .orbital { + .orbiter { /* --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 */ --sin-term1: var(--angle); @@ -160,7 +158,7 @@ } } - .orbital-content { + .orbiter-content { width: 100%; height: 100%; } @@ -188,14 +186,14 @@ inset: 0; object-fit: cover; - &:last-child { + &:nth-child(2) { transition: opacity var(--duration__image-hover); opacity: 0; } } &:hover > .img { - &:last-child { + &:nth-child(2) { opacity: 1; } } @@ -208,106 +206,13 @@ align-items: center; } - .bg { - &::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 { + .orbiters:hover { &.clockwise, & .anti-clockwise { animation-play-state: paused; } } - .orbital.pulse:hover { - &::before { - animation-play-state: paused; - } - } - .clockwise { animation: rotate var(--duration__rotation) linear infinite running; } @@ -316,55 +221,6 @@ 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 { from { transform: rotate(0); @@ -373,30 +229,4 @@ 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; - } - } }