No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

4D
20H
59M
25S

Agrega diferentes estilos a tu bloque

9/15
Recursos

Aportes 2

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Lo que se me ocurri贸 hacer para mi bloque fue un bloque sencillo que pueda funcionar como un Call to Action din谩mico, para usarse en art铆culos de blog o en p谩ginas del sitio:

脡ste tiene un t铆tulo, un texto y un bot贸n. El usuario puede elegir el t铆tulo, el texto, el texto del bot贸n y el link del bot贸n.

Comenc茅 haciendo un CodePen de mi bloque, para ver los dos estilos y generar el markup necesario. Ah铆 puede verse el html y el scss de mi bloque.

Mi edit.js termin贸 vi茅ndose as铆:

import {InspectorControls} from "@wordpress/block-editor";
import {Panel, PanelBody, TextControl, TextareaControl} from "@wordpress/components";

const Edit = (props) => {
  const {className, attributes, setAttributes} = props;
  const {title, text, buttonText, buttonLink} = attributes;

  return(
    <>
    <InspectorControls>
      <Panel>
        <PanelBody title="CTA Options" initialOpen={true}>
          <TextControl
            label= "Title"
            value= {title}
            onChange= {(newTitle) => setAttributes({title: newTitle})}
          />
          <TextareaControl
            label= "CTA Text"
            help= "Please, enter the text for the CTA"
            value= {text}
            onChange= {(newText) => setAttributes({text: newText})}
          />
          <TextControl
            label="Button text"
            value= {buttonText}
            onChange={(newButtonText) => setAttributes({buttonText: newButtonText})}
          />
          <TextControl
            label="Button link"
            value= {buttonLink}
            onChange={(newButtonLink) => setAttributes({buttonLink: newButtonLink})}
          />
        </PanelBody>
      </Panel>
    </InspectorControls>
    <div className={className}>
      <h2 className="cta__title">
        {title}
      </h2>
      <p className="cta__text">
        {text}
      </p>
      <button type="button" className="cta__btn" href={buttonLink}>
        {buttonText}
      </button>
    </div>
    </>
  );
}

export default Edit;

Vi que adicional a 鈥淭extControl鈥, existe 鈥淭extareaControl鈥, as铆 que lo import茅 tambi茅n porque me pareci贸 un input m谩s adecuado para la longitud del copy que un user podr铆a a帽adir en el campo 鈥淐TA text鈥.

Mi index.php luce as铆:

<?php

add_action('init', 'plz_cta_blocks');

function plz_cta_blocks(){
  $assets_file = include_once PLZ_PATH . "/blocks/cta/build/index.asset.php";

  wp_register_script(
    'plz-cta-block',
    plugins_url('./build/index.js', __FILE__),
    $assets_file['dependencies'],
    $assets_file['version']
  );

  wp_register_style(
    "g-font",
    "https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700",
    array(),
    false,
    'all');

  wp_register_style(
    'plz-cta-block',
    plugins_url('./build/index.css', __FILE__),
    array('g-font'),
    $assets_file['version']
  );

  register_block_type(
    'plz/cta',
    array(
      'editor_script' => 'plz-cta-block',
      'style' => 'plz-cta-block'
    ));
}

Inclu铆 la fuente porque aunque esta se carga en el front end desde el theme, no era visible en el editor, pero no s茅 si este sea el procedimiento ideal para esto.

As铆 se ven las opciones del bloque desde el editor:

Y as铆 es como se ven los dos estilos del bloque en el front end:

Muchas gracias Lucio, ten铆a bastante tiempo tratando de aprender todo este proceso!

Me di a la tarea de hacer el bloque para el login, segu铆 la misma l贸gica que para el registro. Cre茅 una carpeta login dentro de blocks y edit茅 mi archivo package.json de esta forma:

"scripts": {
		"build": "wp-scripts build",
		"build:login": "wp-scripts build ./login/src/index.js --output-path=./login/build",
		"check-engines": "wp-scripts check-engines",
		"check-licenses": "wp-scripts check-licenses",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"lint:md:docs": "wp-scripts lint-md-docs",
		"lint:md:js": "wp-scripts lint-md-js",
		"lint:pkg-json": "wp-scripts lint-pkg-json",
		"packages-update": "wp-scripts packages-update",
		"start": "wp-scripts start",
		"start:login": "wp-scripts start ./login/src/index.js --output-path=./login/build",
		"test:e2e": "wp-scripts test-e2e",
		"test:unit": "wp-scripts test-unit-js"
	},

login/src/edit.js

import { useState } from '@wordpress/element';
import { BlockControls, InspectorControls, RichText } from '@wordpress/block-editor';
import { Panel, PanelBody, TextControl } from '@wordpress/components';

const Edit = (props) => {
    const { className, attributes, setAttributes } = props;
    const { title, emailLabel, passLabel, text } = attributes;
    const [hasText, setHasText] = useState(text);
    return (
        <>
            <InspectorControls>
                <Panel>
                    <PanelBody title="Labels" initialOpen={true}>
                        <TextControl
                            label="Email Label"
                            value={emailLabel}
                            onChange={(newLabel) => setAttributes({ emailLabel: newLabel })}
                        />
                        <TextControl
                            label="Password Label"
                            value={passLabel}
                            onChange={(newLabel) => setAttributes({ passLabel: newLabel })}
                        />
                    </PanelBody>
                </Panel>
            </InspectorControls>
            <BlockControls
                controls={[
                    {
                        icon: 'text',
                        title: 'Add text',
                        isActive: text || hasText,
                        onClick: () => setHasText(!hasText)
                    }
                ]}
            />
            <div className={className}>
                <div className="signin__container">
                    <RichText
                        tagName="h1"
                        placeholder="Escribe un t铆tulo"
                        className="signin__titulo"
                        value={title}
                        onChange={(newTitle) => setAttributes({ title: newTitle })}
                    />
                    {(text || hasText) &&
                        <RichText
                            tagName="p"
                            placeholder="Escribe un p谩rrafo"
                            value={text}
                            onChange={(newText) => setAttributes({ text: newText })}
                        />
                    }
                    <form className="signin__form" id="signin">
                    <div className="signin__email name--campo">
                        <label htmlFor="email">{emailLabel}</label>
                        <input name="email" type="email" id="email" />
                    </div>
                    <div className="signin__pass name--campo">
                        <label htmlFor="password">{passLabel}</label>
                        <input name="password" type="password" id="password" />
                    </div>
                    <div className="signin__submit">
                        <input type="submit" value="Log In" />
                    </div>
                    <div className="msg" />
                    </form>
                </div>
            </div>
        </>
    );
}

export default Edit;

login/src/index.js

import { registerBlockType } from "@wordpress/blocks";
import edit from "./edit";
import save from "./save";
import "./styles.scss";

registerBlockType("plz/login", {
    title: "Login",
    category: "widgets",
    icon: "admin-users",
    attributes: {
        title: {
            source: "html",
            selector: "h1",
            default: "Login"
        },
        emailLabel: {
            type: "string",
            default: "Email"
        },
        passLabel: {
            type: "string",
            default: "Password"
        },
        text: {
            source: "html",
            selector: "p"
        }
    },
    styles: [
        {
            name: "light",
            label: "Light Mode",
            isDefault: true
        },
        {
            name: "dark",
            label: "Dark Mode"
        }
    ],
    edit,
    save
});

login/src/save.js

import { RichText } from '@wordpress/block-editor';

const Save = (props) => {
    const { className, attributes } = props;
    const { title, emailLabel, passLabel, text } = attributes;
    return (
        <div className={className}>
            <div className="signin__container">
                <RichText.Content
                    tagName="h1"
                    className="signin__titulo"
                    value={title}
                />
                {text &&
                    <RichText.Content
                        tagName="p"
                        value={text}
                    />
                }
                <form className="signin__form" id="signin">
                <div className="signin__email name--campo">
                    <label htmlFor="email">{emailLabel}</label>
                    <input name="email" type="email" id="email" />
                </div>
                <div className="signin__pass name--campo">
                    <label htmlFor="password">{passLabel}</label>
                    <input name="password" type="password" id="password" />
                </div>
                <div className="signin__submit">
                    <input type="submit" value="Log In" />
                </div>
                <div className="msg" />
                </form>
            </div>
        </div>
    );
}

export default Save;

login/src/styles.scss

.wp-block-plz-login {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .signin__container {
        margin: 0 auto;
        display: block;
        max-width: 400px;
        width: 100%;
        margin: 20px 0;

        .signin__titulo {
            font-family: Quicksand;
            font-style: normal;
            font-weight: bold;
            font-size: 22px;
            line-height: 22px;
            color: #000000;
            margin-bottom: 40px;
        }

        .signin__form {
            .name--campo {
                display: flex;
                flex-direction: column;
                margin-bottom: 20px;

                label {
                    font-family: Quicksand;
                    font-style: normal;
                    font-weight: bold;
                    font-size: 14px;
                    line-height: 17px;
                    color: #000000;
                    margin-bottom: 5px;
                }

                input:not([type=submit]) {
                    background: #F7F7F7;
                    border: 1px solid #F7F7F7;
                    box-sizing: border-box;
                    border-radius: 10px;
                    height: 45px;
                    font-family: Quicksand;
                    font-style: normal;
                    font-weight: normal;
                    font-size: 16px;
                    line-height: 20px;
                    color: #797979;
                    text-indent: 10px;

                    &:focus {
                        outline: none;
                    }
                }

            }

            input[type=submit] {
                margin-top: 30px;
                background: #ACD9B2;
                border: 1px solid #ACD9B2;
                box-sizing: border-box;
                box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.0001);
                border-radius: 10px;
                width: 100%;
                height: 55px;
                font-family: Quicksand;
                font-style: normal;
                font-weight: bold;
                font-size: 18px;
                line-height: 22px;
                text-align: center;
                color: #FFFFFF;
                transition: 200ms;

                &:hover {
                    background-color: #000000;
                }

                &:focus {
                    outline: none;
                }
            }

            .signin_create-link {
                margin-top: 30px;

                a {
                    border: 1px solid #ACD9B2;
                    box-sizing: border-box;
                    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.0001));
                    border-radius: 10px;
                    width: 100%;
                    height: 55px;
                    display: inline-block;
                    text-decoration: none;
                    color: #ACD9B2;
                    font-family: Quicksand;
                    font-style: normal;
                    font-weight: bold;
                    font-size: 18px;
                    line-height: 55px;
                    text-align: center;
                    transition: 200ms;

                    &:hover {
                        background-color: #000;
                        color: white;
                    }
                }
            }
        }
    }
}

login/index.php

<?php

function plz_login_blocks() {
    $assets_file = include_once PLZ_PATH . '/blocks/login/build/index.asset.php';

    wp_register_script(
        'plz-login-block',
        plugins_url( './build/index.js', __FILE__ ),
        $assets_file['dependencies'],
        $assets_file['version']
    );

    wp_register_style(
        'plz-login-block',
        plugins_url( './build/index.css', __FILE__ ),
        array(),
        $assets_file['version']
    );

    register_block_type(
        'plz/login',
        array(
            'editor_script' => 'plz-login-block',
            'script' => 'plz-login',
            'style' => 'plz-login-block'
        )
    );
}

add_action( 'init', 'plz_login_blocks' );

Finalmente agregamos la siguiente l铆nea en: plugin-frontend-login.php

require_once PLZ_PATH."/public/shortcode/form-login.php";

OJO: Me falt贸 los estilos del modo oscuro, por lo dem谩s el form funciona. Saludos.