formatting
This commit is contained in:
parent
786f94cfb9
commit
23bec4b3d9
|
|
@ -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,30 +8,30 @@ import {
|
|||
Panel,
|
||||
PanelBody,
|
||||
PanelRow,
|
||||
} from "@wordpress/components";
|
||||
} from '@wordpress/components';
|
||||
|
||||
export default function Controls({
|
||||
export default function Controls( {
|
||||
attributes,
|
||||
setAttributes,
|
||||
innerBlocks,
|
||||
onCountChange,
|
||||
isAnimating,
|
||||
setIsAnimating,
|
||||
}) {
|
||||
} ) {
|
||||
return (
|
||||
<InspectorControls key="setting">
|
||||
<div id="red-orbital-controls">
|
||||
<Panel>
|
||||
<PanelBody title="Settings" initialOpen={true}>
|
||||
<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}
|
||||
min={1}
|
||||
max={12}
|
||||
onChange={onCountChange}
|
||||
value={ innerBlocks.length }
|
||||
min={ 1 }
|
||||
max={ 12 }
|
||||
onChange={ onCountChange }
|
||||
/>
|
||||
</PanelRow>
|
||||
|
||||
|
|
@ -41,22 +41,27 @@ export default function Controls({
|
|||
|
||||
<PanelRow>
|
||||
<MediaPlaceholder
|
||||
onSelect={(img) => {
|
||||
setAttributes({ imgUrl: img.url });
|
||||
}}
|
||||
allowedTypes={["image"]}
|
||||
multiple={false}
|
||||
onSelect={ ( img ) => {
|
||||
setAttributes( { imgUrl: img.url } );
|
||||
} }
|
||||
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: "" });
|
||||
}}
|
||||
isSmall={true}
|
||||
isDestructive={true}
|
||||
onClick={ () => {
|
||||
setAttributes( {
|
||||
imgUrl: '',
|
||||
} );
|
||||
} }
|
||||
isSmall={ true }
|
||||
isDestructive={ true }
|
||||
icon="dismiss"
|
||||
label="Remove"
|
||||
className="remove-img"
|
||||
|
|
@ -71,24 +76,29 @@ export default function Controls({
|
|||
|
||||
<PanelRow>
|
||||
<MediaPlaceholder
|
||||
onSelect={(img) => {
|
||||
setAttributes({ imgUrlHover: img.url });
|
||||
}}
|
||||
allowedTypes={["image"]}
|
||||
multiple={false}
|
||||
onSelect={ ( img ) => {
|
||||
setAttributes( { imgUrlHover: img.url } );
|
||||
} }
|
||||
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: "" });
|
||||
}}
|
||||
onClick={ () => {
|
||||
setAttributes( {
|
||||
imgUrlHover: '',
|
||||
} );
|
||||
} }
|
||||
icon="dismiss"
|
||||
label="Remove"
|
||||
isSmall={true}
|
||||
isDestructive={true}
|
||||
isSmall={ true }
|
||||
isDestructive={ true }
|
||||
className="remove-img"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -101,14 +111,14 @@ export default function Controls({
|
|||
</PanelBody>
|
||||
</Panel>
|
||||
<Panel>
|
||||
<PanelBody title="View Controls" initialOpen={true}>
|
||||
<PanelBody title="View Controls" initialOpen={ true }>
|
||||
<PanelRow>
|
||||
<ToggleControl
|
||||
label="Play"
|
||||
checked={isAnimating}
|
||||
onChange={() => {
|
||||
setIsAnimating((state) => !state);
|
||||
}}
|
||||
checked={ isAnimating }
|
||||
onChange={ () => {
|
||||
setIsAnimating( ( state ) => ! state );
|
||||
} }
|
||||
/>
|
||||
</PanelRow>
|
||||
</PanelBody>
|
||||
|
|
|
|||
|
|
@ -1,125 +1,130 @@
|
|||
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)
|
||||
export default function Edit( { attributes, setAttributes, clientId } ) {
|
||||
const { innerBlocks } = useSelect( ( select ) =>
|
||||
select( 'core/block-editor' ).getBlock( clientId )
|
||||
);
|
||||
|
||||
if (isNaN(parseInt(attributes.count, 10))) {
|
||||
setAttributes({ count: innerBlocks.length });
|
||||
if ( isNaN( parseInt( attributes.count, 10 ) ) ) {
|
||||
setAttributes( { count: innerBlocks.length } );
|
||||
}
|
||||
|
||||
const [removedBlocks, setRemovedBlocks] = useState([]);
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
const [ removedBlocks, setRemovedBlocks ] = useState( [] );
|
||||
const [ isAnimating, setIsAnimating ] = useState( false );
|
||||
|
||||
const animatingClass = " clockwise pulse";
|
||||
const animatingClass = ' clockwise pulse';
|
||||
|
||||
const addBlock = () => {
|
||||
const index = innerBlocks.length - 1;
|
||||
let block;
|
||||
|
||||
if (removedBlocks.length > 0) {
|
||||
block = removedBlocks[removedBlocks.length - 1];
|
||||
setRemovedBlocks(removedBlocks.slice(0, -1));
|
||||
if ( removedBlocks.length > 0 ) {
|
||||
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);
|
||||
setAttributes({ count: parseInt(attributes.count, 10) + 1 });
|
||||
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);
|
||||
const block = innerBlocks[ index ];
|
||||
dispatch( 'core/block-editor' ).removeBlock( block.clientId, false );
|
||||
|
||||
// append to removed blocks list
|
||||
const removedBlocksUpdate = removedBlocks;
|
||||
removedBlocksUpdate.push(block);
|
||||
setRemovedBlocks(removedBlocksUpdate);
|
||||
removedBlocksUpdate.push( block );
|
||||
setRemovedBlocks( removedBlocksUpdate );
|
||||
|
||||
setAttributes({ count: parseInt(attributes.count, 10) - 1 });
|
||||
setAttributes( { count: parseInt( attributes.count, 10 ) - 1 } );
|
||||
};
|
||||
|
||||
const onCountChange = (value) => {
|
||||
if (value > innerBlocks.length) {
|
||||
const onCountChange = ( value ) => {
|
||||
if ( value > innerBlocks.length ) {
|
||||
addBlock();
|
||||
} else if (value < innerBlocks.length) {
|
||||
} else if ( value < innerBlocks.length ) {
|
||||
removeBlock();
|
||||
}
|
||||
};
|
||||
|
||||
const viewList = innerBlocks.map((block) => {
|
||||
const viewList = innerBlocks.map( ( block ) => {
|
||||
let primary = null;
|
||||
let secondary = null;
|
||||
|
||||
if (block.innerBlocks.length > 0) {
|
||||
const { name, attributes, innerBlocks } = block.innerBlocks[0];
|
||||
const element = getSaveElement(name, attributes, innerBlocks);
|
||||
if ( block.innerBlocks.length > 0 ) {
|
||||
const { name, attributes, innerBlocks } = block.innerBlocks[ 0 ];
|
||||
const element = getSaveElement( name, attributes, innerBlocks );
|
||||
primary = element;
|
||||
}
|
||||
|
||||
if (block.innerBlocks.length > 1) {
|
||||
const { name, attributes, innerBlocks } = block.innerBlocks[1];
|
||||
const element = getSaveElement(name, attributes, innerBlocks);
|
||||
if ( block.innerBlocks.length > 1 ) {
|
||||
const { name, attributes, innerBlocks } = block.innerBlocks[ 1 ];
|
||||
const element = getSaveElement( name, attributes, innerBlocks );
|
||||
secondary = element;
|
||||
}
|
||||
|
||||
return (
|
||||
<Orbiter
|
||||
primary={primary}
|
||||
secondary={secondary}
|
||||
backgroundColor={block.attributes.backgroundColor}
|
||||
primary={ primary }
|
||||
secondary={ secondary }
|
||||
backgroundColor={ block.attributes.backgroundColor }
|
||||
/>
|
||||
);
|
||||
});
|
||||
} );
|
||||
|
||||
return (
|
||||
<>
|
||||
<Controls
|
||||
setAttributes={setAttributes}
|
||||
attributes={attributes}
|
||||
innerBlocks={innerBlocks}
|
||||
onCountChange={onCountChange}
|
||||
isAnimating={isAnimating}
|
||||
setIsAnimating={setIsAnimating}
|
||||
setAttributes={ setAttributes }
|
||||
attributes={ attributes }
|
||||
innerBlocks={ innerBlocks }
|
||||
onCountChange={ onCountChange }
|
||||
isAnimating={ isAnimating }
|
||||
setIsAnimating={ setIsAnimating }
|
||||
/>
|
||||
|
||||
<div {...useBlockProps()}>
|
||||
<div { ...useBlockProps() }>
|
||||
<div className="orbital-view">
|
||||
<ul
|
||||
className={`orbiters count-${innerBlocks.length}${
|
||||
isAnimating ? animatingClass : ""
|
||||
}`}
|
||||
className={ `orbiters count-${ innerBlocks.length }${
|
||||
isAnimating ? animatingClass : ''
|
||||
}` }
|
||||
>
|
||||
{viewList}
|
||||
{ viewList }
|
||||
</ul>
|
||||
|
||||
<div className="inner-content">
|
||||
<div className="image-hover">
|
||||
{attributes.imgUrl !== "" ? (
|
||||
<img src={attributes.imgUrl} />
|
||||
) : null}
|
||||
{attributes.imgUrlHover !== "" ? (
|
||||
<img src={attributes.imgUrlHover} />
|
||||
) : null}
|
||||
{ attributes.imgUrl !== '' ? (
|
||||
<img src={ attributes.imgUrl } />
|
||||
) : null }
|
||||
{ attributes.imgUrlHover !== '' ? (
|
||||
<img src={ attributes.imgUrlHover } />
|
||||
) : null }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-list">
|
||||
<InnerBlocks
|
||||
renderAppender={false}
|
||||
allowedBlocks={["red-block/red-orbiter"]}
|
||||
renderAppender={ false }
|
||||
allowedBlocks={ [ 'red-block/red-orbiter' ] }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
export default function Orbiter({ primary, secondary }) {
|
||||
export default function Orbiter( { primary, secondary } ) {
|
||||
return (
|
||||
<li className="orbiter bg bg--red pulse">
|
||||
<div className="orbiter-content content-center anti-clockwise">
|
||||
<div className="feature">
|
||||
<div className="feature-item primary">{primary}</div>
|
||||
<div className="feature-item secondary">{secondary}</div>
|
||||
<div className="feature-item primary">{ primary }</div>
|
||||
<div className="feature-item secondary">{ secondary }</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
export default function Orbiter({ primary, secondary, backgroundColor }) {
|
||||
export default function Orbiter( { primary, secondary, backgroundColor } ) {
|
||||
return (
|
||||
<li className="orbiter">
|
||||
<div
|
||||
className="orbiter-bg"
|
||||
style={{
|
||||
style={ {
|
||||
backgroundColor: backgroundColor,
|
||||
}}
|
||||
} }
|
||||
/>
|
||||
<div className="orbiter-content content-center">
|
||||
<div className="feature">
|
||||
<div className="feature-item primary">{primary}</div>
|
||||
<div className="feature-item secondary">{secondary}</div>
|
||||
<div className="feature-item primary">{ primary }</div>
|
||||
<div className="feature-item secondary">{ secondary }</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -22,33 +22,41 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
|
|||
*
|
||||
* @return {WPElement} Element to render.
|
||||
*/
|
||||
export default function save({ attributes }) {
|
||||
export default function save( { attributes } ) {
|
||||
return (
|
||||
<div {...useBlockProps.save()}>
|
||||
<ul className={`orbiters clockwise pulse count-${attributes.count}`}>
|
||||
<div { ...useBlockProps.save() }>
|
||||
<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}
|
||||
src={ attributes.imgUrl }
|
||||
data-src={ attributes.imgUrl }
|
||||
/>
|
||||
) : (
|
||||
<span class="img-primary" data-src={attributes.imgUrl} />
|
||||
)}
|
||||
{attributes.imgUrlHover !== "" ? (
|
||||
<span
|
||||
class="img-primary"
|
||||
data-src={ attributes.imgUrl }
|
||||
/>
|
||||
) }
|
||||
{ attributes.imgUrlHover !== '' ? (
|
||||
<img
|
||||
className="img-secondary"
|
||||
src={attributes.imgUrlHover}
|
||||
data-src={attributes.imgUrlHover}
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"parent": ["red-block/red-orbital"],
|
||||
"parent": [ "red-block/red-orbital" ],
|
||||
"attributes": {
|
||||
"imgSrc": {
|
||||
"type": "string",
|
||||
|
|
|
|||
|
|
@ -1,56 +1,65 @@
|
|||
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),
|
||||
}));
|
||||
const InnerBlocksWithLimit = ( { clientId, limit = 2, ...rest } ) => {
|
||||
const { blockCount } = useSelect( ( select ) => ( {
|
||||
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} />;
|
||||
return <InnerBlocks renderAppender={ () => blockAppender() } { ...rest } />;
|
||||
};
|
||||
|
||||
export default function Edit({ attributes, setAttributes, clientId }) {
|
||||
export default function Edit( { attributes, setAttributes, clientId } ) {
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
<Panel>
|
||||
<PanelBody title="Settings" initialOpen={ true }>
|
||||
<PanelRow>
|
||||
<legend className="blocks-base-control__label">
|
||||
<legend className="blocks-base-control__label">
|
||||
{ __( 'Background Color', 'red-orbital' ) }
|
||||
</legend>
|
||||
</legend>
|
||||
</PanelRow>
|
||||
<ColorPicker
|
||||
color={attributes.backgroundColor}
|
||||
onChange={(color) => setAttributes({ backgroundColor: color })}
|
||||
enableAlpha
|
||||
defaultValue="#000"
|
||||
/>
|
||||
<ColorPicker
|
||||
color={ attributes.backgroundColor }
|
||||
onChange={ ( color ) =>
|
||||
setAttributes( { backgroundColor: color } )
|
||||
}
|
||||
enableAlpha
|
||||
defaultValue="#000"
|
||||
/>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</InspectorControls>
|
||||
|
||||
<div {...useBlockProps()}>
|
||||
<div { ...useBlockProps() }>
|
||||
<div
|
||||
className="orbiter-bg"
|
||||
style={{
|
||||
style={ {
|
||||
backgroundColor: attributes.backgroundColor,
|
||||
}}
|
||||
} }
|
||||
/>
|
||||
<InnerBlocksWithLimit
|
||||
orientation="horizontal"
|
||||
clientId={ clientId }
|
||||
/>
|
||||
<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -22,18 +22,18 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
|
|||
*
|
||||
* @return {WPElement} Element to render.
|
||||
*/
|
||||
export default function save({ attributes }) {
|
||||
export default function save( { attributes } ) {
|
||||
return (
|
||||
<li
|
||||
{...useBlockProps.save({
|
||||
className: "orbiter",
|
||||
})}
|
||||
{ ...useBlockProps.save( {
|
||||
className: 'orbiter',
|
||||
} ) }
|
||||
>
|
||||
<div
|
||||
className="orbiter-bg"
|
||||
style={{
|
||||
style={ {
|
||||
backgroundColor: attributes.backgroundColor,
|
||||
}}
|
||||
} }
|
||||
/>
|
||||
<div className="orbiter-content content-center">
|
||||
<div className="feature">
|
||||
|
|
|
|||
Loading…
Reference in New Issue