Ondersteuning » Code oplossingen gezocht » Can I make it work that a card is displayed on the editor (custom component)

  • Ik probeer een custom block te maken als oplossing voor een wp-challenges opdracht waar ik een block plugin moet maken die een card laat zien.

    Ik heb tot nu toe dit geschreven in mijn edit.js

    /**
    
     * Retrieves the translation of text.
    
     *
    
     * @see https://developer.wordpress.org/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.wordpress.org/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.wordpress.org/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>
    
            </>
    
        );
    
    }

    Nu vraag ik me af hoe ik het vooral elkaar kan krijgen dat in de editor de card te zien is en ook dat je tekst kan veranderen.

    iemand een hint ?

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Guido

    (@guido07111975)

    Hoi Roelof,

    Je moet het blok ook registreren in PHP. In het hoofdbestand van je plugin of in bestand functions van je thema. Zie hier voor meer info. Dus middels functie registerBlockType().

    Guido

    Thread starter roelof

    (@roelof)

    Dank je.

    Ik heb alleen deze tutorial gevolgd ( https://developer.wordpress.org/block-editor/getting-started/tutorial/ ) maar dat werd daar niet uitgelegd.
    Dus maar “even” in duiken

    Thread starter roelof

    (@roelof)

    Weet niet zeker of we hetzelfde bedoelen maar wat ik zoek is dat ik bijvoorbeeld een tekst block kan toevoegen in mijn eigen custom block.
    Maar dan wel met een custom uiterlijk.

    De block die ik maak is al geregisteerd omdat ik ene block.json gebruik.

    Guido

    (@guido07111975)

    Hoi Roelof,

    Sorry, heb helaas geen ervaring met block.json dus kan je niet verder helpen hiermee. Als hier niemand meer gaat reageren zou je het kunnen proberen op het ENG talige forum, zie deze pagina.

    Guido

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)