aibishal

✏️ Editing: edit.js

/**
 * EDIT: Color
 */

import ntc from '../../vendor/ntc.js';

const ColorEdit = ( props ) => {

const { ColorPicker, PanelBody, TextControl } = wp.components;
  const { InspectorControls, useBlockProps } = wp.blockEditor;

// Get the values needed from props.
  const { setAttributes } = props;
  const { hex, label, autoLabel } = props.attributes;
  const blockProps = useBlockProps();

// Declare change event handlers.
  const onChangeHex   = ( value ) => { setAttributes( { hex: value.hex } ) };
  const onChangeLabel = ( value ) => { setAttributes( { label: value } ) };

// Get the automatic name for this hex from the "Name That Color" API.
  // This will be used as the placeholder text for the Color Label attribute
  // and will be displayed on the front-end unless the user selects the option
  // to not display a label.
  ntc.init();
  const ntcName = hex ? ntc.name( hex ) : '';
  setAttributes( { autoLabel: ntcName[1] } );

// Define the style for the color swatch in the editor.
  const swatchStyle = { background: hex };

// Return the edit UI.
  return (
    <div { ...blockProps }>

<PanelBody title='Color Selection' initialOpen={ true }>
          <p>
            Select a color for this swatch from the picker below. A name will
            be automatically generated for your chosen color's label, but you
            can always change that name by typing over it in the editor.
          </p>

</InspectorControls>

</div>

</div>
  );

};

export default ColorEdit;

Gifari Industries - BD Cyber Security Team