Diseñando estilos

En XF2 se ha introducido una nueva vía para generar y editar estilos denominada "Modo diseñador". El modo diseñador es una colección de herramientas CLI que permiten modificar ciertas plantillas en un estilo directamente en el sistema de archivos. También obtiene diversa información y metadatos sobre las propiedades del estilo lo que es útil para controlar la versión y la colaboración.

Activar el modo diseñador

El primer paso para activar el modo diseñador es activarlo en el archivo config.php:

$config['designer']['enabled'] = true;
                

Opcionalmente, puede indicarse una ruta diferente para los archivos del modo diseñador que existen en el sistema de archivos. La siguiente representa la ruta predeterminada. Para cambiarla hay que agregar lo siguienmte en el archivo config.php y modificar la ruta de forma acorde:

$config['designer']['basePath'] = 'src/styles';
                

Activar el modo diseñador para un estilo

El modo diseñador debe activarse explícitamente para cada estilo. Se activa para un estilo utilizando CLI y especificando el ID del estilo y eligiendo un "ID de modo diseñador":

El ID del modo diseñador es el identificador que se utilizará en comandos relativos al modo diseñador. Una vez activado, Los componentes actuales modificados se exportarán al directorio [basePath]/[designer_mode_id].

Al activar el modo diseñador para este estilo, si ya existe ese directorio se podrá elegir entre sobreescribirlo o sobreescribir el estilo desde el contenido actual de ese directorio.

Desactivar el modo diseñador de un estilo

Para desactivar el modo diseñador para un estilo, habrá que ejecutar el siguiente comando CLI:

Por defecto, esto mantendrá una copia de la salida del modo diseñador en el sistema de archivos. Para eliminar los datos, habrá que ejecutar el mismo comando con la opción --clear:

¿Qué se obtiene y donde?

Es importante recordar que un estilo en XF solo consiste en lo que modificado en el estilo. Esto hace que lo que el modo diseñador obtiene solo consistirá en aquello que se ha modificado en el estilo. No se obtienen las plantillas y propiedades del estilo modificadas en un estilo primario.

Plantillas

Las plantillas se obtendrán en el directorio [basePath]/[designer_mode_id]/templates. Dentro de este podrán tenerse un directorio por cada tipo (ej. admin, email y público).

Las plantillas se obtienen en formato HTML y son directamente editables en el sistema de archivos. Los cambios realizados en el sistema de archivos se importan y compilan cuando se carga la plantilla en una página. Similarmente, puede revertirse una plantilla eliminándola del sistema de archivos (si se había modificado previamente).

Propiedades del estilo y grupos

Se obtienen las propiedades del estilo y grupos en los directorios [basePath]/[designer_mode_id]/style_properties y [basePath]/[designer_mode_id]/style_property_groups. Se exportan en formato JSON y sirven como una útil vía para monitorizar los cambios a estos archivos mediante el sistema de control de versiones.

No se recomienda modificar directamente estos archivos ya que sus cambios no se importan automáticamente como ocurre con las plantillas.

Modificar una plantilla específica

Téngase en cuenta que un estilo representa sólamente a los componentes modificados en ese estilo, cuando está activado el modo diseñador, el sistema de archivos contendrá además sólamente aquellos componentes modificados en ese estilo. No es posible obtener la versión efectiva de cada plantilla y propiedad del estilo.

Puede marcarse una plantilla como modificada en un estilo editando por la vías usual en el panel de control de administración. Las plantillas y propiedades del estilo modificadas en el PCA se escribirán directa y automáticamente en el sistema de archivos si está activado el modo diseñador. Sin embargo, si se cree más conveniente modificarla o "retocarla" habrá que utilizar el comando CLI:

Siempre que la plantilla especificada exista en un estilo primario o en el maestro, podrá copiarse al estilo actual y obtenerla para el sistema de archivos. Puede modificarse directamente la plantilla en el sistema de archivos.

Si se desea crear una plantilla completamente personalizada en el estilo (que no existe en ningún otro estilo del árbol), puede usarse el mismo comando y solo pasar la opción --custom:

Otros comandos útiles

Existe un número de comandos útiles relativos al modo diseñador:

Exportar desde la base de datos

Este comando usualmente se ejecuta automáticamente cuando está activado el modo diseñador en un estilo, aunque si se desea sobreescribir por alguna razón la copia del archivo del sistema que hay actualmente en la base de datos, habrá que ejecutar el siguiente comando:

También es posible exportar tipos específicos sólamente, ej. xf-designer:export-templates.

Importar del sistema de archivos

Este comando sobreescribirá la copia del estilo en la base de datos con el que haya en el sistema de archivos:

También es posible importar tipos específicos sólamente, ej. xf-designer:import-templates.

Sincronizar plantillas

Este comando es similara importar plantillas (véase más arriba) pero en lugar de sobreescribir cada cosa sólo importa plantillas y las recompila si han cambiado los metadatos. También se aplica la actualización del número de versión acordemente.

Revertir plantillas

Este comando puede utilizarse para revertir una plantilla, eliminando la versión personalizada del estilo actual.

También es posible revertir eliminando la plantilla del sistema de archivos.