roelof

O, kan dat,
Kan ik dan ook een rood blokje rond de link maken of heb ik daar toch css voor nodig.

Het orgineel heeft een padding van 16px.

oke, de js part will be easy I think.
Voor de php gedeelte moet ik nog even uitzoeken hoe ik dan de functie aanroep.

Dit heb ik tot zover 

`<br>

<?php

/**

 * Plugin Name: mycustomForm

 * Plugin URI: none

 * Description: Test.

 * Version: 0.1

 * Author: Roelof Wobben

 * Author URI: none

 **/

class mycustomForm

{

    public function __construct()

    {

        // add assests(js,css , etc)

        add_action('wp_enqueue_scripts', array($this, 'load_assets'));

        // add shortcode

        add_shortcode('contact_form', array($this, 'load_shortcode'));

    }

    public function load_assets()

    {

        wp_enqueue_style(

            'mycustomForm',

            plugin_dir_url(__FILE__) . '/css/mycustomForm.css',

            array(),

            1,

            'all'

        );

        wp_enqueue_script(

            'mycustomForm',

            plugin_dir_url(__FILE__) . '/js/mycustomForm.js',

            array(),

            1,

            true

        );

    }

    public function load_shortcode()

    {

        ?>

        <div class="container">

            <form>

                <h1>Contact Form</h1>

                <div class="form-group">

                    <input type="text" required="required" />

                    <label for="input" class="control-label">Subject</label><i class="bar"></i>

                </div>

                <div class="form-group">

                    <input type="text" required="required" />

                    <label for="input" class="control-label">Email</label><i class="bar"></i>

                </div>

                <div class="form-group">

                    <textarea required="required"></textarea>

                    <label for="textarea" class="control-label">Message</label><i class="bar"></i>

                </div>

            </form>

            <div class="button-container">

                <button type="button" class="button"><span>Submit</span></button>

            </div>

        </div>

        <?php

    }

}

new mycustomForm;</code></pre>

Geen idee,
De opdracht is om een custom shortcode te maken die een formulier laat zien. En dit zijn de requirements:

1. Shortcode needs to have fields: Subject (input), Email (input), Message (textarea),
2. Sanitize all fields before being used for sending it,
3. Use wp_mail to send the email
4. Style it and enqueue style only on pages where the shortcode is
5. Display errors on top of the form

Ik heb de shortcode werkend.
Ik krijg het formulier te zien.
En omdat bij punt 5 gezegd wordt dat ik de errors op het formulier te zien moeten zijn, krijg ik het idee dat ik iets van validatie nodig heb,.

Dit is de challenge die ik probeer op te lossen.

Task:

Develop a custom Gutenberg block that displays a testimonial card with fields for a testimonial quote, author name, and author’s job title.

Requirements:

1. Create a custom block using @wordpress/create-block,
2. Implement a block that includes fields for testimonial quotes, author name, and job title,
3. Fields can be displayed either inside the block in the editor or on the side panel
4. Use Editor and Block Styles (editor if fields are displayed inside the block in the editor). Block Styles for the front.

• Deze reactie is gewijzigd 7 maanden, 2 weken geleden door roelof.

Denk dat ik het gevonden heb,
omdat de plugin nog niet gebouwd is , “moet” je eerst wp-scripts installeren en daarna in de directory van de plugin “npm run start” doen.

Dan zie ik de component wel in de lijst.
Of alleen een zip maken van de build directory ,
Misschien dat dat ook werkt.

oke,
ik heb een build gedaan en zie dan dat save,js niet meegaat.

En zoals ik net al zei alles werkt alleen ik zie oude gegevens op de front end en het werkt niet zodra ik mijn component in een group component zet,
Verder werkt hier alles lokaal goed.

Nee, als het mijn component dan aanklikt dan lijkt de groep nog steeds geselecteerd.

en ik wil graag oefenen met het maken van een child-theme.
Zo ik hoop dat je me nog steeds wilt helpen.
De documenten zijn hierover niet echt duidelijk.