diff --git a/shared/index.css b/shared/index.css index 0e2e206d8eb5f..900d54f6d6603 100644 --- a/shared/index.css +++ b/shared/index.css @@ -76,7 +76,8 @@ body { margin-top: 0.5em; } -#editor figure img { +#editor figure img, +#editor figure iframe { display: block; } @@ -84,6 +85,22 @@ body { overflow: auto; } +#editor hr { + border: none; + font-size: 36px; + margin: 1em 0; +} + +#editor hr:before { + content: '\2767'; + display: block; + text-align: center; +} + +#editor blockquote { + margin: 2em; +} + #editor:after { content: "."; visibility: hidden; diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js index ba2708c200b42..d32b669bdbb78 100644 --- a/shared/tinymce/toolbar.js +++ b/shared/tinymce/toolbar.js @@ -199,7 +199,23 @@ toolbar.bottom = bottom; - function reposition() {} + function reposition() { + if ( ! currentSelection ) { + return; + } + + var toolbar = this.getEl(); + var toolbarRect = toolbar.getBoundingClientRect(); + var elementRect = currentSelection.getBoundingClientRect(); + + DOM.setStyles( toolbar, { + position: 'absolute', + left: elementRect.left + 'px', + top: elementRect.bottom + window.pageYOffset + 'px' + } ); + + this.show(); + } toolbar.on( 'show', function() { this.reposition(); @@ -222,6 +238,32 @@ return toolbar; } + editor.on( 'nodechange', function( event ) { + var args = { + element: event.element, + parents: event.parents + }; + + editor.fire( 'wptoolbar', args ); + + currentSelection = args.selection || args.element; + + if ( activeToolbar && activeToolbar !== args.toolbar ) { + activeToolbar.hide(); + } + + if ( args.toolbar ) { + if ( activeToolbar !== args.toolbar ) { + activeToolbar = args.toolbar; + activeToolbar.show(); + } else { + activeToolbar.reposition(); + } + } else { + activeToolbar = false; + } + } ); + function hide( event ) { // if ( activeToolbar ) { // if ( activeToolbar.tempHide || event.type === 'hide' ) { diff --git a/shared/tinymce/wplink.js b/shared/tinymce/wplink.js index 9b2f3212be15e..18c4ab8e495c9 100644 --- a/shared/tinymce/wplink.js +++ b/shared/tinymce/wplink.js @@ -192,7 +192,7 @@ editToolbar.on( 'show', function() { if ( typeof window.wpLink === 'undefined' || ! window.wpLink.modalOpen ) { window.setTimeout( function() { - var element = editToolbar.$el.find( 'input.ui-autocomplete-input' )[0], + var element = editToolbar.$el.find( 'input' )[0], selection = linkNode && ( linkNode.textContent || linkNode.innerText ); if ( element ) { diff --git a/tinymce-single/blocks/elements/horizontal-rule/register.js b/tinymce-single/blocks/elements/horizontal-rule/register.js new file mode 100644 index 0000000000000..e4939537779d3 --- /dev/null +++ b/tinymce-single/blocks/elements/horizontal-rule/register.js @@ -0,0 +1,8 @@ +window.wp.blocks.register( { + elements: [ 'hr' ], + type: 'separator', + icon: 'gridicons-minus', + buttons: [ + + ] +} ); diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js new file mode 100644 index 0000000000000..7e994a853c023 --- /dev/null +++ b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js @@ -0,0 +1,15 @@ +window.wp.blocks.register( { + name: 'youtube', + namespace: 'my-awesome-plugin', + type: 'video', + keywords: [], + icon: 'gridicons-video', + buttons: [ + 'block-align-left', + 'block-align-center', + 'block-align-right', + { + icon: 'gridicons-cog' + } + ] +} ); diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/structure.css b/tinymce-single/blocks/my-awesome-plugin/youtube/structure.css new file mode 100644 index 0000000000000..5642f0c2d3698 --- /dev/null +++ b/tinymce-single/blocks/my-awesome-plugin/youtube/structure.css @@ -0,0 +1,29 @@ +#editor figure[data-wp-block-type="my-awesome-plugin:youtube"] { + position: relative; +} + +/* Should probably be handled internally. */ +#editor figure[data-wp-block-type="my-awesome-plugin:youtube"]:before { + content: ''; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +#editor figure[data-wp-block-type="my-awesome-plugin:youtube"][data-mce-selected]:before { + display: none; +} + +#editor figure[data-wp-block-type="my-awesome-plugin:youtube"] iframe { + width: 750px; + height: 422px; +} + +#editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignleft iframe, +#editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignright iframe { + width: 375px; + height: 211px; +} diff --git a/tinymce-single/index.html b/tinymce-single/index.html index dc4bae63b95df..03d4a84dcadc5 100644 --- a/tinymce-single/index.html +++ b/tinymce-single/index.html @@ -10,6 +10,7 @@ +
Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!
-