Frontend Editing
Un módulo ligero que permite editar entidades directamente en el frontend usando un panel lateral, sin depender de los módulos Settings Tray, Contextual Links o Quick Edit del core.
frontend_editing
Install
composer require 'drupal/frontend_editing:^1.9'
Overview
Frontend Editing proporciona una forma simplificada de editar entidades de contenido directamente desde el frontend de tu sitio Drupal. A diferencia de las soluciones de edición integradas en el core, este módulo utiliza un panel lateral que carga los formularios de edición de entidades como iframes, garantizando una experiencia editorial consistente entre la edición en el frontend y el backend.
El módulo añade enlaces de acción a los tipos de entidad habilitados que abren sus formularios de edición en una barra lateral configurable. Soporta campos de referencia de entidades con funcionalidades como reordenar elementos (mover arriba/abajo), añadir nuevas entidades referenciadas y eliminar referencias existentes, todo desde el frontend sin necesidad de navegar fuera de la página.
El módulo se integra bien con el módulo Paragraphs a través de su submódulo dedicado (Frontend Editing Paragraphs), lo que lo hace ideal para la edición de contenido al estilo constructor de páginas. También soporta funcionalidad de vista previa en vivo cuando se usa con el módulo Preview, permitiendo a los editores ver los cambios en tiempo real antes de guardar.
Features
- Editar cualquier entidad de contenido directamente desde el frontend usando un panel lateral configurable
- Operaciones en campos de referencia de entidades: mover elementos arriba/abajo, añadir nuevos elementos antes/después de los existentes, eliminar elementos
- Actualizaciones de contenido impulsadas por AJAX que refrescan solo el área del campo afectado sin recargar la página
- Integración de vista previa en vivo cuando se usa con el módulo Preview para visualización de cambios en tiempo real
- Botón de alternancia de interfaz configurable para habilitar/deshabilitar acciones de edición frontend por sesión de usuario
- Ajustes de ancho de barra lateral personalizables para vistas normal y expandida
- Modo de resaltado al pasar el cursor para mejor indicación visual de elementos editables
- Color primario de interfaz personalizable para coincidir con el diseño de tu sitio
- Opción de separar la edición de la barra lateral a una ventana de navegador independiente
- Función de enlaces de acción duplicados para áreas de contenido largas para mantener las acciones visibles
- Opción de enlaces de acción flotantes (fijos) como alternativa a los enlaces duplicados
- Diálogo de añadir elementos con búsqueda cuando hay muchos tipos de bundle para elegir
- Configuración por campo a través de ajustes de terceros del formateador
- Integración con el tema Gin para estilos de administración consistentes
- Ocultación opcional de enlaces contextuales cuando Frontend Editing está activo
- Plugin de campo extra que puede posicionarse en cualquier vista de display para mostrar acciones de edición
Use Cases
Edición de contenido de constructor de páginas
Ideal para sitios que usan Paragraphs como constructor de páginas. Los editores de contenido pueden añadir, editar, reordenar y eliminar componentes de párrafo directamente desde la vista de página sin navegar al formulario de edición del nodo. Habilita el submódulo Frontend Editing Paragraphs, configura tus campos de referencia de entidad de párrafo con operaciones de mover/añadir/eliminar, y los editores pueden gestionar diseños complejos en el lugar.
Actualizaciones rápidas de contenido
Para sitios que necesitan actualizaciones rápidas de contenido, Frontend Editing permite a los editores hacer clic en cualquier entidad editable y comenzar inmediatamente a editar en un panel lateral. Esto es especialmente útil para corregir errores tipográficos, actualizar texto o hacer cambios rápidos sin perder el contexto de dónde aparece el contenido en la página.
Flujo de trabajo de revisión editorial
Cuando se combina con el módulo Preview, los editores pueden ver vistas previas en vivo de sus cambios antes de guardar. Esto crea un flujo de trabajo donde el contenido puede revisarse en contexto, facilitando detectar problemas de diseño o errores de contenido antes de publicar.
Edición de páginas con múltiples entidades
Para páginas que muestran múltiples entidades (como una página de destino con múltiples referencias de bloques o elementos multimedia), Frontend Editing permite editar cada entidad individualmente sin un formulario de edición padre complejo. Cada entidad muestra su propio enlace de edición, y los cambios se guardan de forma independiente.
Acceso restringido para editores
Usa los permisos granulares para dar a los editores capacidades limitadas. Por ejemplo, algunos usuarios podrían solo poder editar contenido existente mientras otros también pueden añadir y eliminar referencias de entidad. Los permisos separados para operaciones de mover, añadir y eliminar permiten un control de acceso detallado.
Tips
- Posiciona el campo extra 'Frontend Editing: Actions' en la parte superior de las vistas de display de tu entidad para mejor visibilidad.
- Usa el ajuste 'Modo de resaltado al pasar' para hacer las áreas editables más visualmente distintivas, especialmente útil para editores de contenido.
- Configura el color primario de interfaz para que coincida con la marca de tu sitio para una experiencia editorial cohesiva.
- Para áreas de contenido largas (como páginas con muchos párrafos), habilita 'Duplicar enlaces de acción' o 'Hacer los enlaces de acción fijos' para mantener visibles los controles de edición.
- Usa el botón de alternancia de interfaz para permitir que los editores deshabiliten fácilmente Frontend Editing cuando naveguen el sitio como un visitante regular.
- El ajuste de visualización de formulario en el plugin de campo extra te permite usar diferentes visualizaciones de formulario (formularios simplificados) para edición frontend vs. el formulario de edición completo del backend.
- Habilita la actualización de contenido AJAX en campos de referencia de entidad para refrescar solo esa área del campo después de las operaciones en lugar de recargar toda la página.
Technical Details
Admin Pages 2
/admin/config/frontend-editing
Configurar los ajustes principales de Frontend Editing incluyendo apariencia de la barra lateral, opciones de alternancia de interfaz y comportamiento de enlaces de acción.
/admin/config/frontend-editing/entity-bundle-restrictions
Seleccionar qué tipos de entidad de contenido y sus bundles deben soportar edición frontend. Después de guardar, el campo extra 'Frontend Editing: Actions' estará disponible en la página Manage Display para los bundles habilitados.
Permissions 5
Hooks 5
hook_entity_view_alter
Altera la vista de entidad para añadir acciones de edición frontend y configurar operaciones de campo basadas en ajustes de terceros del formateador.
hook_field_formatter_third_party_settings_form
Añade opciones de configuración de Frontend Editing a los formateadores de campos de referencia de entidad en las páginas de Manage Display.
hook_extra_field_display_info_alter
Altera la información de visualización del campo extra para establecer dinámicamente en qué bundles está disponible el campo extra de Frontend Editing.
hook_gin_content_form_routes_alter
Añade la ruta frontend_editing.form a las rutas de formulario de contenido del tema Gin para estilos consistentes.
hook_toolbar
Añade el alternador de edición frontend a la barra de herramientas de administración cuando la alternancia de interfaz está deshabilitada.
Troubleshooting 7
Asegúrate de que el tipo de entidad y bundle estén habilitados en /admin/config/frontend-editing/entity-bundle-restrictions. Luego ve a la página Manage Display de la entidad y habilita/posiciona el campo extra 'Frontend Editing: Actions'.
Estas operaciones requieren configuración por campo. Edita la visualización de vista de la entidad, haz clic en el icono de engranaje del formateador del campo de referencia de entidad, y habilita las opciones de Frontend Editing deseadas en la sección de ajustes de terceros.
Habilita el submódulo Frontend Editing Paragraphs. Esto requiere que el módulo Paragraphs Edit esté instalado primero. Sin este submódulo, los tipos de entidad de párrafo están deshabilitados en la configuración.
Instala y habilita el módulo Preview. Luego habilita los tipos de entidad para vista previa en los ajustes del módulo Preview. Finalmente, habilita 'Vista previa automática' en los ajustes de Frontend Editing.
Asegúrate de que 'Habilitar alternancia encendido/apagado en la interfaz' esté marcado en los ajustes de Frontend Editing. La alternancia aparece en la barra de herramientas (cuando la alternancia de interfaz está deshabilitada) o como un botón flotante (cuando está habilitada). Verifica los ajustes de desplazamiento para asegurarte de que esté posicionado visiblemente.
Ajusta los ajustes de 'Ancho de barra lateral' y 'Ancho completo' en /admin/config/frontend-editing. Los valores son porcentajes del ancho del viewport.
Por defecto, los campos de referencia de párrafo no soportan traducciones. Si la entidad padre es traducible y estás editando una traducción no predeterminada, estas operaciones están deshabilitadas a menos que el campo esté configurado como traducible (usando módulos de traducción asíncrona).
Security Notes 5
- El permiso 'administrar edición frontend' solo debe otorgarse a administradores de confianza ya que controla qué tipos de entidad pueden editarse desde el frontend.
- Todas las operaciones de edición de entidad respetan las verificaciones de acceso de entidad estándar de Drupal - los usuarios solo pueden editar entidades para las que tienen permiso de actualización.
- El módulo verifica tanto el acceso a nivel de entidad como a nivel de campo para todas las operaciones.
- La protección CSRF se mantiene a través de la API de formularios de Drupal al editar entidades.
- El acceso a operaciones de mover, añadir y eliminar requiere tanto el permiso específico de Frontend Editing COMO acceso de actualización a la entidad padre.