Mejoras a Etch

Fancy Etch también mejora el propio Etch — el builder en el que trabajas y las páginas que construye, haya tienda o no. Cada mejora tiene su interruptor en Fancy Etch → Etch, en la tarjeta de la parte de Etch que cambia, y cada una tiene además su filtro para un sitio que prefiera dejarlo escrito en código.

Mejora	Tarjeta	Qué cambia
Keyframes inside classes	Styles	Un @keyframes escrito en el CSS de una clase funciona, en la página y en el builder
Follow the selection	Builder	Al hacer clic en un elemento del lienzo, el panel de estructura se desplaza hasta dejar su fila en la mitad
Collapse all but the selection	Builder	Añade al panel de estructura un botón que cierra todas las carpetas menos las que llevan al elemento seleccionado
Collapse on selection	Builder	Al seleccionar un elemento en el lienzo se cierran las carpetas que no llevan a él, como hace el botón
Full names on hover	Builder	Al señalar un nombre cortado en el panel de estructura, se ve completo
Content field that grows	Builder	El campo de contenido de un elemento crece para enseñar todo su texto, y se redimensiona como un área de texto
Scrollable CSS toolbar	Builder	La fila de iconos sobre el editor de CSS se desplaza con la rueda o arrastrando, y se difumina donde hay más ocultos
Mark the selected row	Builder	Dibuja una línea junto a la fila seleccionada del panel de estructura, más fácil de ver que su color

Todas están encendidas hasta que las apagues, menos Collapse on selection, que está apagada hasta que la enciendas.

No se escribe nada en tus páginas

Cada una de éstas es o una hoja de estilos que sólo se carga en el builder o un script que mueve los propios controles del builder. Tus plantillas, tus estilos y tu contenido no se tocan, y apagar una deja Etch exactamente como estaba.

Keyframes dentro de las clases

Etch escribe el CSS de una clase dentro de su selector, y el navegador descarta un @keyframes que encuentra ahí — por eso una animación necesitaba hasta ahora su propia hoja en el Style Manager. Con esto encendido, lo escribes en la clase que lo usa y funciona, en la página y en el lienzo del builder.

Las reglas, las trampas y lo que viaja con una plantilla están en el inicio rápido. Apagado, un @keyframes dentro de una clase vuelve a ignorarse, como en Etch sin el plugin.

El panel de estructura

Follow the selection

Al hacer clic en un elemento del lienzo, su fila va a la mitad del panel, para que se vean también las de alrededor — salvo que ya esté cerca de la mitad, para que el panel no se mueva sin parar mientras haces clic entre vecinos. Al principio o al final de una lista se acerca todo lo que el panel puede desplazarse.

Seleccionar una fila en el propio panel nunca lo desplaza. Etch ya abre las carpetas alrededor de la fila en la que hiciste clic; esto es lo que la trae a la vista — también cuando haces clic en un elemento que ya estaba seleccionado, después de cerrar una de sus carpetas o de mover el panel.

Mark the selected row

Etch indica la fila seleccionada sólo aclarando un poco su color, y cuesta verla — en una lista de componentes, todos del mismo color, casi nada. Esto dibuja una línea justo por fuera de la fila, a su izquierda, de la altura de la fila.

Para que quepa junto a las filas de primer nivel, todo el árbol queda 12 píxeles más a la derecha mientras esto esté encendido; nada salta al seleccionar.

Collapse all but the selection

El botón junto al Fold de Etch, arriba del panel — el de la imagen de arriba. Cierra las carpetas abiertas que no llevan al elemento seleccionado y deja su fila en la mitad; las carpetas que hay dentro de las que cierra quedan como las dejaste. Qué carpetas están abiertas no se guarda con la página. Sin nada seleccionado, el botón no está disponible.

Collapse on selection, cuando la enciendes, hace lo mismo por sí sola cada vez que haces clic en un elemento del lienzo. Seleccionar una fila en el panel no pliega nada, así que las carpetas que abres mientras recorres el árbol siguen abiertas; el botón sigue ahí para cuando quieras ordenarlo.

Full names on hover

Un nombre que acaba en «…» se ve completo, en una etiqueta emergente, mientras lo señalas — sólo los que de verdad están cortados.

El campo Content que crece

La caja Content de un elemento es de una sola línea en Etch, así que un texto largo se corta en el borde y sólo se lee moviendo el cursor por dentro. Con esto encendido crece con el texto, hasta diez líneas, y tiene un tirador para hacerla más alta — como los campos de texto de las propiedades de un componente.

El contenido sigue siendo una línea: Enter no añade saltos, y uno pegado se convierte en espacio. Lo que escribes pasa por el campo del propio Etch, así que deshacer, rehacer y guardar funcionan como siempre.

La barra del CSS que se alcanza

En un panel estrecho la mayoría de los iconos sobre el editor de CSS quedan fuera de la vista, y Etch oculta la barra de desplazamiento de esa fila, así que la rueda del ratón no hace nada. Con esto encendido la rueda la mueve de lado, puedes arrastrarla —un arrastre no pulsa el botón en el que empieza— y el borde se difumina mientras queden iconos a ese lado.

Apagarlas desde el código

Cada interruptor tiene su filtro, y el filtro gana: lo que guardó la pantalla es sólo su valor por defecto. Sirve para un sitio que lleva sus ajustes en wp-config.php o en un plugin, y para apagar algo para todo el mundo menos para ti.

// Sin línea junto a la fila seleccionada en este sitio.
add_filter( 'fancy_etch/etch/selection_mark', '__return_false' );

Mejora	Filtro
Keyframes inside classes	fancy_etch/etch/keyframes
Follow the selection	fancy_etch/etch/structure_follow
Collapse all but the selection	fancy_etch/etch/collapse_others
Collapse on selection	fancy_etch/etch/collapse_auto
Full names on hover	fancy_etch/etch/row_titles
Content field that grows	fancy_etch/etch/content_field
Scrollable CSS toolbar	fancy_etch/etch/css_toolbar_scroll
Mark the selected row	fancy_etch/etch/selection_mark

Cada uno recibe un booleano y nada más.