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

34
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,7 +8,7 @@ import {
Panel, Panel,
PanelBody, PanelBody,
PanelRow, PanelRow,
} from "@wordpress/components"; } from '@wordpress/components';
export default function Controls( { export default function Controls( {
attributes, attributes,
@ -25,7 +25,7 @@ export default function Controls({
<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 }
@ -44,16 +44,21 @@ export default function Controls({
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 } isSmall={ true }
isDestructive={ true } isDestructive={ true }
@ -74,16 +79,21 @@ export default function Controls({
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"

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

@ -1,16 +1,16 @@
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 ) ) ) {
@ -20,7 +20,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
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;
@ -30,17 +30,22 @@ export default function Edit({ attributes, setAttributes, clientId }) {
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(
block,
index,
clientId,
false
);
setAttributes( { count: parseInt( attributes.count, 10 ) + 1 } ); 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;
@ -98,7 +103,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<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 }
@ -106,10 +111,10 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<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>
@ -119,7 +124,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<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>

22
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
@ -25,29 +25,37 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
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"
data-src={ attributes.imgUrl }
/>
) } ) }
{attributes.imgUrlHover !== "" ? ( { 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>

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

@ -1,22 +1,26 @@
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 } />;
@ -35,7 +39,9 @@ export default function Edit({ attributes, setAttributes, clientId }) {
</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"
/> />
@ -50,7 +56,10 @@ export default function Edit({ attributes, setAttributes, clientId }) {
backgroundColor: attributes.backgroundColor, backgroundColor: attributes.backgroundColor,
} } } }
/> />
<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} /> <InnerBlocksWithLimit
orientation="horizontal"
clientId={ clientId }
/>
</div> </div>
</> </>
); );

6
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
@ -26,7 +26,7 @@ export default function save({ attributes }) {
return ( return (
<li <li
{ ...useBlockProps.save( { { ...useBlockProps.save( {
className: "orbiter", className: 'orbiter',
} ) } } ) }
> >
<div <div