move red-orbiter block into red-orbital plugin
This commit is contained in:
parent
5d399faffb
commit
b2f3f66d1c
|
@ -22,6 +22,7 @@
|
|||
* @see https://developer.wordpress.org/reference/functions/register_block_type/
|
||||
*/
|
||||
function red_block_red_orbital_block_init() {
|
||||
register_block_type( __DIR__ . '/build' );
|
||||
register_block_type( __DIR__ . '/build/red-orbital' );
|
||||
register_block_type( __DIR__ . '/build/red-orbiter' );
|
||||
}
|
||||
add_action( 'init', 'red_block_red_orbital_block_init' );
|
||||
|
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 2,
|
||||
"name": "red-block/red-orbiter",
|
||||
"version": "0.1.0",
|
||||
"title": "Orbiter",
|
||||
"category": "widgets",
|
||||
"icon": "image-filter",
|
||||
"description": "For use with the Orbital Block.",
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"textdomain": "red-orbiter",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"parent": ["red-block/red-orbital"],
|
||||
"attributes": {
|
||||
"imgSrc": {
|
||||
"type": "string",
|
||||
"default": "https://via.placeholder.com/64x64"
|
||||
},
|
||||
"backgroundColor": {
|
||||
"type": "string",
|
||||
"default": "#ffc8c8"
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,57 @@
|
|||
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";
|
||||
|
||||
import "./editor.scss";
|
||||
|
||||
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 <InnerBlocks renderAppender={() => blockAppender()} {...rest} />;
|
||||
};
|
||||
|
||||
export default function Edit({ attributes, setAttributes, clientId }) {
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
<Panel>
|
||||
<PanelBody title="Settings" initialOpen={ true }>
|
||||
<PanelRow>
|
||||
<legend className="blocks-base-control__label">
|
||||
{ __( 'Background Color', 'red-orbital' ) }
|
||||
</legend>
|
||||
</PanelRow>
|
||||
<ColorPicker
|
||||
color={attributes.backgroundColor}
|
||||
onChange={(color) => setAttributes({ backgroundColor: color })}
|
||||
enableAlpha
|
||||
defaultValue="#000"
|
||||
/>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</InspectorControls>
|
||||
|
||||
<div {...useBlockProps()}>
|
||||
<div
|
||||
className="orbiter-bg"
|
||||
style={{
|
||||
backgroundColor: attributes.backgroundColor,
|
||||
}}
|
||||
/>
|
||||
<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,55 @@
|
|||
/**
|
||||
* The following styles get applied inside the editor only.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.block-list .wp-block-red-block-red-orbiter {
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
margin-bottom: 1px;
|
||||
padding: 8px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 72px;
|
||||
width: calc(100% - 90px);
|
||||
height: 1px;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.block-editor-inner-blocks > .block-editor-block-list__layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
max-height: 60px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 60px;
|
||||
width: auto;
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.orbiter-bg {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
&.has-child-selected,
|
||||
&.is-selected {
|
||||
.block-editor-inner-blocks > .block-editor-block-list__layout > * {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* Registers a new block provided a unique name and an object defining its behavior.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* Every block starts by registering a new block type definition.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
|
||||
*/
|
||||
registerBlockType( metadata.name, {
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: Edit,
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save,
|
||||
} );
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
* Retrieves the translation of text.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
|
||||
*/
|
||||
import { __ } from "@wordpress/i18n";
|
||||
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
|
||||
*/
|
||||
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
|
||||
|
||||
/**
|
||||
* The save function defines the way in which the different attributes should
|
||||
* be combined into the final markup, which is then serialized by the block
|
||||
* editor into `post_content`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
|
||||
*
|
||||
* @return {WPElement} Element to render.
|
||||
*/
|
||||
export default function save({ attributes }) {
|
||||
return (
|
||||
<li
|
||||
{...useBlockProps.save({
|
||||
className: "orbiter",
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className="orbiter-bg"
|
||||
style={{
|
||||
backgroundColor: attributes.backgroundColor,
|
||||
}}
|
||||
/>
|
||||
<div className="orbiter-content content-center">
|
||||
<div className="feature">
|
||||
<InnerBlocks.Content />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,129 @@
|
|||
/**
|
||||
* The following styles get applied both on the front of your site
|
||||
* and in the editor.
|
||||
*
|
||||
* Replace them with your own styles or remove the file completely.
|
||||
*/
|
||||
|
||||
.wp-block-red-block-red-orbiter {
|
||||
--duration__feature-hover: 0.3s;
|
||||
|
||||
.orbiter-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.feature {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
& > * {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
|
||||
transition: opacity var(--duration__feature-hover);
|
||||
|
||||
&:nth-child(1) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > * {
|
||||
&:first-child {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orbiters.pulse {
|
||||
--duration__pulse: 1.5s;
|
||||
|
||||
.orbiter:hover {
|
||||
> .orbiter-bg {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.orbiter {
|
||||
> .orbiter-bg {
|
||||
animation: pulse var(--duration__pulse) alternate ease-in-out infinite
|
||||
running;
|
||||
}
|
||||
|
||||
&:nth-child(2) > .orbiter-bg {
|
||||
&::before {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) > .orbiter-bg {
|
||||
&::before {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) > .orbiter-bg {
|
||||
&::before {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) > .orbiter-bg {
|
||||
&::before {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6) > .orbiter-bg {
|
||||
&::before {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(7) > .orbiter-bg {
|
||||
&::before {
|
||||
animation-delay: 1.1s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(8) > .orbiter-bg {
|
||||
&::before {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue