editor styling
This commit is contained in:
parent
4e7652bb9a
commit
2482cc3098
35
src/edit.js
35
src/edit.js
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Reference in New Issue