Blocos aninhados e comunicação entre blocos

Transcript

1. Blocos aninhados e comunicação entre blocos JavaScript Engineer | Automattic Jorge Costa
2. Os blocos podem conter um número ilimitado de blocos descendentes. O editor fornece abstracções e gere a área dentro de um bloco que pode conter outros blocos. A área pode ser configurada. É possível criar um bloco que só tem uma InnerBlocks área. Blocos Aninhados
3. Edit Save InnerBlocks wp.blockEditor.InnerBlocks wp.blockEditor.InnerBlocks.Content
4. ( function( blocks, blockEditor, element ) { var el = element.createElement; var InnerBlocks = blockEditor.InnerBlocks; var innerBlocksOptions = {}; blocks.registerBlockType( 'demo/inner-blocks', { title: 'Inner Blocks Demo', category: 'common', attributes: {}, edit: function( props ) { return el( 'div', { className: 'block-inner-blocks-demo'}, el( 'p', {}, 'Before the inner blocks' ), el( 'div', { style: { border: '2px solid red' } }, el( InnerBlocks, innerBlocksOptions ) ), el( 'p', {}, 'After the inner blocks' ), ); }, save: function( props ) { return el( 'div', { className: 'block-inner-blocks-demo'}, el( 'p', {}, 'Before the inner blocks' ), el( 'div', { style: { border: '2px solid red' } }, el( InnerBlocks.Content ) ), el( 'p', {}, 'After the inner blocks’ ), ); }, } ) } ) ( window.wp.blocks, window.wp.blockEditor, window.wp.element );
6. InnerBlocks - Opções oferecidas allowedBlocks template templateLock renderAppender
7. allowedBlocks var innerBlocksOptions = { allowedBlocks: [ 'core/button', 'core/image', 'core/gallery', ] };
8. template var innerBlocksOptions = { template: [ [ 'core/paragraph', { placeholder: PLACEHOLDER } ], [ 'core/image' ], [ 'core/button', { text: BUTTON_TEXT, align: 'center' } ], ] };
9. template var innerBlocksOptions = { template: [ [ 'core/paragraph', { placeholder: PLACEHOLDER } ], [ 'core/image' ], [ 'core/button', { text: BUTTON_TEXT, align: 'center' } ], ] };
10. templateLock All Insert None
11. templateLock var innerBlocksOptions = { template: [ [ 'core/paragraph', { placeholder: PLACEHOLDER } ], [ 'core/image' ], [ 'core/button', { text: BUTTON_TEXT, align: 'center' } ], ], templateLock: 'all' };
12. Permite criar um bloco que só pode ser inserido dentro de um bloco específico. Child Blocks ( function( blocks, element ) { var el = element.createElement; var renderBlock = function() { return el( 'p', {}, 'I only work inside Inner Blocks Demo!' ); }; blocks.registerBlockType( 'demo/inner-blocks-child', { title: 'Child Block Demo', category: 'common', attributes: {}, parent: 'demo/inner-blocks', supports:{ inserter: true, }, edit: renderBlock, save: renderBlock, } ); } ) ( window.wp.blocks, window.wp.element );
13. InnerBlocks - Opções oferecidas Reutilização composição de blocos. Criação simplificada de blocos. Definir o que o utilizador pode fazer por área/secção. Customizar a UI do editor num contexto específico. 1 2 3 4 allowedBlocks template templateLock renderAppender
14. Comunicação entre blocos
15. Alguns pontos de partida props.attributes, props.setAttributes, permite a um bloco ler e modificar os seus próprios atributos. Cada bloco tem um identificador único, props.clientId permite a um bloco saber o seu próprio id.
16. Ler e modificar atributos wp.data.select( 'core/block-editor' ).getBlockAttributes( cliendId ) - Retorna/Lê os atributos. wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( cliendId ) - Modifica os atributos. wp.data.select( 'core/block-editor' ).getBlockAttributes( 'e6106b8d-15f5-4082-be11-ba67b777efd5' ); -> {content: "WordPress", dropCap: false, fontSize: "large"} wp.data.dispatch( 'core/block-editor' ).updateBlockAttributes( 'e6106b8d-15f5-4082-be11-ba67b777efd5', { content: 'New Content' } );
17. wp.data.select( 'core/block-editor' ).getBlocks( clientId ); Obtem os descentes de um bloco. wp.data.select( 'core/block-editor' ).getBlockRootClientId( clientId ) Obtem o id do bloco ascendente. Obter id’s de ascendentes/descendentes
18. Modificar Ler Id asc./desc. Id bloco updateBlockAttributes getBlocks/ getBlockRootClientId getBlockAttributes props.clientId Comunicação entre blocos
19. wp.element.createContext API mais avançada permite comunicação mesmo quando não ocorre mudança de atributos. https://reactjs.org/docs/context.html Contexto
20. Potencialidades Validação Blocos meta dados/schema. Restrições editoriais. UI’s avançadas.
21. jorge.costa@developer.pt twitter.com/JorgeFSCosta profiles.wordpress.org/jorgefilipecosta/