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 { __ } from "@wordpress/i18n";
import { InspectorControls, MediaPlaceholder } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import {
__experimentalNumberControl as NumberControl,
@ -8,7 +8,7 @@ import {
Panel,
PanelBody,
PanelRow,
} from "@wordpress/components";
} from '@wordpress/components';
export default function Controls( {
attributes,
@ -25,7 +25,7 @@ export default function Controls({
<PanelBody title="Settings" initialOpen={ true }>
<PanelRow>
<legend className="blocks-base-control__label">
{__("Orbital count", "red-orbital")}
{ __( 'Orbital count', 'red-orbital' ) }
</legend>
<NumberControl
value={ innerBlocks.length }
@ -44,16 +44,21 @@ export default function Controls({
onSelect={ ( img ) => {
setAttributes( { imgUrl: img.url } );
} }
allowedTypes={["image"]}
allowedTypes={ [ 'image' ] }
multiple={ false }
className="img-selector"
mediaPreview={
attributes.imgUrl !== "" ? (
attributes.imgUrl !== '' ? (
<div>
<img src={attributes.imgUrl} alt="" />
<img
src={ attributes.imgUrl }
alt=""
/>
<Button
onClick={ () => {
setAttributes({ imgUrl: "" });
setAttributes( {
imgUrl: '',
} );
} }
isSmall={ true }
isDestructive={ true }
@ -74,16 +79,21 @@ export default function Controls({
onSelect={ ( img ) => {
setAttributes( { imgUrlHover: img.url } );
} }
allowedTypes={["image"]}
allowedTypes={ [ 'image' ] }
multiple={ false }
className="img-selector"
mediaPreview={
attributes.imgUrlHover !== "" ? (
attributes.imgUrlHover !== '' ? (
<div>
<img src={attributes.imgUrlHover} alt="" />
<img
src={ attributes.imgUrlHover }
alt=""
/>
<Button
onClick={ () => {
setAttributes({ imgUrlHover: "" });
setAttributes( {
imgUrlHover: '',
} );
} }
icon="dismiss"
label="Remove"

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

@ -1,16 +1,16 @@
import { useSelect, dispatch } from "@wordpress/data";
import { useState } from "@wordpress/element";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import { getSaveElement, createBlock } from "@wordpress/blocks";
import { useSelect, dispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
import { getSaveElement, createBlock } from '@wordpress/blocks';
import "./editor.scss";
import './editor.scss';
import Controls from "./controls.js";
import Orbiter from "./orbiter.js";
import Controls from './controls.js';
import Orbiter from './orbiter.js';
export default function Edit( { attributes, setAttributes, clientId } ) {
const { innerBlocks } = useSelect( ( select ) =>
select("core/block-editor").getBlock(clientId)
select( 'core/block-editor' ).getBlock( clientId )
);
if ( isNaN( parseInt( attributes.count, 10 ) ) ) {
@ -20,7 +20,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
const [ removedBlocks, setRemovedBlocks ] = useState( [] );
const [ isAnimating, setIsAnimating ] = useState( false );
const animatingClass = " clockwise pulse";
const animatingClass = ' clockwise pulse';
const addBlock = () => {
const index = innerBlocks.length - 1;
@ -30,17 +30,22 @@ export default function Edit({ attributes, setAttributes, clientId }) {
block = removedBlocks[ removedBlocks.length - 1 ];
setRemovedBlocks( removedBlocks.slice( 0, -1 ) );
} 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 } );
};
const removeBlock = () => {
const index = innerBlocks.length - 1;
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
const removedBlocksUpdate = removedBlocks;
@ -98,7 +103,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<div className="orbital-view">
<ul
className={ `orbiters count-${ innerBlocks.length }${
isAnimating ? animatingClass : ""
isAnimating ? animatingClass : ''
}` }
>
{ viewList }
@ -106,10 +111,10 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<div className="inner-content">
<div className="image-hover">
{attributes.imgUrl !== "" ? (
{ attributes.imgUrl !== '' ? (
<img src={ attributes.imgUrl } />
) : null }
{attributes.imgUrlHover !== "" ? (
{ attributes.imgUrlHover !== '' ? (
<img src={ attributes.imgUrlHover } />
) : null }
</div>
@ -119,7 +124,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<div class="block-list">
<InnerBlocks
renderAppender={ false }
allowedBlocks={["red-block/red-orbiter"]}
allowedBlocks={ [ 'red-block/red-orbiter' ] }
/>
</div>
</div>

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

@ -3,7 +3,7 @@
*
* @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.
@ -11,7 +11,7 @@ import { __ } from "@wordpress/i18n";
*
* @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
@ -25,29 +25,37 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
export default function save( { attributes } ) {
return (
<div { ...useBlockProps.save() }>
<ul className={`orbiters clockwise pulse count-${attributes.count}`}>
<ul
className={ `orbiters clockwise pulse count-${ attributes.count }` }
>
<InnerBlocks.Content />
</ul>
<div className="inner-content">
<div className="image-hover">
{attributes.imgUrl !== "" ? (
{ attributes.imgUrl !== '' ? (
<img
className="img-primary"
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
className="img-secondary"
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>

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

@ -1,22 +1,26 @@
import { __ } from "@wordpress/i18n";
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
InnerBlocks,
InspectorControls,
} from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { ColorPicker, Panel, PanelBody, PanelRow } from "@wordpress/components";
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { ColorPicker, Panel, PanelBody, PanelRow } from '@wordpress/components';
import "./editor.scss";
import './editor.scss';
const InnerBlocksWithLimit = ( { clientId, limit = 2, ...rest } ) => {
const { blockCount } = useSelect( ( select ) => ( {
blockCount: select("core/block-editor").getBlockCount(clientId),
blockCount: select( 'core/block-editor' ).getBlockCount( clientId ),
} ) );
const blockAppender = () => {
return blockCount < limit ? <InnerBlocks.DefaultBlockAppender /> : false;
return blockCount < limit ? (
<InnerBlocks.DefaultBlockAppender />
) : (
false
);
};
return <InnerBlocks renderAppender={ () => blockAppender() } { ...rest } />;
@ -35,7 +39,9 @@ export default function Edit({ attributes, setAttributes, clientId }) {
</PanelRow>
<ColorPicker
color={ attributes.backgroundColor }
onChange={(color) => setAttributes({ backgroundColor: color })}
onChange={ ( color ) =>
setAttributes( { backgroundColor: color } )
}
enableAlpha
defaultValue="#000"
/>
@ -50,7 +56,10 @@ export default function Edit({ attributes, setAttributes, clientId }) {
backgroundColor: attributes.backgroundColor,
} }
/>
<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
<InnerBlocksWithLimit
orientation="horizontal"
clientId={ clientId }
/>
</div>
</>
);

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

@ -3,7 +3,7 @@
*
* @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.
@ -11,7 +11,7 @@ import { __ } from "@wordpress/i18n";
*
* @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
@ -26,7 +26,7 @@ export default function save({ attributes }) {
return (
<li
{ ...useBlockProps.save( {
className: "orbiter",
className: 'orbiter',
} ) }
>
<div