rayelliott
/
wp-red-orbital
1
0
Fork 0
Code Issues Pull Requests Projects 2 Releases Wiki Activity

formatting

This commit is contained in:
Ray Elliott 2022-07-25 19:33:43 +01:00
parent 786f94cfb9
commit 23bec4b3d9
8 changed files with 187 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/red-orbital/controls.js vendored
View File

@ -1,5 +1,5 @@
import { InspectorControls, MediaPlaceholder } from "@wordpress/block-editor"; import { InspectorControls, MediaPlaceholder } from '@wordpress/block-editor';
import { __ } from "@wordpress/i18n"; import { __ } from '@wordpress/i18n';
import { import {
__experimentalNumberControl as NumberControl, __experimentalNumberControl as NumberControl,
@ -8,30 +8,30 @@ import {
Panel, Panel,
PanelBody, PanelBody,
PanelRow, PanelRow,
} from "@wordpress/components"; } from '@wordpress/components';
export default function Controls({ export default function Controls( {
attributes, attributes,
setAttributes, setAttributes,
innerBlocks, innerBlocks,
onCountChange, onCountChange,
isAnimating, isAnimating,
setIsAnimating, setIsAnimating,
}) { } ) {
return ( return (
<InspectorControls key="setting"> <InspectorControls key="setting">
<div id="red-orbital-controls"> <div id="red-orbital-controls">
<Panel> <Panel>
<PanelBody title="Settings" initialOpen={true}> <PanelBody title="Settings" initialOpen={ true }>
<PanelRow> <PanelRow>
<legend className="blocks-base-control__label"> <legend className="blocks-base-control__label">
{__("Orbital count", "red-orbital")} { __( 'Orbital count', 'red-orbital' ) }
</legend> </legend>
<NumberControl <NumberControl
value={innerBlocks.length} value={ innerBlocks.length }
min={1} min={ 1 }
max={12} max={ 12 }
onChange={onCountChange} onChange={ onCountChange }
/> />
</PanelRow> </PanelRow>
@ -41,22 +41,27 @@ export default function Controls({
<PanelRow> <PanelRow>
<MediaPlaceholder <MediaPlaceholder
onSelect={(img) => { onSelect={ ( img ) => {
setAttributes({ imgUrl: img.url }); setAttributes( { imgUrl: img.url } );
}} } }
allowedTypes={["image"]} allowedTypes={ [ 'image' ] }
multiple={false} multiple={ false }
className="img-selector" className="img-selector"
mediaPreview={ mediaPreview={
attributes.imgUrl !== "" ? ( attributes.imgUrl !== '' ? (
<div> <div>
<img src={attributes.imgUrl} alt="" /> <img
src={ attributes.imgUrl }
alt=""
/>
<Button <Button
onClick={() => { onClick={ () => {
setAttributes({ imgUrl: "" }); setAttributes( {
}} imgUrl: '',
isSmall={true} } );
isDestructive={true} } }
isSmall={ true }
isDestructive={ true }
icon="dismiss" icon="dismiss"
label="Remove" label="Remove"
className="remove-img" className="remove-img"
@ -71,24 +76,29 @@ export default function Controls({
<PanelRow> <PanelRow>
<MediaPlaceholder <MediaPlaceholder
onSelect={(img) => { onSelect={ ( img ) => {
setAttributes({ imgUrlHover: img.url }); setAttributes( { imgUrlHover: img.url } );
}} } }
allowedTypes={["image"]} allowedTypes={ [ 'image' ] }
multiple={false} multiple={ false }
className="img-selector" className="img-selector"
mediaPreview={ mediaPreview={
attributes.imgUrlHover !== "" ? ( attributes.imgUrlHover !== '' ? (
<div> <div>
<img src={attributes.imgUrlHover} alt="" /> <img
src={ attributes.imgUrlHover }
alt=""
/>
<Button <Button
onClick={() => { onClick={ () => {
setAttributes({ imgUrlHover: "" }); setAttributes( {
}} imgUrlHover: '',
} );
} }
icon="dismiss" icon="dismiss"
label="Remove" label="Remove"
isSmall={true} isSmall={ true }
isDestructive={true} isDestructive={ true }
className="remove-img" className="remove-img"
/> />
</div> </div>
@ -101,14 +111,14 @@ export default function Controls({
</PanelBody> </PanelBody>
</Panel> </Panel>
<Panel> <Panel>
<PanelBody title="View Controls" initialOpen={true}> <PanelBody title="View Controls" initialOpen={ true }>
<PanelRow> <PanelRow>
<ToggleControl <ToggleControl
label="Play" label="Play"
checked={isAnimating} checked={ isAnimating }
onChange={() => { onChange={ () => {
setIsAnimating((state) => !state); setIsAnimating( ( state ) => ! state );
}} } }
/> />
</PanelRow> </PanelRow>
</PanelBody> </PanelBody>

123
src/red-orbital/edit.js
View File

@ -1,125 +1,130 @@
import { useSelect, dispatch } from "@wordpress/data"; import { useSelect, dispatch } from '@wordpress/data';
import { useState } from "@wordpress/element"; import { useState } from '@wordpress/element';
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { getSaveElement, createBlock } from "@wordpress/blocks"; import { getSaveElement, createBlock } from '@wordpress/blocks';
import "./editor.scss"; import './editor.scss';
import Controls from "./controls.js"; import Controls from './controls.js';
import Orbiter from "./orbiter.js"; import Orbiter from './orbiter.js';
export default function Edit({ attributes, setAttributes, clientId }) { export default function Edit( { attributes, setAttributes, clientId } ) {
const { innerBlocks } = useSelect((select) => const { innerBlocks } = useSelect( ( select ) =>
select("core/block-editor").getBlock(clientId) select( 'core/block-editor' ).getBlock( clientId )
); );
if (isNaN(parseInt(attributes.count, 10))) { if ( isNaN( parseInt( attributes.count, 10 ) ) ) {
setAttributes({ count: innerBlocks.length }); setAttributes( { count: innerBlocks.length } );
} }
const [removedBlocks, setRemovedBlocks] = useState([]); const [ removedBlocks, setRemovedBlocks ] = useState( [] );
const [isAnimating, setIsAnimating] = useState(false); const [ isAnimating, setIsAnimating ] = useState( false );
const animatingClass = " clockwise pulse"; const animatingClass = ' clockwise pulse';
const addBlock = () => { const addBlock = () => {
const index = innerBlocks.length - 1; const index = innerBlocks.length - 1;
let block; let block;
if (removedBlocks.length > 0) { if ( removedBlocks.length > 0 ) {
block = removedBlocks[removedBlocks.length - 1]; block = removedBlocks[ removedBlocks.length - 1 ];
setRemovedBlocks(removedBlocks.slice(0, -1)); setRemovedBlocks( removedBlocks.slice( 0, -1 ) );
} else { } else {
block = createBlock("red-block/red-orbiter"); block = createBlock( 'red-block/red-orbiter' );
} }
dispatch("core/block-editor").insertBlock(block, index, clientId, false); dispatch( 'core/block-editor' ).insertBlock(
setAttributes({ count: parseInt(attributes.count, 10) + 1 }); block,
index,
clientId,
false
);
setAttributes( { count: parseInt( attributes.count, 10 ) + 1 } );
}; };
const removeBlock = () => { const removeBlock = () => {
const index = innerBlocks.length - 1; const index = innerBlocks.length - 1;
const block = innerBlocks[index]; const block = innerBlocks[ index ];
dispatch("core/block-editor").removeBlock(block.clientId, false); dispatch( 'core/block-editor' ).removeBlock( block.clientId, false );
// append to removed blocks list // append to removed blocks list
const removedBlocksUpdate = removedBlocks; const removedBlocksUpdate = removedBlocks;
removedBlocksUpdate.push(block); removedBlocksUpdate.push( block );
setRemovedBlocks(removedBlocksUpdate); setRemovedBlocks( removedBlocksUpdate );
setAttributes({ count: parseInt(attributes.count, 10) - 1 }); setAttributes( { count: parseInt( attributes.count, 10 ) - 1 } );
}; };
const onCountChange = (value) => { const onCountChange = ( value ) => {
if (value > innerBlocks.length) { if ( value > innerBlocks.length ) {
addBlock(); addBlock();
} else if (value < innerBlocks.length) { } else if ( value < innerBlocks.length ) {
removeBlock(); removeBlock();
} }
}; };
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} primary={ primary }
secondary={secondary} secondary={ secondary }
backgroundColor={block.attributes.backgroundColor} backgroundColor={ block.attributes.backgroundColor }
/> />
); );
}); } );
return ( return (
<> <>
<Controls <Controls
setAttributes={setAttributes} setAttributes={ setAttributes }
attributes={attributes} attributes={ attributes }
innerBlocks={innerBlocks} innerBlocks={ innerBlocks }
onCountChange={onCountChange} onCountChange={ onCountChange }
isAnimating={isAnimating} isAnimating={ isAnimating }
setIsAnimating={setIsAnimating} setIsAnimating={ setIsAnimating }
/> />
<div {...useBlockProps()}> <div { ...useBlockProps() }>
<div className="orbital-view"> <div className="orbital-view">
<ul <ul
className={`orbiters count-${innerBlocks.length}${ className={ `orbiters count-${ innerBlocks.length }${
isAnimating ? animatingClass : "" isAnimating ? animatingClass : ''
}`} }` }
> >
{viewList} { viewList }
</ul> </ul>
<div className="inner-content"> <div className="inner-content">
<div className="image-hover"> <div className="image-hover">
{attributes.imgUrl !== "" ? ( { attributes.imgUrl !== '' ? (
<img src={attributes.imgUrl} /> <img src={ attributes.imgUrl } />
) : null} ) : null }
{attributes.imgUrlHover !== "" ? ( { attributes.imgUrlHover !== '' ? (
<img src={attributes.imgUrlHover} /> <img src={ attributes.imgUrlHover } />
) : null} ) : null }
</div> </div>
</div> </div>
</div> </div>
<div class="block-list"> <div class="block-list">
<InnerBlocks <InnerBlocks
renderAppender={false} renderAppender={ false }
allowedBlocks={["red-block/red-orbiter"]} allowedBlocks={ [ 'red-block/red-orbiter' ] }
/> />
</div> </div>
</div> </div>

6
src/red-orbital/orbital.js
View File

@ -1,10 +1,10 @@
export default function Orbiter({ primary, secondary }) { export default function Orbiter( { primary, secondary } ) {
return ( return (
<li className="orbiter bg bg--red pulse"> <li className="orbiter bg bg--red pulse">
<div className="orbiter-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>
</div> </div>
</div> </div>
</li> </li>

10
src/red-orbital/orbiter.js
View File

@ -1,16 +1,16 @@
export default function Orbiter({ primary, secondary, backgroundColor }) { export default function Orbiter( { primary, secondary, backgroundColor } ) {
return ( return (
<li className="orbiter"> <li className="orbiter">
<div <div
className="orbiter-bg" className="orbiter-bg"
style={{ style={ {
backgroundColor: backgroundColor, backgroundColor: backgroundColor,
}} } }
/> />
<div className="orbiter-content content-center"> <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>
</div> </div>
</div> </div>
</li> </li>

38
src/red-orbital/save.js
View File

@ -3,7 +3,7 @@
* *
* @see https://developer.wordpress.org/block-editor/packages/packages-i18n/ * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
*/ */
import { __ } from "@wordpress/i18n"; import { __ } from '@wordpress/i18n';
/** /**
* React hook that is used to mark the block wrapper element. * React hook that is used to mark the block wrapper element.
@ -11,7 +11,7 @@ import { __ } from "@wordpress/i18n";
* *
* @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
*/ */
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
/** /**
* The save function defines the way in which the different attributes should * The save function defines the way in which the different attributes should
@ -22,33 +22,41 @@ 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 } ) {
return ( return (
<div {...useBlockProps.save()}> <div { ...useBlockProps.save() }>
<ul className={`orbiters clockwise pulse count-${attributes.count}`}> <ul
className={ `orbiters clockwise pulse count-${ attributes.count }` }
>
<InnerBlocks.Content /> <InnerBlocks.Content />
</ul> </ul>
<div className="inner-content"> <div className="inner-content">
<div className="image-hover"> <div className="image-hover">
{attributes.imgUrl !== "" ? ( { attributes.imgUrl !== '' ? (
<img <img
className="img-primary" className="img-primary"
src={attributes.imgUrl} src={ attributes.imgUrl }
data-src={attributes.imgUrl} data-src={ attributes.imgUrl }
/> />
) : ( ) : (
<span class="img-primary" data-src={attributes.imgUrl} /> <span
)} class="img-primary"
{attributes.imgUrlHover !== "" ? ( data-src={ attributes.imgUrl }
/>
) }
{ attributes.imgUrlHover !== '' ? (
<img <img
className="img-secondary" className="img-secondary"
src={attributes.imgUrlHover} src={ attributes.imgUrlHover }
data-src={attributes.imgUrlHover} data-src={ attributes.imgUrlHover }
/> />
) : ( ) : (
<span class="img-secondary" data-src={attributes.imgUrlHover} /> <span
)} class="img-secondary"
data-src={ attributes.imgUrlHover }
/>
) }
</div> </div>
</div> </div>
</div> </div>

2
src/red-orbiter/block.json
View File

@ -14,7 +14,7 @@
"editorScript": "file:./index.js", "editorScript": "file:./index.js",
"editorStyle": "file:./index.css", "editorStyle": "file:./index.css",
"style": "file:./style-index.css", "style": "file:./style-index.css",
"parent": ["red-block/red-orbital"], "parent": [ "red-block/red-orbital" ],
"attributes": { "attributes": {
"imgSrc": { "imgSrc": {
"type": "string", "type": "string",

45
src/red-orbiter/edit.js
View File

@ -1,28 +1,32 @@
import { __ } from "@wordpress/i18n"; import { __ } from '@wordpress/i18n';
import { import {
useBlockProps, useBlockProps,
InnerBlocks, InnerBlocks,
InspectorControls, InspectorControls,
} from "@wordpress/block-editor"; } from '@wordpress/block-editor';
import { useSelect } from "@wordpress/data"; import { useSelect } from '@wordpress/data';
import { ColorPicker, Panel, PanelBody, PanelRow } from "@wordpress/components"; import { ColorPicker, Panel, PanelBody, PanelRow } from '@wordpress/components';
import "./editor.scss"; import './editor.scss';
const InnerBlocksWithLimit = ({ clientId, limit = 2, ...rest }) => { const InnerBlocksWithLimit = ( { clientId, limit = 2, ...rest } ) => {
const { blockCount } = useSelect((select) => ({ const { blockCount } = useSelect( ( select ) => ( {
blockCount: select("core/block-editor").getBlockCount(clientId), blockCount: select( 'core/block-editor' ).getBlockCount( clientId ),
})); } ) );
const blockAppender = () => { const blockAppender = () => {
return blockCount < limit ? <InnerBlocks.DefaultBlockAppender /> : false; return blockCount < limit ? (
<InnerBlocks.DefaultBlockAppender />
) : (
false
);
}; };
return <InnerBlocks renderAppender={() => blockAppender()} {...rest} />; return <InnerBlocks renderAppender={ () => blockAppender() } { ...rest } />;
}; };
export default function Edit({ attributes, setAttributes, clientId }) { export default function Edit( { attributes, setAttributes, clientId } ) {
return ( return (
<> <>
<InspectorControls> <InspectorControls>
@ -34,8 +38,10 @@ export default function Edit({ attributes, setAttributes, clientId }) {
</legend> </legend>
</PanelRow> </PanelRow>
<ColorPicker <ColorPicker
color={attributes.backgroundColor} color={ attributes.backgroundColor }
onChange={(color) => setAttributes({ backgroundColor: color })} onChange={ ( color ) =>
setAttributes( { backgroundColor: color } )
}
enableAlpha enableAlpha
defaultValue="#000" defaultValue="#000"
/> />
@ -43,14 +49,17 @@ export default function Edit({ attributes, setAttributes, clientId }) {
</Panel> </Panel>
</InspectorControls> </InspectorControls>
<div {...useBlockProps()}> <div { ...useBlockProps() }>
<div <div
className="orbiter-bg" className="orbiter-bg"
style={{ style={ {
backgroundColor: attributes.backgroundColor, backgroundColor: attributes.backgroundColor,
}} } }
/>
<InnerBlocksWithLimit
orientation="horizontal"
clientId={ clientId }
/> />
<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
</div> </div>
</> </>
); );

16
src/red-orbiter/save.js
View File

@ -3,7 +3,7 @@
* *
* @see https://developer.wordpress.org/block-editor/packages/packages-i18n/ * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
*/ */
import { __ } from "@wordpress/i18n"; import { __ } from '@wordpress/i18n';
/** /**
* React hook that is used to mark the block wrapper element. * React hook that is used to mark the block wrapper element.
@ -11,7 +11,7 @@ import { __ } from "@wordpress/i18n";
* *
* @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
*/ */
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
/** /**
* The save function defines the way in which the different attributes should * The save function defines the way in which the different attributes should
@ -22,18 +22,18 @@ 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 } ) {
return ( return (
<li <li
{...useBlockProps.save({ { ...useBlockProps.save( {
className: "orbiter", className: 'orbiter',
})} } ) }
> >
<div <div
className="orbiter-bg" className="orbiter-bg"
style={{ style={ {
backgroundColor: attributes.backgroundColor, backgroundColor: attributes.backgroundColor,
}} } }
/> />
<div className="orbiter-content content-center"> <div className="orbiter-content content-center">
<div className="feature"> <div className="feature">