Vue Basics (Worksheet)

Resources & Infos

• Vue
  • unpkg src: https://unpkg.com/vue
• node.js + npm
• Vue CLI: npm install -g @vue/cli

Terminology

• State Management => All data in one place = Store = Single-Source-of-Truth
• SPA / MPA – Single Page Application / Multi Page Application

Vue root instance

new Vue({
   el: '#app',
   data: {
     // supplied data
     entries: datahere
   },
   computed: {
     // computed data, will be updated if data changes
   },
   methods: {
     // custom functions
   }
})

<!-- SCOPE: -->
<div id="app">
   <!-- accessible by vue -->
</div>
<div id="something">
   <!-- NOT accessible by vue -->
</div>

Disabling & changing default Gutenberg features

Only allow certain types of blocks (aka ‚remove‘ blocks)

👉  allowed_block_types hook

add_filter( 'allowed_block_types', 'slug_allowed_block_types' );
 
function slug_allowed_block_types( $allowed_blocks ) {
 
	return array(
		'core/image',
		'core/paragraph',
		'core/heading',
		'core/list'
	);
 
}

Takes $post as a second parameter, so the allowed blocks can be set on a per post-type basis

add_filter( 'allowed_block_types', 'slug_allowed_block_types', 10, 2 );
 
function slug_allowed_block_types( $allowed_blocks, $post ) {
 
	$allowed_blocks = array(
		'core/image',
		// ...
	);

 
	if( $post->post_type === 'page' ) {
		$allowed_blocks[] = 'core/shortcode';
	}
 
	return $allowed_blocks;
 
}

Note:

• block list is empty on default
• allowed blocks per template via if( 'page-template-name.php' == get_page_template_slug( $post ){ ... } but is only aplied when page with template already has been saved.
• for block slug see Misha Rudrastyhs collection
  

Source: Misha Rudrastyh: Removing Default Gutenberg Blocks

Disable default WP block styles

function slug_remove_gutenberg_default_styles() {
	if( !is_admin() ){
		wp_dequeue_style( 'wp-block-library');
	}
}
add_action( 'wp_print_styles', 'slug_remove_gutenberg_default_styles' );

(duplicate of Gutenberg notes entry)

Disable color palettes

// Disable color palette.
add_theme_support( 'editor-color-palette' );

// Disable color picker.
add_theme_support( 'disable-custom-colors' );

Note: As with all add_theme_support methods hook into after_setup_theme

Source: Theme Coder

Block Templates

Predefined blocks per post type.

function slug_add_template_to_page() {
	$post_type_object = get_post_type_object( 'page' );	
	
    $post_type_object->template = array(
        array( 'core/paragraph', array(
            'placeholder' => 'Add Description...',
		) ),
		array( 'core/image', array(
        ) ),
    );
    $post_type_object->template_lock = 'all';
}
add_action( 'init', 'slug_add_template_to_page' );

• ->template-lock :
  • 'all' : prevents all block manipulation (changing order adding, removing)
  • 'insert' : prevents inserting or removing blocks but allows chaning the order
    

Block Templates

See also

• Changing font sizes of the FontSizePicker (note: just calling add_theme_support( 'editor-font-sizes') removes the Buttons (S,M,L,XL) but leaves the reset button
  

Gutenberg Dev

Follwing along Zac Gordons Gutenberg Development Course.

Insert:

• create-guten-block on github (🚀!)
• SVG to JSX converter (for icons)
  • note: Icons should be 20x20px, import or paste them as the icon: property
• Learn Gutenberg Primer on CSS Tricks

The Gutenbergs JS libraries

• wp.element: Abstraction Layer on top of React and React Dom. Used for creating elements inside blocks.
• wp.blocks: Components and functions for building blocks.
• wp.components: Components that can be used for building interfaces within the editor (tooltips, buttons … )
• wp.i18n: For translations, similar to the __() methods in php

All of these libs are accessible globaly (e.g. through the console or other scripts)
To access them within code, use something like

const { __ } = wp.i18n; // using deconstruction

Basic block architecture

Default roadmap:

1. Enque block JS in main plugin/theme file [php]
2. Register block using registerBlockType() [js]
3. Opt. break up block code in components [js]
4. Enque block css [php]

Enque block js + css

• enque_block_edtior_assets: hook for enquing block js+css in the editor (not the frontend). Used to enque the main block js file, or editor-only styles.
• enque_block_assets : hook to enque (mostly) css (and js) for both, the editor and the front end. User for main block styles. Use !is_admin()for front-end-only styles/scripts 

Building blocks

registerBlockType()

wp.blocks.registerBlockType(
  'plugin-name/block-name',
  {
    title: wp.i18n.__('Blocktitle', 'textdomain),
    description: '...',
    category: 'common',
    icon: 'wordpress-alt',
    keywords: [wp.i18n.__('Demo', 'textdomain)],
    supports: { html: false },
    attributes: {} ,
    edit: () => {},
    save: () => {}
  }
);

attributes

Which information to (re-)store and manipulate

attributes {
  message: {
    type: "array",
    source: "children",
    selector: ".classname-of-element"
  },
}

edit

Controls how the block is rendered (and updated) in the editor.
Usualy constists of a return method as well as a method that handles what hapens onChange (e.g. text editing). props ( React, anyone?) are passed on automatically from WP.

edit: props => {
  const {
    attributes: { message },
    className,
    setAttributes
  } = props;
  const onChangeMessage = message => {
    setAttributes({ message });
  };
  return {
    <div className={className}>
      <RichText
        tagName="div"
        multiline="p"
        placeholder={__("Type something ...", "textdomain")}
        onChange={onChangeMessage}
        value={message}
      />
    </div>
  }
}

save

How to save the post – for displaying on the front end and restoring for the editor.

save: props => {
  const {
    attributes: { message }
  } = props;
  return (
    <div>
      <div class="output-feld">{message}</div>
    </div>
   );
}

Update attributes on change

attributes: {
  content: {
    ...
  }
}

edit: props => {
  const { attributes: { content }, setAttributes } = props;
  ...
  return ( 
    <RichText
       ...
       onChange={ content => { setAttributes( { content } ) } }
       value={ content }
    >
);

Data API

wp.data.<STORE_NAME> (stores: „core/editor“, „core/blocks“, „core/editor“ …, to check them out log wp.data.select("<STORE_NAME>") [or dispatch instead of select])
(import: const { <STORE_NAME> } = wp.data)

select

=> get data

select("core/editor").getBlockCount();

subscribe

=> subscribe/listen to status change

subscribe(() => {
  // updated every time the block count changes
  const blockCount = select("core/editor").getBlockCount();
});

Note: subscribe returns a unsubscribe function

const unsubscribe = subscribe(()=>{ /* ... */ });
unsubscribe();

Advanced

Subscribe Class to controll the state handling (otherwise you might want to use withSelect) – more Reactish, less WP abstraction

const { Component } = wp.element;
const { select, subscribe } = wp.data;

    
export default class SubscribeDemo extends Component{

    state = {
        blockCount: "",
    }

    componentDidMount() {
        const unsubscribe = subscribe( () => {
            const blockCount = select("core/editor").getBlockCount();
            this.setState({blockCount});     
        } );
    }

    render() {
        return <p>Block count: {this.state.blockCount}</p>
    }
    
}

Key-Points:

• Extend the Component class (imported from wp.element)
• Manage state object ( => React )
  • call with this.state
  • update with this.setState() [see: React]
• uses componentDidMount()method [see: React]
• use Reacts render() function

withSelect

=> HOC [?] for select, similar to subscribe it will update everytime its values changes

As component:

const WithSelectDemo = ({ blockCount }) => (
    <p>Block Count: {blockCount}</p>
)

export default withSelect( (select, ownProps) => {
    return {
        blockCount: select("core/editor").getBlockCount()
    }
} )(WithSelectDemo);

Explanation / How to read

First code block: Create <WithSelectDemo /> component that takes the current block count as an argument (and prints it)

Second code block: Export withSelect()(WithSelectDemo):

• when <WithSelectDemo />is exported/used …
• it will wrapp everything inside of withSelect()…
• callselect() (getting the block count) …
• create / asign it to a new variable blockCount…
• and make that variable available to the <WithSelectDemo /> component (which takes it as its argument)

ownProps

Notice the ownProps parameter for the withSelect()above. It will get all props (think: attributes) passed into the component (and can be passed on to the component, of course)

<WithSelectDemo text="blah" />

export default withSelect( (select, ownProps) => {
    console.log(ownProps) // logs: {text: "blah"}
    return {
        ...
    }
...

dispatch

=> calling an action

dispatch( "core/editor" ).removeBlock( clientID ) // clientID = BlockID

withDispatch

=> HOC [?] for dispatch

//TODO

compose

=> HOC [?] for combining multiple HOC’s (Takes an array of HOCs and returns a new component)

// Todo