{"id":550,"date":"2019-02-27T21:37:44","date_gmt":"2019-02-27T20:37:44","guid":{"rendered":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2019\/?p=550"},"modified":"2019-03-13T14:16:37","modified_gmt":"2019-03-13T13:16:37","slug":"anatomia-del-editor-de-wordpress-1","status":"publish","type":"post","link":"https:\/\/cursoswp.educacion.navarra.es\/cursowp2019\/anatomia-del-editor-de-wordpress-1\/","title":{"rendered":"Anatom\u00eda del editor de WordPress 1"},"content":{"rendered":"\n

En el presente art\u00edculo vamos a analizar con el mayor detalle posible la estructura y configuraci\u00f3n de Gutenberg, el nuevo editor de WordPress. En primer lugar explicaremos la disposici\u00f3n general de la pantalla de edici\u00f3n, y a continuaci\u00f3n procederemos a detallar cada una de las cuatro \u00e1reas de que consta el editor.<\/p>\n\n\n\n\n\n\n\n

1. Las \u00e1reas del nuevo editor de WordPress<\/h2>\n\n\n\n

El editor de WordPress se estructura en cuatro \u00e1reas fundamentales,a saber:<\/p>\n\n\n\n

  1. El \u00e1rea de inserci\u00f3n de bloques, situada en el \u00e1ngulo superior izquierdo de la pantalla de edici\u00f3n. En la captura de pantalla que incluimos al final de esta lista aparece recuadrada en color rojo.<\/li>
  2. El \u00e1rea de publicaci\u00f3n y de configuraci\u00f3n del editor, que ocupa el \u00e1ngulo superior derecho de la pantalla de edici\u00f3n. La hemos marcado en color amarillo.<\/li>
  3. El \u00e1rea de edici\u00f3n propiamente dicha, situada en el centro de la pantalla de edici\u00f3n. En ella se escribe el t\u00edtulo de los art\u00edculos y se a\u00f1aden y editan bloques. Est\u00e1 marcada en color verde.<\/li>
  4. El \u00e1rea de configuraci\u00f3n de las propiedades del contenido, situada en el lado derecho de la pantalla de edici\u00f3n, y dividida a su vez en dos columnas: la columna de propiedades del documento, y la columna de propiedades de los bloques. La hemos recuadrado en color azul.<\/li><\/ol>\n\n\n\n
    \"Figura<\/a>
    Figura 1- Estructura del editor de WordPress<\/figcaption><\/figure>\n\n\n\n

    Para no alargar excesivamente la descripci\u00f3n del editor, hemos decidido dividirla en tres art\u00edculos diferentes. En este primero explicaremos las \u00e1reas de inserci\u00f3n de bloques, de publicaci\u00f3n y (parcialmente) de configuraci\u00f3n del editor. <\/p>\n\n\n\n

    2. \u00c1rea de inserci\u00f3n de bloques<\/h2>\n\n\n\n

    Esta \u00e1rea, que como tal no exist\u00eda en el anterior editor de WordPress, puede considerarse una de las principales innovaciones del nuevo editor. Y lo es no solo por los cambios que implica en los procedimientos de edici\u00f3n de los art\u00edculos, sino tambi\u00e9n por la potencia y versatilidad que a\u00f1ade al editor. El \u00e1rea dispone de cinco iconos correspondientes a diferentes funciones, que describimos de izquierda a derecha:<\/p>\n\n\n\n

    1. Icono para a\u00f1adir bloques<\/strong>. Al hacer clic sobre este icono se despliega una ventana modal emergente (<\/a>popup<\/a><\/em>)<\/a> en la que se incluyen todos los bloques insertables en el \u00e1rea de edici\u00f3n. La ventana modal tambi\u00e9n cuenta con un buscador que permite localizar los bloques si el usuario no los identifica a primera vista. En pr\u00f3ximos art\u00edculos veremos cu\u00e1les son los bloques nativos de WordPress, c\u00f3mo se organizan y para qu\u00e9 sirven.<\/li>
    2. Icono de deshacer<\/strong>. Permite volver atr\u00e1s en las acciones realizadas sobre el editor.<\/li>
    3. Icono de rehacer<\/strong>. Sirve para anular las acciones de deshacer.<\/li>
    4. Icono de estructura del contenido<\/strong>. Al pulsar sobre este icono se abre una ventana modal que ofrece informaci\u00f3n muy interesante sobre el art\u00edculo que se est\u00e1 editando. En primer lugar aparecen datos num\u00e9ricos sobre el n\u00famero de palabras, encabezados o titulares, p\u00e1rrafos y bloques de que consta la entrada o p\u00e1gina; en segundo lugar, se muestra el esquema del documento de acuerdo con la jerarqu\u00eda de titulares propia del c\u00f3digo HTML<\/a>. Si el usuario pulsa sobre cualquiera de los elementos integrantes de dicho esquema, el foco del editor se desplazar\u00e1 hasta \u00e9l, lo cual convierte a esta herramienta en una utilidad muy potente para comprender de un vistazo la estructura de contenido de un art\u00edculo. <\/li>
    5. Icono de navegaci\u00f3n por bloques<\/strong>. Al hacer clic sobre este icono se abre una ventana modal que muestra la secuencia de bloques del documento y, en su caso, la jerarqu\u00eda de estos. Si el usuario pulsa sobre el icono de cualquiera de los bloques, el foco del editor se desplaza hasta \u00e9l, lo cual convierte a esta herramienta en una utilidad muy potente para agilizar, ordenar y optimizar el proceso de edici\u00f3n.<\/li><\/ol>\n\n\n\n

      3. \u00c1rea de publicaci\u00f3n y de configuraci\u00f3n del editor<\/h2>\n\n\n\n

      La segunda \u00e1rea del editor de WordPress combina dos funciones diferenciadas: la publicaci\u00f3n de los art\u00edculos, por un lado, y la configuraci\u00f3n del propio editor, por otro. Para conseguir una exposici\u00f3n m\u00e1s clara, vamos a distinguir ambas funciones en ep\u00edgrafes separados.<\/p>\n\n\n\n

      3.1. Funciones de publicaci\u00f3n de art\u00edculos<\/h3>\n\n\n\n

      Dependiendo del estado del art\u00edculo (sin publicar, en borrador, ya publicado, etc.), aparecen distintos elementos en esta \u00e1rea:<\/p>\n\n\n\n

      1. Solo guardar<\/strong>. Este enlace sirve para guardar un art\u00edculo en modo de borrador, es decir, sin publicar.<\/li>
      2. Vista previa<\/strong>. Este enlace permite previsualizar el aspecto de una entrada en cualquier momento del proceso de edici\u00f3n, tanto si se encuentra en modo de borrador, como si ya ha sido publicada. Al pulsar sobre el enlace, el art\u00edculo se abre en una nueva ventana o pesta\u00f1a, lo cual favorece el proceso de edici\u00f3n, ya que el trabajo de elaboraci\u00f3n del art\u00edculo se realiza en una pantalla y la previsualizaci\u00f3n en otra.<\/li>
      3. Publicar…<\/strong>. Este bot\u00f3n solo aparece si la entrada no ha sido publicada previamente. Al pulsar sobre \u00e9l, se despliega otra de las innovaciones de Gutenberg, que es el comprobador de publicaci\u00f3n, mediante el cual el sistema trata de asegurar que la publicaci\u00f3n de un art\u00edculo se realiza con las m\u00e1ximas garant\u00edas. Si el usuario est\u00e1 de acuerdo en publicar, puede pulsar sobre el bot\u00f3n correspondiente, o bien cancelar la publicaci\u00f3n, con el fin de volver a revisar el art\u00edculo.<\/li>
      4. Actualizar<\/strong>. Este bot\u00f3n solo aparece si la entrada ya ha sido publicada y se pretende publicar los cambios realizados sobre ella. Al pulsar sobre el bot\u00f3n, este se transforma en otro muy parecido, con la leyenda Actualizando…<\/strong><\/li>
      5. Cambiar a borrador<\/strong>. Mediante este enlace se puede modificar el estado de una entrada ya publicada, a fin de despublicarla y convertirla en un borrador.<\/li><\/ol>\n\n\n\n

        3.2. Funciones de configuraci\u00f3n del editor<\/h3>\n\n\n\n

        Los dos iconos que aparecen a la derecha de esta \u00e1rea del editor (el engranaje y los tres puntos dispuestos en vertical) proporcionan acceso a las opciones de configuraci\u00f3n del nuevo editor de WordPress. A continuaci\u00f3n explicaremos todas estas opciones, en dos ep\u00edgrafes diferentes que corresponden a los dos iconos citados.<\/p>\n\n\n\n

        3.2.1. Ajustes del editor<\/h4>\n\n\n\n

        El icono del engranaje o rueda dentada act\u00faa como un conmutador que permite mostrar u ocultar las opciones del art\u00edculo que se est\u00e1 editando en un momento dado. Dicho de otra modo: el icono del engranaje sirve para mostrar u ocultar el \u00e1rea de configuraci\u00f3n del art\u00edculo (es el \u00e1rea 4, recuadrada en azul en la figura 1).<\/p>\n\n\n\n

        Como ya hemos explicado, esas opciones se organizan en dos columnas, \u00abDocumento\u00bb y \u00abBloques\u00bb, que agrupan los diversos ajustes que afectan al documento en su conjunto, y a cada uno de los bloques de que consta. Explicaremos todos estos ajustes m\u00e1s adelante.<\/p>\n\n\n\n

        3.2.2 Mostrar m\u00e1s herramientas y opciones<\/h4>\n\n\n\n

        Al pulsar sobre el icono de los tres puntos dispuestos en vertical se despliegan las opciones complementarias del editor, que son las siguientes:<\/p>\n\n\n\n

        A. Grupo de opciones \u00abVer\u00bb<\/strong><\/p>\n\n\n\n

        Las tres opciones agrupadas en este ep\u00edgrafe controlan la apariencia y modo de trabajo del editor. Son las siguientes:<\/p>\n\n\n\n

        1. Barra de herramientas superior<\/strong>. Si se activa esta opci\u00f3n, desaparecen temporalmente las opciones de edici\u00f3n de cada bloque individual, que son sustituidas por una \u00fanica barra superior de opciones, com\u00fan para todos los bloques; no obstante, debe tenerse en cuenta que la barra superior mostrar\u00e1 opciones diferentes en funci\u00f3n del bloque que en cada momento se est\u00e9 editando. Optar por este modo de trabajo hace que la experiencia de edici\u00f3n sea m\u00e1s parecida, aunque no del todo igual, a la que los usuarios ten\u00edan con el antiguo editor de WordPress.<\/li>
        2. Modo de enfoque<\/strong>. Cuando se activa esta opci\u00f3n, el foco del editor se centra en el bloque sobre el que en ese momento est\u00e1 trabajando el usuario, para lo cual disminuye la nitidez y el contraste con el que se presentan los dem\u00e1s bloques. Esta t\u00e9cnica favorece la concentraci\u00f3n del usuario sobre el bloque que en cada momento est\u00e9 editando. <\/li>
        3. Modo a pantalla completa<\/strong>. Si se activa esta opci\u00f3n, el editor oculta el men\u00fa lateral de administraci\u00f3n de WordPress, lo cual permite trabajar sin distracciones y centrarse en el proceso de escritura y edici\u00f3n del art\u00edculo.<\/li><\/ol>\n\n\n\n

          Las tres opciones que acabamos describir act\u00faan como sendos conmutadores, de modo que el usuario puede activarlas y desactivarlas cuando as\u00ed lo prefiera o necesite. Adem\u00e1s, las tres opciones se pueden combinar entre s\u00ed, a fin de adaptar el editor al estado que en cada momento resulte m\u00e1s conveniente para el usuario.<\/p>\n\n\n\n

          B. Grupo de opciones \u00abEditor\u00bb<\/strong><\/p>\n\n\n\n

          Desde este grupo de opciones se puede controlar el modo de trabajo del editor, que como en versiones anteriore de WordPress, ofrece dos posibilidades: la edici\u00f3n visual (opci\u00f3n predeterminada) y la edici\u00f3n directa del c\u00f3digo HTML. Si se opta por esta segunda opci\u00f3n, todo el art\u00edculo se podr\u00e1 editar en modo de c\u00f3digo. Conviene tener en cuenta esta precisi\u00f3n, ya que, como veremos m\u00e1s adelante, tambi\u00e9n es posible trabajar en modo de edici\u00f3n de c\u00f3digo en cada uno de los bloques individuales.<\/p>\n\n\n\n

          C. Grupo de opciones \u00abHerramientas\u00bb<\/strong><\/p>\n\n\n\n

          Este ep\u00edgrafe agrupa un conjunto de utilidades que permiten gestionar diversos aspectos del editor y aumentar su productividad. Son las siguientes:<\/p>\n\n\n\n