Skip to content

Instantly share code, notes, and snippets.

View mtias's full-sized avatar

Matias Ventura mtias

View GitHub Profile
@mtias
mtias / gutenberg-internal.js
Created July 29, 2021 13:15
How Gutenberg works witihin.
{
"name": "core/paragraph",
"attributes": {
"className": "my-text",
"content": {
"formats": (23) [empty × 6, Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), empty, Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), Array(1), empty]
"replacements": (23) [empty × 23]
"text": "Hello World! Read more."
},
"dropCap": false
<!-- wp:separator -->
<hr class="wp-block-separator" />
<!-- /wp:separator -->
<!-- wp:paragraph {"align":"center","customFontSize":25} -->
<p style="font-size:25px;text-align:center"><em>Que trata de la condición y ejercicio del famoso hidalgo D. Quijote de la Mancha</em></p>
<!-- /wp:paragraph -->
<!-- wp:separator -->
<hr class="wp-block-separator" />

¡Hola! 🐻

If you like to write markdown, you should know that Gutenberg allows you to paste markdown text directly and it will be converted to native blocks instantly.

  • Including 🍎
  • Lists 🍇
  • Like this one 🍑

It is able to recognize quotes as well.

@mtias
mtias / template.php
Last active January 19, 2018 16:39
Template
<body>
<?php
do_blocks( array(
// Theme header
array( 'theme/header' ),
array( 'core/image' ),
array( 'core/heading', array(
'placeholder' => 'Add Author...',
'className' => 'my-custom-class',
<?php
$parser = new Gutenberg_PEG_Parser;
$blocks = $parser->parse( get_post( $post_id )->post_content );
// ordered array of blocks in the post
// each block has the following keys
//
// 0 => string 'blockName'
// 1 => string 'attrs'
@mtias
mtias / block.js
Created June 23, 2017 18:11
Creating a Gutenberg block from the console.
var el = wp.element.createElement;
wp.blocks.registerBlockType( 'mytheme/block', {
title: 'Red Block',
icon: 'universal-access-alt',
category: 'layout',
edit: function() {
return el( 'div', { style: { backgroundColor: '#900', color: '#fff', padding: '20px' } }, 'I am a red block.' );
},
save: function() {
@mtias
mtias / WP Post Doc
Created December 21, 2016 14:52
An example post
## Grammar
<!-- wp:x y:z -->
Content
<!-- /wp -->
### Text
<!-- wp:text -->
The quick brown fox jumps over the lazy dog.
<!-- /wp -->

Directory

client
|— components
|— stores
   |— app.js
   |— {subject}
      |— index.js (reducers)
 |— actions.js
/client
/auth
/boot
/layout
/manage
/posts
/sites
/pages
index.js
sidebar.js
/*
* Authorization module.
*
* @Routes /authorize
* /login
* /logout
*/
var auth = require( 'auth' );