Block in custom block

  • Hello,

    im busy with a challenge of wpchallenges.com where I have to make a custom component that can be used to display and enter some data in a Card.

    So far I have this:

    /**

 * Retrieves the translation of text.

 *

 * @see https://developer.www.ads-software.com/block-editor/reference-guides/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.www.ads-software.com/block-editor/reference-guides/packages/packages-block-editor/#useblockprops

 */

import { InspectorControls, useBlockProps } from '@wordpress/block-editor';

import { PanelBody, TextareaControl, TextControl } from '@wordpress/components';

/**

 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.

 * Those files can contain any CSS code that gets applied to the editor.

 *

 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css

 */

import './editor.scss';

/**

 * The edit function describes the structure of your block in the context of the

 * editor. This represents what the editor will render when the block is used.

 *

 * @see https://developer.www.ads-software.com/block-editor/reference-guides/block-api/block-edit-save/#edit

 *

 * @return {Element} Element to render.

 */

export default function Edit({ attributes, setAttributes }) {

    return (

        <>

            <InspectorControls>

                <PanelBody title={__('Input area', 'TestimonialCard')} >

                    <TextareaControl

                        label={__('Quote', 'TestimonialCard')}

                        rows={2}

                        value={""}

                        onChange={e => console.log(e)}

                    />

                    <TextControl

                      label={__('Your name', 'TestimonialCard')}

                      value={""}

                      onChange={e => console.log(e)}

                    />

                    <TextControl

                      label={__('Job Title', 'TestimonialCard')}

                      value={""}

                      onChange={e => console.log(e)}

                    />

                </PanelBody>

            </InspectorControls>

            <p {...useBlockProps()}>Here must be something displayed</p>

        </>

    );

}

    But now I wonder how I can make it work that the card is displayed on the editor. Right now I can add any components to my custom made component.

    I think I need three textboxes to make things work
    Can anyone give me a hint how to achieve that.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Unfortunately, I don’t know what you mean by “card”. So I can only give you the following tip:

    You must save the entries in the components in the state of your application. TextControl and TextareaControl have onChange for this purpose. Example:

    <TextControl
  label={__('Your name', 'TestimonialCard')}
  value={""}
  onChange={(value) => setAttributes( 'your-name': value ) }
/>

    Then you can use their names where you want to output the entered values:

    {your-name}

    Note that you must also define all names as attributes. More details in the manual: https://developer.www.ads-software.com/block-editor/reference-guides/block-api/block-attributes/

    Thread Starter roelof

    (@roelof)

    oke, let ask another way
    Is this a good way to the user can fill in the card from the editor and from the panel ?

    

`


export default function Edit({ attributes, setAttributes }) {

? ? return (

? ? ? ? <>

? ? ? ? ? ? <InspectorControls>

? ? ? ? ? ? ? ? <PanelBody title={__('Input area', 'TestimonialCard')} >

? ? ? ? ? ? ? ? ? ? <TextareaControl

? ? ? ? ? ? ? ? ? ? ? ? label={__('Quote', 'TestimonialCard')}

? ? ? ? ? ? ? ? ? ? ? ? rows={2}

? ? ? ? ? ? ? ? ? ? ? ? value={""}

? ? ? ? ? ? ? ? ? ? ? ? onChange={e => console.log(e)}

? ? ? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? ? ? <TextControl

? ? ? ? ? ? ? ? ? ? ? label={__('Your name', 'TestimonialCard')}

? ? ? ? ? ? ? ? ? ? ? value={""}

? ? ? ? ? ? ? ? ? ? ? onChange={e => console.log(e)}

? ? ? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? ? ? <TextControl

? ? ? ? ? ? ? ? ? ? ? label={__('Job Title', 'TestimonialCard')}

? ? ? ? ? ? ? ? ? ? ? value={""}

? ? ? ? ? ? ? ? ? ? ? onChange={e => console.log(e)}

? ? ? ? ? ? ? ? ? ? />

? ? ? ? ? ? ? ? </PanelBody>

? ? ? ? ? ? </InspectorControls>

? ? ? ? ? ? ?<RichText

? ? ? ? ? ? ? ? {...useBlockProps()} ?

? ? ? ? ? ? ? ? tagName="p"

? ? ? ? ? ? ? ?onChange={(e) => console.log(e) }

? ? ? ? ? ? ? ?allowedFormats={ [ 'core/bold', 'core/italic' ] }

? ? ? ? ? ? ? ?value={ attributes.content }

? ? ? ? ? ? ? placeholder={ __( 'Write your text...' ) }

? ? ? ? ? ? />

? ? ? ? ? ? <RichText

? ? ? ? ? ? ? ? {...useBlockProps()} ?

? ? ? ? ? ? ? ? tagName="p"

? ? ? ? ? ? ? ?onChange={(e) => console.log(e) }

? ? ? ? ? ? ? ?allowedFormats={ [ 'core/bold', 'core/italic' ] }

? ? ? ? ? ? ? ?value={ attributes.content }

? ? ? ? ? ? ? placeholder={ __( 'Write your text...' ) }

? ? ? ? ? ? />

? ? ? ? </>

? ? );

}</code></pre>

    You can also do it this way. The RichText component would not be necessary, as I described above. And I think you are still missing any storage and output of the inputs.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Block in custom block’ is closed to new replies.