Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gutenberg el futuro de WordPress

91 views

Published on

¿Es Gutenberg el futuro de WordPress? o ¿Es Gutenberg el fin de WordPress? Creo que Gutenberg es el futuro de WordPress y en esta ponencia trataré de explicar cómo nos afecta a tod@s su implementación en la versión 5.0 de WordPress. Complementaré la ponencia incluyendo todo tipo de recursos disponibles para Gutenberg, es decir webs, artículos, cursos, plugins, blocks, etc..

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Gutenberg el futuro de WordPress

  1. 1. G U T E N B E R G E L F U T U R O D E W O R D P R E S S @JAVIDANIA.COM #WCIRUN
  2. 2. J O S É Á N G E L V I D A N I A V D E V I D A N I A . C O M @ J A V I D A N I A # W C I R U N A P R E N D E G U T E N B E R G . C O M
  3. 3. ¿ Q U É E S G U T E N B E R G ? @JAVIDANIA.COM #WCIRUN El nuevo editor de bloques de WordPress que se implementará en la versión 5.0
  4. 4. ¿ E L F I N D E W O R D P R E S S ? @JAVIDANIA.COM #WCIRUN
  5. 5. E L F U T U R O D E W O R D P R E S S @JAVIDANIA.COM #WCIRUN Gutenberg ha venido para quedarse.
  6. 6. ¿A QUIÉN AFECTARÁ GUTENBERG? Diseñadores Desarrolladores Usuarios @JAVIDANIA.COM #WCIRUN Gutenberg nos afectará a tod@s.
  7. 7. D I S E Ñ A D O R E S @JAVIDANIA.COM #WCIRUN
  8. 8. E S T I L O S C S S @JAVIDANIA.COM #WCIRUN En Gutenberg podemos definir dos tres hojas de estilo. Style.scss Edit.scss Themes.scss
  9. 9. C L A S E C S S A D I C I O N A L @JAVIDANIA.COM #WCIRUN En el Inspector de controles se puede incluir una clase CSS adicional para dar estilo al bloque.
  10. 10. A D D T H E M E S U P P O R T @JAVIDANIA.COM #WCIRUN add_theme_support( ‘editor-color-palette’)
  11. 11. A D D T H E M E S U P P O R T @JAVIDANIA.COM #WCIRUN add_theme_support( ‘disable-custom-color’)
  12. 12. A D D T H E M E S U P P O R T @JAVIDANIA.COM #WCIRUN add_theme_support( ‘align-wide’ );
  13. 13. E N C O L A R E S T I L O S A L E D I T O R @JAVIDANIA.COM #WCIRUN wp_enqueue_style( 'vdv-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' );
  14. 14. P E R S O N A L I Z A D O R @JAVIDANIA.COM #WCIRUN Customizing The Future - Mel Choyce https://youtu.be/k_ESRtMksLQ
  15. 15. T E M A S P A R A G U T E N B E R G @JAVIDANIA.COM #WCIRUN https://github.com/WordPress/gutenberg-starter-theme
  16. 16. T E M A S C O M P A T I B L E S @JAVIDANIA.COM #WCIRUN Todos los temas son compatibles con Gutenberg, pero…
  17. 17. D E S A R R O L L A D O R E S @JAVIDANIA.COM #WCIRUN
  18. 18. R E A C T @JAVIDANIA.COM #WCIRUN React es la librería de JS sobre la que está desarrollado Gutenberg. Si sabes JavaScript, sabes desarrollar bloques de Gutenberg.
  19. 19. R E G I S T E R B L O C K T Y P E @JAVIDANIA.COM #WCIRUN // Registering my block with a unique name registerBlockType( 'my-plugin/book', {} ); registerBlockType() es la función para crear bloques.
  20. 20. R E G I S T E R B L O C K T Y P E @JAVIDANIA.COM #WCIRUN La función registerBlockType() tiene varios ajustes. Title * Description Category * Icon Keywords Attributes Transforms useOnce Parent ??? Supports Edit * Save *
  21. 21. T I P O S D E B L O Q U E @JAVIDANIA.COM #WCIRUN En Gutenberg podemos crear tres tipos de bloque. Bloque Estático Bloque Editable Bloque Dinámico
  22. 22. B L O Q U E E S T Á T I C O @JAVIDANIA.COM #WCIRUN No se puede editar el contenido del bloque.
  23. 23. @JAVIDANIA.COM #WCIRUN B L O Q U E E D I T A B L E Se puede editar el contenido del bloque.
  24. 24. B L O Q U E D I N Á M I C O @JAVIDANIA.COM #WCIRUN Guarda ajustes, no contenido. El contenido es dinámico.
  25. 25. T O O L B A R S & I N S P E C T O R @JAVIDANIA.COM #WCIRUN En el ajuste de editar podemos añadir Toolbars, Tooltips e Inspector de Controles.
  26. 26. B L O C K T E M P L A T E S @JAVIDANIA.COM #WCIRUN Son plantillas reutilizables creadas con bloques predefinidos.
  27. 27. P L U G I N S C O M P A T I B L E S @JAVIDANIA.COM #WCIRUN https://plugincompat.danielbachhuber.com/ Desconocido - 80.8% No Compatible - 1.6% Compatibles - 16.3% En Pruebas - 1.3% Datos: 21 Mayo de 2018
  28. 28. U S U A R I O S @JAVIDANIA.COM #WCIRUN
  29. 29. ¡ P R U E B A G U T E N B E R G ! @JAVIDANIA.COM #WCIRUN En la versión 4.9.6 4.9.7 estaremos a dos clicks de probar Gutenberg.
  30. 30. ¡ N O A C T U A L I C E S S I N P R O B A R ! @JAVIDANIA.COM #WCIRUN
  31. 31. ¡ Y O Q U I E R O A C T U A L I Z A R ! @JAVIDANIA.COM #WCIRUN
  32. 32. ¡ L A L I A M O S ! @JAVIDANIA.COM #WCIRUN
  33. 33. P L U G I N C L A S S I C E D I T O R @JAVIDANIA.COM #WCIRUN https://wordpress.org/plugins/classic-editor/
  34. 34. G U T E N B E R G V S T I N Y M C E @JAVIDANIA.COM #WCIRUN El nuevo editor de bloques tiene una interfaz diferente a la que estamos habituados con Tiny MCE.
  35. 35. I N T E R F A Z D E G U T E N B E R G @JAVIDANIA.COM #WCIRUN Será muy fácil crear contenido en el nuevo editor, pero nos llevará un tiempo acostumbrarnos a donde está cada cosa.
  36. 36. B A R R A S D E H E R R A M I E N T A S @JAVIDANIA.COM #WCIRUN Nos ayudarán a la hora de trabajar con los bloques.
  37. 37. I N S P E C T O R D E C O N T R O L E S @JAVIDANIA.COM #WCIRUN Nos muestra los ajustes que se pueden configurar de los bloques.
  38. 38. O P C I O N E S E X T R A @JAVIDANIA.COM #WCIRUN Con estas opciones podremos eliminar, duplicar o reutilizar un bloque.
  39. 39. T A B L A D E C O N T E N I D O S @JAVIDANIA.COM #WCIRUN Gutenberg nos facilita un esquema del documento de nuestro contenido.
  40. 40. B L O Q U E S @JAVIDANIA.COM #WCIRUN Existen cinco categorías predeterminadas de bloque. Common - Comunes Formatting - Formato Layout - Diseño Widgets Embed - Incrustados
  41. 41. B L O Q U E S C O M U N E S @JAVIDANIA.COM #WCIRUN Los bloques más habituales en la creación de contenido.
  42. 42. B L O Q U E S D E F O R M A T O @JAVIDANIA.COM #WCIRUN Si quieres editar con el formato clásico de TINY MCE o usar HTML.
  43. 43. B L O Q U E S D E D I S E Ñ O @JAVIDANIA.COM #WCIRUN El futuro de Gutenberg como editor visual reside en las columnas.
  44. 44. B L O Q U E S D E W I D G E T S @JAVIDANIA.COM #WCIRUN Los widgets y shortcodes son los bloques dinámicos de Gutenberg.
  45. 45. B L O Q U E S I N C R U S T A D O S @JAVIDANIA.COM #WCIRUN Nos ayudarán a mostrar de forma rápida contenidos de terceros.
  46. 46. B L O Q U E S C O M P A R T I D O S @JAVIDANIA.COM #WCIRUN Se pueden reutilizar una y otra vez.
  47. 47. R E C U R S O S @JAVIDANIA.COM #WCIRUN Gutenberg Repo - https://github.com/WordPress/gutenberg Gutenberg Handbook - https://wordpress.org/gutenberg/handbook/ Gutenberg Sketch - https://github.com/Automattic/gutenberg-themes-sketch Create Guten Block - https://github.com/ahmadawais/create-guten-block Gutenberg Examples - https://github.com/WordPress/gutenberg-examples Frontenberg - https://frontenberg.tomjn.com/ Aprende Gutenberg - https://www.aprendegutenberg.com/ Human Made - https://hmn.md/white-papers/gutenberg-the-new-wordpress-editor/
  48. 48. P L U G I N S @JAVIDANIA.COM #WCIRUN Gutenberg Manager - https://wordpress.org/plugins/manager-for-gutenberg/ Unregister Gutenberg Blocks - https://wordpress.org/plugins/unregister-gutenberg-blocks/ Atomic Blocks - https://atomicblocks.com/ Caxton - https://wordpress.org/plugins/caxton/ Advanced Gutenberg Blocks - https://wordpress.org/plugins/advanced-gutenberg-blocks/ Wootenberg - https://wordpress.org/plugins/woo-gutenberg-products-block/ Disable Gutenberg - https://wordpress.org/plugins/disable-gutenberg/ Custom Fields for Gutenberg - https://wordpress.org/plugins/custom-fields-gutenberg/
  49. 49. E L F U T U R O D E W O R D P R E S S @JAVIDANIA.COM #WCIRUN Al final tod@s acabaremos amando Gutenberg.
  50. 50. F E R N A N D O T E L L A D O @ F E R N A N D O T # W C I R U N A Y U D A W P . C O M
  51. 51. G U T E N B E R G P R O S Y C O N T R A S @JAVIDANIA.COM #WCIRUN@FERNANDOT
  52. 52. E D I C I Ó N V I S U A L @JAVIDANIA.COM #WCIRUN El editor visual es una necesidad en los tiempos que corren @FERNANDOT
  53. 53. ¿ M A Q U E T A C I Ó N D E E N T R A D A S ? AYUDAWP.COM #WCIRUN ¿No hablamos quedado en que la maquetación es diseño? @FERNANDOT
  54. 54. N O R O M P E R Á T U C O N T E N I D O @JAVIDANIA.COM #WCIRUN Al instalar Gutenberg mantendrás todo tu antiguo contenido intacto. @FERNANDOT
  55. 55. ¿ D Ó N D E Q U E D Ó E L E S C R I T O R ? #WCIRUN Cada acción de edición conlleva más clicks. @FERNANDOTAYUDAWP.COM
  56. 56. A D I Ó S E F E C T O L O C K - I N @JAVIDANIA.COM #WCIRUN Si desinstalas Gutenberg o usas el plugin Classic Editor no habrá efecto Lock-In. @FERNANDOT
  57. 57. S E P U E D E D E S A C T I VA R : ) #WCIRUN es.wordpress.org/plugins/no-gutenberg @FERNANDOTAYUDAWP.COM
  58. 58. H T M L 5 @JAVIDANIA.COM #WCIRUN Gutenberg utiliza comentarios HTML5, una forma limpia y semántica @FERNANDOT
  59. 59. C O P I A R C O N T E N I D O @JAVIDANIA.COM #WCIRUN La rutina de copiado y pegado de contenidos se ha mejorado @FERNANDOT
  60. 60. ¿ Y L A A C C E S I B I L I D A D ? #WCIRUN Ningún lector de pantalla puede leer bloques. @FERNANDOTAYUDAWP.COM
  61. 61. J A VA S C R I P T @JAVIDANIA.COM #WCIRUN Gutenberg al utilizar JavaScript abre un nuevo mundo a los desarrolladores. @FERNANDOT
  62. 62. P L U G I N S N O C O M P A T I B L E S #WCIRUN La decisión improvisada generará una brecha digital. @FERNANDOTAYUDAWP.COM
  63. 63. U N P R O Y E C T O D E T O D @ S @JAVIDANIA.COM #WCIRUN Si eres diseñador o desarrollador puedes colaborar en el proyecto en github.com @FERNANDOT
  64. 64. U N P R O Y E C T O M A T T D R I V E N #WCIRUN ¿WordPress no era community driven? @FERNANDOTAYUDAWP.COM
  65. 65. E L F U T U R O D E W O R D P R E S S #WCIRUN Al final tod@s acabaremos amando Gutenberg. @JAVIDANIA.COM @FERNANDOT … o no
  66. 66. ¡ G R A C I A S A T O D @ S ! V D E V I D A N I A . C O M @ J A V I D A N I A # W C I R U N ¡ E S K E R R I K A S K O ! #WCIRUN A Y U D A W P . C O M @ F E R N A N D O T

×