editor styling

This commit is contained in:
Ray Elliott 2022-07-22 17:02:05 +01:00
parent 4e7652bb9a
commit 2482cc3098
3 changed files with 51 additions and 15 deletions

View File

@ -6,7 +6,7 @@ import {
InspectorControls,
} from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { ColorPicker } from "@wordpress/components";
import { ColorPicker, Panel, PanelBody, PanelRow } from "@wordpress/components";
import "./editor.scss";
@ -26,21 +26,30 @@ export default function Edit({ attributes, setAttributes, clientId }) {
return (
<>
<InspectorControls>
<ColorPicker
color={attributes.backgroundColor}
onChange={(color) => setAttributes({ backgroundColor: color })}
enableAlpha
defaultValue="#000"
/>
<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({
style: {
<div {...useBlockProps()}>
<div
className="orbiter-bg"
style={{
backgroundColor: attributes.backgroundColor,
},
})}
>
}}
/>
<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
</div>
</>

View File

@ -5,12 +5,24 @@
*/
.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;
@ -26,4 +38,18 @@
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;
}
}
}

View File

@ -7,7 +7,6 @@
.wp-block-red-block-red-orbiter {
--duration__feature-hover: 0.3s;
--duration__pulse: 1.5s;
.orbiter-bg {
position: absolute;
@ -61,7 +60,9 @@
}
}
.wp-block-red-block-red-orbital.pulse {
.orbiters.pulse {
--duration__pulse: 1.5s;
.orbiter:hover {
> .orbiter-bg {
animation-play-state: paused;