Add media placeholders

shared/index.css

@@ -102,7 +102,8 @@ body {
 #editor figure {
  clear: both;
  float: none;
- margin: 1em 0;
+ margin-left: auto;
+ margin-right: auto;
  width: 100%;
  /*transition: margin 0.5s, width 0.5s;*/
 }
@@ -152,7 +153,7 @@ body {
 #editor figure img,
 #editor figure iframe {
  display: block;
- margin: 0;
+ margin: 0 auto;
 }
 
 #editor pre {

tinymce-single/blocks/core/gallery/register.js

@@ -1,31 +1,85 @@
-window.wp.blocks.registerBlock( {
- name: 'gallery',
- namespace: 'core',
- displayName: 'Gallery',
- type: 'media',
- keywords: [],
- icon: 'gridicons-image-multiple',
- editable: [ 'figcaption' ],
- controls: [
- 'block-align-left',
- 'block-align-center',
- 'block-align-right',
- 'block-align-full',
- // {
- // type: 'select',
- // label: 'Columns'
- // },
- // {
- // type: 'button',
- // label: 'Columns',
- // icon: 'gridicons-image',
- // command: function( editor, node ) {
- // // body...
- // }
- // },
- {
- icon: 'gridicons-cog'
+( function( wp ) {
+
+ function insertEmpty() {
+ return (
+ '<figure data-wp-block-setting-column="2">' +
+ '<figure>' +
+ '<div class="wp-blocks-placeholder">' +
+ '<svg width="48" height="48">' +
+ '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../shared/gridicons.svg#gridicons-add-outline"></use>' +
+ '</svg>' +
+ '<p>Pick image</p>' +
+ '</div>' +
+ '</figure>' +
+ '<figure>' +
+ '<div class="wp-blocks-placeholder">' +
+ '<svg width="48" height="48">' +
+ '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../shared/gridicons.svg#gridicons-add-outline"></use>' +
+ '</svg>' +
+ '<p>Pick image</p>' +
+ '</div>' +
+ '</figure>' +
+ '</figure>'
+ );
+ }
+
+ function pickTarget( parents, child ) {
+ for ( var i = 0; i < parents.length; i++ ) {
+ if ( parents[ i ] === child || parents[ i ].contains( child ) ) {
+ return parents[ i ]
+ }
  }
- ],
- insert: function() {}
-} );
+ }
+
+ function onClick( event, block, adjustUI ) {
+ var target = pickTarget( block.querySelectorAll( 'div' ), event.target );
+
+ if ( ! target ) {
+ return;
+ }
+
+ if ( ( ' ' + target.className + ' ' ).indexOf( ' wp-blocks-placeholder ' ) === -1 ) {
+ return;
+ }
+
+ wp.filePicker( false, 'image/*' )
+ .then( function( files ) {
+ if ( ! files || ! files.length ) {
+ return;
+ }
+
+ if ( files[0].type.indexOf( 'image/' ) !== 0 ) {
+ return;
+ }
+
+ var img = document.createElement( 'img' );
+
+ img.src = URL.createObjectURL( files[0] );
+ img.onload = adjustUI;
+
+ target.parentNode.replaceChild( img, target );
+ } )
+ .catch( function() {} );
+ }
+
+ wp.blocks.registerBlock( {
+ name: 'gallery',
+ namespace: 'core',
+ displayName: 'Gallery',
+ type: 'media',
+ keywords: [],
+ icon: 'gridicons-image-multiple',
+ editable: [ 'figcaption' ],
+ controls: [
+ 'block-align-left',
+ 'block-align-center',
+ 'block-align-right',
+ 'block-align-full',
+ {
+ icon: 'gridicons-cog'
+ }
+ ],
+ insert: insertEmpty,
+ onClick: onClick
+ } );
+} )( window.wp );

tinymce-single/blocks/core/gallery/structure.css

@@ -33,7 +33,7 @@
 }
 
 #editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="2"] figure {
- width: 43%;
+ width: 49%;
 }
 
 #editor figure[data-wp-block-type="core:gallery"][data-wp-block-setting-column="3"] figure {

tinymce-single/blocks/core/image/register.js

@@ -1,40 +1,90 @@
-window.wp.blocks.registerBlock( {
- name: 'image',
- namespace: 'core',
- displayName: 'Image',
- type: 'media',
- icon: 'gridicons-image',
- editable: [ 'figcaption' ],
- controls: [
- 'block-align-left',
- 'block-align-center',
- 'block-align-right',
- 'block-align-full',
- {
- icon: 'gridicons-caption',
- onClick: function( block ) {
- var figcaption = block.querySelector( 'figcaption' );
-
- if ( figcaption ) {
- block.removeChild( figcaption );
- } else {
- block.insertAdjacentHTML( 'beforeend',
- '<figcaption><br></figcaption>' );
- }
+( function( wp ) {
 
- window.wp.blocks.selectBlock( block );
- },
- isActive: function( block ) {
- return !! block.querySelector( 'figcaption' );
- }
- }
- ],
- insert: function() {
+ function insertEmpty() {
  return (
- '<figure data-wp-block-type="core:image">' +
- '<img src="https://cldup.com/HN3-c7ER9p.jpg" alt="">' +
- '<figcaption>I have no idea which mountain this is. It looks tall!</figcaption>' +
+ '<figure>' +
+ '<div class="wp-blocks-placeholder">' +
+ '<svg width="48" height="48">' +
+ '<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../shared/gridicons.svg#gridicons-add-outline"></use>' +
+ '</svg>' +
+ '<p>Pick image</p>' +
+ '</div>' +
  '</figure>'
  );
  }
-} );
+
+ function pickTarget( parents, child ) {
+ for ( var i = 0; i < parents.length; i++ ) {
+ if ( parents[ i ] === child || parents[ i ].contains( child ) ) {
+ return parents[ i ]
+ }
+ }
+ }
+
+ function onClick( event, block, adjustUI ) {
+ var target = pickTarget( block.querySelectorAll( 'div' ), event.target );
+
+ if ( ! target ) {
+ return;
+ }
+
+ if ( ( ' ' + target.className + ' ' ).indexOf( ' wp-blocks-placeholder ' ) === -1 ) {
+ return;
+ }
+
+ wp.filePicker( false, 'image/*' )
+ .then( function( files ) {
+ if ( ! files || ! files.length ) {
+ return;
+ }
+
+ if ( files[0].type.indexOf( 'image/' ) !== 0 ) {
+ return;
+ }
+
+ var img = document.createElement( 'img' );
+
+ img.src = URL.createObjectURL( files[0] );
+ img.onload = adjustUI;
+
+ target.parentNode.replaceChild( img, target );
+ } )
+ .catch( function() {} );
+ }
+
+ wp.blocks.registerBlock( {
+ name: 'image',
+ namespace: 'core',
+ displayName: 'Image',
+ type: 'media',
+ icon: 'gridicons-image',
+ editable: [ 'figcaption' ],
+ controls: [
+ 'block-align-left',
+ 'block-align-center',
+ 'block-align-right',
+ 'block-align-full',
+ {
+ icon: 'gridicons-caption',
+ onClick: function( block ) {
+ var figcaption = block.querySelector( 'figcaption' );
+
+ if ( figcaption ) {
+ block.removeChild( figcaption );
+ } else {
+ block.insertAdjacentHTML( 'beforeend',
+ '<figcaption><br></figcaption>' );
+ }
+
+ window.wp.blocks.selectBlock( block );
+ },
+ isActive: function( block ) {
+ return !! block.querySelector( 'figcaption' );
+ }
+ }
+ ],
+ insert: insertEmpty,
+ onClick: onClick
+ } );
+
+} )( window.wp );