Cómo sacar el máximo partido a CSS – Evento mowomo

Buenas, ayer 30 de abril di una charla para el evento #yomequedoencasa de mowomo .

A continuación os quiero dejar el contenido que usé en la ponencia. Por un lado está la presentación con ejemplos de código y por otro lado un pdf con la información más detallada

La presentación que estuvimos viendo durante la charla está hecha con la herramienta web-slides y tal cómo comenté os ánimo a que la conozcáis.


Es una herramienta que te ayuda a realizar presentaciones a base de código. Tienes muchos ejemplos en su web y su documentación es fácil de seguir.

Por aquí os dejo mi presentación para que la echéis un vistazo

Como he comentado al principio de este post también quiero dejaros un pdf donde tenéis explicado más en detalle todo lo que se ha hablado a lo largo de la ponencia.

Espero que toda esta información os sirva de ayuda y cualquier duda que queráis hacerme podéis hacerlo a través de mi Twitter.

¿Cómo crear bloque de Gutenberg?

Hola, Hace poco tiempo que me aventuré en el desarrollo de bloques de Gutenberg y he conseguido hacer algunos bloques. Con este tutorial aprenderás la base de como crear un bloque de Gutenberg y a la vez el desarrollo de un pequeño bloque para una galería.

Para poder desarrollar el bloque lo primero que haremos será crear un plugin y dentro de él desarrollaremos el registro del bloque y su funcionalidad. Dado que vamos a desarrollar un plugin es importante que le informes a cerca de cómo se lleva a cabo el proceso de creacion de plugin para WordPress.

  1. Paso – Crear un plugin: Dentro de nuestro WordPress en la carpeta wp-content/plugins/ añadiremos una carpeta para contener el plugin.
  2. Fichero index.php de registro del plugin: Se trata del fichero donde se va a declarar el plugin, por lo tanto, añadiremos en él las cabeceras necesarias para la declaración al igual que el registro de ficheros necesarios para el plugin. Este fichero irá dentro de la carpeta que acabamos de crear. (wp-content/plugins/carpeta-para-el-bloque/index.php )A continuación mostremos un ejemplo.
/*
Plugin Name:gallerynprd
Description: Plugin para crear un  bloque en Gutenberg para una galería 
Author: nadiaprd
Author URI: 
Version: 0.0.2
*/


function functionBack() {
	 
	wp_enqueue_script(
	    'gallerynprd',
 // nombre del bloque
	    plugin_dir_url(__FILE__) . '/js/gallerynprd.js',
	    array('wp-blocks', 'wp-i18n', 'wp-editor'),
	    true
	);
//Se encola el fichero donde se realizará la funcionalidad del bloque

	wp_enqueue_style(
		'editor', 
		plugins_url( 'css/editor.css', __FILE__ ), // css interno para el editor.
		array(),
		'4.7.0'
	);

//Se encola el fichero donde se realizarán los estilos de la parte interna del bloque en el escritorio de WordPress

}

add_action('enqueue_block_editor_assets', 'functionBack');
//Se añade esta función en la edición de bloques de Gutenberg


function funtionsFront() {
    
	wp_enqueue_style(
		'front-css', 
		plugins_url( 'css/front.css', __FILE__ ), // iconos font-awesome
		array(),
		'1.0.0'
	);
//Se encola el fichero donde se realizarán los estilos de la parte externa del WordPress, el resultado final y el que se mostrará al usuario.
    
}    
 
add_action('init', 'funtionsFront');

//Se añade esta función en el inicio de WordPress

En los fichero de ejemplo os dejado unos comentarios explicando cada elemento del fichero. A continuación veremos un ejemplo de como se registra un bloque y de toda la funcionalidad necesaria que necesitamos para su desarrollo.

Si estás realizando este tutorial a la vez que lo desarrollas tendrás la siguiente estructura:

wp-content/plugins/carpeta-para-el-bloque/index.php

Para seguir con el desarrollo, dentro de esa carpeta crearemos un otra para el javascript y dentro del ella añadiremos el fichero de desarrollo del bloque index.js. Volvamos a dejar clara la nueva estructura de carpetas:

wp-content/plugins/carpeta-para-el-bloque/index.php

wp-content/plugins/carpeta-para-el-bloque/js/index.js

Os mostraré un ejemplo de este fichero con el código completo sobre el desarrollo del bloque de la galería, también pondré comentarios explicando cada sección o elemento.

3. Fichero index.js de registro del plugin: Se trata del fichero donde se va a desarrollar el bloque y toda su funcionalidad necesaria. A continuación mostremos un ejemplo.


( function( blocks, components, i18n, element ) {

  var el = element.createElement; //nos ayuda a crear los elementos htmml
  var MediaUpload = wp.editor.MediaUpload; // funcionalidad del media de WP
  var InnerBlocks = wp.editor.InnerBlocks; // Funicionalidad para insertar bloques de Gutenberg
  var IconButton = components.IconButton;

 


  blocks.registerBlockType(
    'common/newgallery', {  // nombre para el bloque
    title: i18n.__( 'A new gallery' ),
    icon: 'book', //icono para el bloque
    category: 'common', //categoría a la que va a pertenecer el bloque
    attributes: { //variables con las cuales vamos a desarrollar
      title: {type: 'string'},
      date: {type: 'string'},
      text: {type: 'string'},
      mediaID: {
        type: 'number',
      },
      mediaURL: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
      }
    },

    edit: function( props ) {
      /*

 función editar en ella desarrollaremos todo la parte interna del bloque
 y es la que veremos dentro de la parte interna de nuestro WordPress

      */


      var focus = props.focus;
      var focusedEditable = props.focus ? props.focus.editable || 'name' : null;
      var alignment = props.attributes.alignment;
      var attributes = props.attributes;
      var contactURL = props.attributes.contactURL;


      function updateTitle(event) {
        props.setAttributes({title: event.target.value})
        // función para almacenar temporalmente el contenido de la variable title.
      }
     
      function updateText(event) {
        props.setAttributes({text: event.target.value})
        // función para almacenar temporalmente el contenido de la variable text.
      }

      var onSelectImage = function( media ) {
        // Evento para almacenar la información en la varibles relativas a la información de la imagen.
        
        return props.setAttributes( {
          mediaURL: media.url,
          mediaID: media.id,
        } );
      };
      
      return [

      /*
      Desarrollo del HTML necesario para la recogida de información con la que se va a trabajar
 en la parte interna del bloque.


      */
       
        el( 'div', { className: "wp-block-prd"},
          el( 'div', { className: "bloque-1 bloque"},
              el("h4", {className: "paso-1 paso "},
                 el("span", {className:'num'},'1'),
                  'Escoja la portada para la galería'
              ),
              el( 'div', {
                id: 'contenedor-1',
                className: attributes.mediaID ? 'cont  box-img' : 'cont  box-img',
                style: attributes.mediaID ? { backgroundImage: 'url(' + attributes.mediaURL + ')' } : {}
              },
              el( MediaUpload, {
                onSelect: onSelectImage,
                type: 'image',
                value: attributes.mediaID,
                render: function( obj ) {

                  return el( IconButton, {
                    className: attributes.mediaID ? 'image-button' : 'button button-large',
                    onClick: obj.open
                    },
                    ! attributes.mediaID ? i18n.__( 'Adjuntar una imagen' ) : el( 'img', { src: attributes.mediaURL } )
                  );
                }
              } )
            )
           ),   
        
            el( 'div', { className: 'bloque-2 bloque' },
              el("h4", {className: "paso-2 paso "},
              el("span", {className:'num'},'2'),
              'Rellene los siguientes datos'
              ),

              el( "div", { id: "contenedor-2", class: "cont"},
                  el( "div", { class: "form-box col2"},
                        el("label", {},'Título de la galería'),
                        el("input", { type: "text", value: props.attributes.title, onChange: updateTitle }),
                  ),

                  el("div",{ class: "form-box col1"},
                        el("label", {},'Añade un comentario'),
                        el("textarea", { rows: "4", value: props.attributes.text, onChange: updateText }),
                  )
              )
            ),

        
          el("div", {className: "bloque-3 bloque"},
            el("h4", {className: "paso-3 paso "},
               el("span", {className:'num'},'3'),
                'Ahora añade el bloque de galería que ofrece Gutenberg'
            ),
            el("div", {id: ""},
                el(InnerBlocks, { 
                    allowedBlocks: [
                      'common/gallery',
                    ],
                 render: function( obj ) {

                }}),
            )
          )
        )
      ];
    },

    save: function( props ) {
      
      /*

 función save en ella desarrollaremos todo la parte externa del bloque
 y es la que veremos expuesta en la web, la que verá el usuario final.
 En ella desarrollaremos todos los elementos que consideremos necesarios para
 mostrar esa información que hemos recogido.

      */

      var attributes = props.attributes; 
      /*
      haremos relación a los atributos utilizados en la función edit para poder
 mostrar la información que hemos recogido anteriormente en los campos del
 formulario.

      */

      return (
        el( 'div', { className: props.className },
          el( "div",
            { class: "bloqueTimeline", 
              data_total: ""},

              el( "div",
                { class: "content"},
                el("div",
                  { class: "infoR"},
                  el( 'img', { src: attributes.mediaURL } ),
          
                  el("div",{ class: "text"},
                    el( "h3",{ class: "title"}, props.attributes.title), 
                    el('div', {numberOfLines: 10, class: "desc"}, props.attributes.text ),
                    el( InnerBlocks.Content, null ),

                  ),
                ),
                
              ), 
            )
        )
      );
    },
  } );
} )(
  window.wp.blocks,
  window.wp.components,
  window.wp.i18n,
  window.wp.element,
);

En el return de la funcion edit mostramos la información necesaria para la parte interna. En este caso el bloque que vamos a desarrollar es un galería y por ello preparemos:
– El selector media de WordPress para poder coger la foto de portada de la galería.
-un input texto donde le daremos un título a nuestra galería.
-un textarea, para aportar un comentaario a la galería.
-Por último ofreceremos la posibilidad de añadir el bloque de galería de Gutenberg.

En el return de la función save mostraremos todo el resultado final que queremos que el usuario final vea. Con los ficheros de estilo CSS que encolamos anteriormente podemos dar estilos a esta sección.

Si habéis ido realizando el tutorial a la vez veréis que ya tenemos completo nuestro bloque de galería para Gutenberg. Espero que este post os haya servido de ayuda para entender el proceso de desarrollo de un bloque.

¿Cómo hacer un tema de WordPress?

Hola si estás leyendo esto, es porque tienes intención de crear el propio tema para tu web en WordPress. Para poder llevar a cabo este objetivo tienes que tener conocimientos avanzados sobre desarrollo web ( HTML, CSS, PHP , JS …).

Para crear un tema desde cero es necesario que dentro del directorio wp-content/themes de tu WordPress generes la carpeta del tema a desarrollar, por ejemplo:

MiWordPress/wp-content/themes/nuevoTema

A continuación dentro de la carpeta /nuevoTema crearás los ficheros style.css e index.php, ya que son necesarios para el desarrollo del tema.

En el fichero style.css, incluiremos la información de nuestro tema, es decir las cabeceras del tema. Aquí os dejo un enlace al core de WordPress dónde se explica en detalle esto.

/*
Theme Name: first Theme
Theme URI: https://www.nadiaprd.com/
Author: Nadia Prida
Author URI: https://www.nadiaprd.com/
Description: Primera versión del tema de la web
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

En el fichero index.php, incluiremos el bucle que pintará las entradas de nuestro WordPress. Aquí te dejo toda la información a cerca del loop de WordPress.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <?php get_header();?>
 
    <?php if (have_posts()) :
 
        while (have_posts()) : the_post();?>
 
           
            <article id="post-<?php the_ID();?>" <?php post_class();?>>
                <h1><?php the_title();?></h1>

                <div class="entry-content">
                    <?php the_content();?>
                </div><!-- entry-content -->
            </article>
        
            <aside class="sidebar">
                <?php get_sidebar();?>
            </aside>
                    
 
        <?php endwhile;
    endif;?>
 
<?php get_footer();?>
</body>
</html>

Con estos dos ficheros ya puedes tener el “desarrollo de tu tema para WordPress”.

Con esto ya puedes activar tu tema, pero verás que el resultado todavía está bastante verde eso es por varias cosas:

Con estos ficheros hemos creado la estructura base para poder empezar a desarrollar nuestro tema, pero no significa que hayamos terminado o completado el proceso, quedan unos cuantos pasos más que iremos viendo más adelante.

Para poder seguir desarrollando el tema es importante que sigas las guías del core de WordPress, ya que son de gran ayuda.

En los siguientes post iré explicando más acerca de cómo desarrollar un tema de WordPress y poco a poco con cada post iremos dando vida al nuevo theme de nuestra web.