Hot Module Replacement

server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
	publicPath: config.output.publicPath,
	hot: true,
	historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
	if (err) {
		return console.log(err);
	}

	console.log('Listening at http://localhost:3000/');
});

Hot Module Replacement

$base_path = 'ui/dist/master.js';
$script_path = plugins_url( $base_path, __FILE__ );
if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
  $script_path = apply_filters( 'wcmia_js_dev_path', $script_path, $base_path );
}
wp_register_script( 'wcmia-plugin-ui', $script_path, $dependencies, $version, true );

mu-plugins/hmr.php

add_filter( 'wcmia_js_dev_path', function( $script_path, $base_path ) {
  return 'http://localhost:3000/' . $base_path;
}, 10, 2 );

import request from 'superagent';
import * as wpPublish from './dom/wp-publish';

export const put = (managerData = {}) => {
  wpPublish.disable();

  return request
    .post(managerData.api.url)
    .set('Content-Type', 'application/json')
    .set('X-WP-Nonce', managerData.api.nonce)
    .send(JSON.stringify(managerData))
    .end((err) => {
      wpPublish.enable();

      if (err) {
        console.error(`There was an error saving menu data: ${err}`);
      } else {
        console.log('Successfully updated menu manager data in the database');
      }
    });
};

wp_localize_script()

public function enqueue_resources() {
  if ( $this->is_menu_post_admin() ) {
    wp_enqueue_script( 'menu-manager-admin-ui', $this->script_url(), [ ], tribe_get_version(), true );
    wp_localize_script( 'menu-manager-admin-ui', 'TribeMenuManager', $this->get_script_data() );
    wp_localize_script( 'menu-manager-admin-ui', 'TribeMenuManageri18n', $this->get_i18n_data() );
  }
}

private function get_script_data() {
  $data = new Calendar_Data( $GLOBALS[ 'post' ]->ID );
  $data = $data->get_data();
  $data[ 'api' ] = [
    'url'   => Menu_Controller::get_url( $GLOBALS[ 'post' ]->ID ),
    'nonce' => wp_create_nonce( 'wp_rest' ),
  ];
  return $data;
}

Image Galleries

selectImages() {
  const ids = _.map(this.state.gallery, attachment => attachment.id);
  // Set frame object:
  this.frame = wpMedia({
    frame: 'post',
    state: 'gallery-edit',
    title: 'Gallery',
    editing: true,
    multiple: true,
    selection: this.buildSelection(ids),
  });

  this.frame.open();
  // but wait, there's more!
}

Image Galleries

buildSelection(attachmentIds) {
  const shortcode = new WPShortcode({
    tag: 'gallery',
    attrs: { ids: attachmentIds.join(',') },
    type: 'single',
  });
  const attachments = wpMedia.gallery.attachments(shortcode);
  const selection = new wpMedia.model.Selection(attachments.models, {
    multiple: true, props: attachments.props.toJSON(),
  });
  selection.gallery = attachments.gallery;
  selection.more().done(() => {
    selection.props.set({ query: false });
    selection.unmirror();
    selection.props.unset('orderby');
  });

  return selection;
}

Image Galleries

selectImages() {
  // the aforementioned code to open the frame, then...

  const GallerySidebarHider = {};
  _.extend(GallerySidebarHider, panelBackbone.Events);
  GallerySidebarHider.hideGallerySidebar = this.hideGallerySidebar;
  GallerySidebarHider.listenTo(
    this.frame.state('gallery-edit'),
    'activate',
    GallerySidebarHider.hideGallerySidebar
  );
  GallerySidebarHider.hideGallerySidebar();

  this.frame.on('toolbar:render:gallery-edit', this.overrideGalleryInsert);
  this.overrideGalleryInsert();
}

wp_editor() - Render

<div className="wp-editor-tabs">
  <button
    type="button"
    id={`${props.fid}-tmce`}
    className="wp-switch-editor switch-tmce"
    data-wp-editor-id={props.fid}
  >
    {props.strings['tab.visual']}
  </button>
  <button
    type="button"
    id={`${props.fid}-html`}
    className="wp-switch-editor switch-html"
    data-wp-editor-id={props.fid}
  >
    {props.strings['tab.text']}
  </button>
</div>

wp_editor() - Render

<div
  data-settings_id={props.fid}
  id={`wp-${props.fid}-editor-container`}
  className="wp-editor-container"
>
  <div
    data-settings_id={props.fid}
    id={`qt_${props.fid}_toolbar`}
    className="quicktags-toolbar"
  />
  <textarea
    className={`wysiwyg-${props.fid} wp-editor-area`}
    rows="15"
    cols="40"
    value={props.data}
    name={props.name}
    id={props.fid}
    onChange={props.onUpdate}
  />
</div>

wp_editor() - Initialize TinyMCE

quicktags(tinyMCEPreInit.qtInit[options.fid]);
QTags._buttonsInit();

if (!window.wpActiveEditor) {
  window.wpActiveEditor = options.fid;
}

options.editor.addEventListener('click', () => {
  window.wpActiveEditor = options.fid;
});

if (options.editor.classList.contains('tmce-active')) {
  _.delay(() => {
    switchEditors.go(options.fid, 'tmce');
  }, 100);
}