gutenberg wcgranada definitiva - 2018.granada.wordcamp.org · estilos css los bloques de gutenberg...
TRANSCRIPT
![Page 1: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/1.jpg)
G U T E N B E R G
@JAVIDANIA.COM #WCGRANADA
Y L O S T E M A S
![Page 2: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/2.jpg)
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 G R A N A D A
A P R E N D E G U T E N B E R G . C O M
![Page 3: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/3.jpg)
¿ E S M I T E M A C O M P A T I B L E ?Todos los temas del repositorio son compatibles con Gutenberg
@JAVIDANIA.COM #WCGRANADA
![Page 4: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/4.jpg)
¿ E S M I B U I L D E R C O M P A T I B L E ?Divi, Visual Composer, Site Origin, Elementor, Beaver Builder…
@JAVIDANIA.COM #WCGRANADA
![Page 5: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/5.jpg)
¡ M I T E M A N O E S “ C O M P A T I B L E ” !
@JAVIDANIA.COM #WCGRANADA
![Page 6: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/6.jpg)
E S T I L O S C S SLos bloques de Gutenberg se rigen por dos tres hojas de estilo.
Editor.css Style.css Theme.css
@JAVIDANIA.COM #WCGRANADA
![Page 7: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/7.jpg)
E S T I L O S C S SSe encuentran en la carpeta Block Library del plugin de Gutenberg
@JAVIDANIA.COM #WCGRANADA
![Page 8: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/8.jpg)
E N C O L A R E S T I L O S C O M U N E S
@JAVIDANIA.COM #WCGRANADA
enqueue_block_assets
![Page 9: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/9.jpg)
C L A S E C S S A D I C I O N A LPuedes incluir una clase CSS adicional para dar estilo al bloque.
@JAVIDANIA.COM #WCGRANADA
![Page 10: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/10.jpg)
A D D T H E M E S U P P O R T
add_theme_support( ‘editor-color-palette’ ); add_theme_support( ‘disable-custom-colors’ );add_theme_support( ‘align-wide’ );add_theme_support( ‘editor-font-sizes’ );add_theme_support( ‘disable-custom-font-sizes’ );add_theme_support( ‘editor-styles’ );add_theme_support( ‘dark-editor-style’ );add_theme_support( ‘wp-block-styles’ );add_theme_support( ‘responsive-embeds’ );
@JAVIDANIA.COM #WCGRANADA
![Page 11: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/11.jpg)
P A L E T A D E C O L O R E S
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-color-palette’ );
![Page 12: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/12.jpg)
A R R A Y P A L E T A D E C O L O R E S
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-color-palette’ );
![Page 13: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/13.jpg)
P A L E T A D E C O L O R E S P R O P I A
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-color-palette’ );
![Page 14: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/14.jpg)
C L A S E S P A L E T A D E C O L O R E S
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-color-palette’ );
![Page 15: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/15.jpg)
D E S H A B I L I T A R S E L E C T O R C O L O R
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘disable-custom-colors’ );
![Page 16: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/16.jpg)
A L I N E A M I E N T O S D E I M Á G E N E Sadd_theme_support( ‘align-wide’ );
@JAVIDANIA.COM #WCGRANADA
![Page 17: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/17.jpg)
C L A S E S A L I N E A M I E N T O S
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘align-wide’ );
![Page 18: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/18.jpg)
T A M A Ñ O D E F U E N T E S
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-font-sizes’ );
![Page 19: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/19.jpg)
A R R A Y T A M A Ñ O D E F U E N T E S
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-font-sizes’ );
![Page 20: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/20.jpg)
C L A S E S T A M A Ñ O S D E F U E N T E S
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-font-sizes’ );
![Page 21: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/21.jpg)
D E S H A B I L I T A R T A M A Ñ O F U E N T E S
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘disable-custom-font-sizes’ );
![Page 22: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/22.jpg)
E S T I L O S D E L E D I T O R
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-styles’ );
![Page 23: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/23.jpg)
E S T I L O S D E L E D I T O R O S C U R O
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-styles’ );
add_theme_support( ‘dark-editor-styles’);
![Page 24: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/24.jpg)
E N C O L A R E S T I L O S D E L E D I T O R
@JAVIDANIA.COM #WCGRANADA
enqueue_block_editor_assets
![Page 25: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/25.jpg)
E S T I L O S D E L E D I T O R
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘editor-styles’ );
![Page 26: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/26.jpg)
E S T I L O S D E L O S B L O Q U E S
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘wp-block-styles’ );
![Page 27: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/27.jpg)
I N C R U S T A D O S R E S P O N S I V E
@JAVIDANIA.COM #WCGRANADA
add_theme_support( ‘responsive-embeds’ );
![Page 28: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/28.jpg)
¡ M I T E M A E S “ C O M P A T I B L E ” !
@JAVIDANIA.COM #WCGRANADA
![Page 29: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/29.jpg)
A Ñ A D E A D D _ T H E M E _ S U P P O R Thttps://wordpress.org/plugins/enable-gutenberg-theme-support/
@JAVIDANIA.COM #WCGRANADA
![Page 30: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/30.jpg)
P R U E B A T O D O S L O S B L O Q U E Shttps://wordpress.org/plugins/block-unit-test/
@JAVIDANIA.COM #WCGRANADA
![Page 31: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/31.jpg)
B L O C K T E M P L A T E S
@JAVIDANIA.COM
Son plantillas de bloques predefinidos que irán unidas a Page Templates.
#WCGRANADA
![Page 32: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/32.jpg)
T E M A S P A R A G U T E N B E R Ghttps://github.com/WordPress/twentynineteen
@JAVIDANIA.COM #WCGRANADA
![Page 33: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/33.jpg)
T E M A S P A R A G U T E N B E R Ghttps://github.com/WordPress/gutenberg-starter-theme
@JAVIDANIA.COM #WCGRANADA
![Page 34: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/34.jpg)
T E M A S P A R A G U T E N B E R Ghttps://wordpress.org/themes/atomic-blocks/
@JAVIDANIA.COM #WCGRANADA
![Page 35: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/35.jpg)
T E M A S P A R A G U T E N B E R Ghttps://wordpress.org/themes/coblocks/
@JAVIDANIA.COM #WCGRANADA
![Page 36: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/36.jpg)
T E M A S P A R A G U T E N B E R Ghttps://wordpress.org/themes/editor-blocks/
@JAVIDANIA.COM #WCGRANADA
![Page 37: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/37.jpg)
T E M A S P A R A G U T E N B E R Ghttps://wordpress.org/themes/block-lite/
@JAVIDANIA.COM #WCGRANADA
![Page 38: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/38.jpg)
T E M A S P A R A G U T E N B E R Ghttps://wordpress.org/themes/natural-herbs-lite/
@JAVIDANIA.COM #WCGRANADA
![Page 39: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/39.jpg)
T E M A S P A R A G U T E N B E R Ghttps://www.anarieldesign.com/free-food-blogger-wordpress-theme/
@JAVIDANIA.COM #WCGRANADA
![Page 40: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/40.jpg)
E L F U T U R O D E W O R D P R E S SAl final tod@s acabaremos amando Gutenberg.
@JAVIDANIA.COM #WCGRANADA
![Page 41: Gutenberg WCGranada definitiva - 2018.granada.wordcamp.org · ESTILOS CSS Los bloques de Gutenberg se rigen por dos tres hojas de estilo. Editor.css Style.css Theme.css @JAVIDANIA.COM](https://reader035.vdocuments.pub/reader035/viewer/2022062415/5fc9fad3eb30386adb16b368/html5/thumbnails/41.jpg)
G R A C I A S A T O D @ S
# W C G R A N A D A
@ J A V I D A N I A
A P R E N D E G U T E N B E R G . C O M
V D E V I D A N I A . C O M