From 8537c465c367ceac985baef320f8933a08e9b66d Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 6 Mar 2017 23:08:20 +0100 Subject: [PATCH] Try full bleed for objects --- shared/gridicons.svg | 7 ++++++- shared/index.css | 16 ++++++++++++++++ tinymce-single/blocks/core/gallery/register.js | 1 + tinymce-single/blocks/core/image/register.js | 1 + .../blocks/my-awesome-plugin/youtube/register.js | 1 + .../my-awesome-plugin/youtube/structure.css | 5 +++++ tinymce-single/controls/align.js | 2 +- tinymce-single/tinymce/block.css | 6 +----- tinymce-single/tinymce/block.js | 5 +++-- 9 files changed, 35 insertions(+), 9 deletions(-) diff --git a/shared/gridicons.svg b/shared/gridicons.svg index 00f3e4ad9e9b6..2b8db4db0e13e 100644 --- a/shared/gridicons.svg +++ b/shared/gridicons.svg @@ -248,4 +248,9 @@ s-8,2.6-8,5C4,20,12,20,12,20z"/> gridicons-video-camera gridicons-video gridicons-visible + c2.393,0.812,4.216,2.385,5.254,3.469C18.924,13.518,15.942,16,12,16z"/> + + + + + diff --git a/shared/index.css b/shared/index.css index 900d54f6d6603..402997d24bc80 100644 --- a/shared/index.css +++ b/shared/index.css @@ -66,6 +66,22 @@ body { width: 50%; } +#editor figure.alignfull { + margin-left: -100px; + margin-right: -100px; + width: calc( 100% + 200px ); +} + +#editor figure.alignfull figcaption { + margin-left: 0.5em; + margin-right: 0.5em; +} + +#editor figure.alignfull > figcaption { + margin-left: 100px; + margin-right: 100px; +} + #editor figure.alignleft, #editor figure.alignright { clear: none; diff --git a/tinymce-single/blocks/core/gallery/register.js b/tinymce-single/blocks/core/gallery/register.js index 065fcce7f258e..88a585bfdc816 100644 --- a/tinymce-single/blocks/core/gallery/register.js +++ b/tinymce-single/blocks/core/gallery/register.js @@ -8,6 +8,7 @@ window.wp.blocks.registerBlock( { 'block-align-left', 'block-align-center', 'block-align-right', + 'block-align-full', // { // type: 'select', // label: 'Columns' diff --git a/tinymce-single/blocks/core/image/register.js b/tinymce-single/blocks/core/image/register.js index 3503225b3e5ec..738cfae987262 100644 --- a/tinymce-single/blocks/core/image/register.js +++ b/tinymce-single/blocks/core/image/register.js @@ -7,6 +7,7 @@ window.wp.blocks.registerBlock( { 'block-align-left', 'block-align-center', 'block-align-right', + 'block-align-full', 'togglefigcaption' ] } ); diff --git a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js index 50339d14f1059..4d84f3c459447 100644 --- a/tinymce-single/blocks/my-awesome-plugin/youtube/register.js +++ b/tinymce-single/blocks/my-awesome-plugin/youtube/register.js @@ -8,6 +8,7 @@ window.wp.blocks.registerBlock( { 'block-align-left', 'block-align-center', 'block-align-right', + 'block-align-full', { 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 index 5642f0c2d3698..dda87c03e79a9 100644 --- a/tinymce-single/blocks/my-awesome-plugin/youtube/structure.css +++ b/tinymce-single/blocks/my-awesome-plugin/youtube/structure.css @@ -27,3 +27,8 @@ width: 375px; height: 211px; } + +#editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignfull iframe { + width: 950px; + height: 534px; +} diff --git a/tinymce-single/controls/align.js b/tinymce-single/controls/align.js index bc533c11faf47..0556326761416 100644 --- a/tinymce-single/controls/align.js +++ b/tinymce-single/controls/align.js @@ -29,7 +29,7 @@ }; } - [ 'left', 'center', 'right' ].forEach( function( position ) { + [ 'left', 'center', 'right', 'full' ].forEach( function( position ) { wp.blocks.registerControl( 'text-align-' + position, { icon: 'gridicons-align-' + position, onClick: createOnClick( 'text-align-', position ), diff --git a/tinymce-single/tinymce/block.css b/tinymce-single/tinymce/block.css index f832cf7bacd1c..0045f401866cd 100644 --- a/tinymce-single/tinymce/block.css +++ b/tinymce-single/tinymce/block.css @@ -241,11 +241,7 @@ div.mce-inline-toolbar-grp.block-toolbar > div.mce-stack-layout { position: absolute; top: -12px; right: -12px; - bottom: -9px; + bottom: -12px; left: -12px; border: 2px solid #e0e5e9; } - -.insert-toolbar button { - background: #fff; -} diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index 65952956bac63..7258964f88e44 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -247,7 +247,7 @@ DOM.setStyles( toolbar, { position: 'absolute', left: left + 'px', - top: blockRect.top + Math.max( blockRect.height, 48 ) - 4 + window.pageYOffset + 'px' + top: blockRect.top + Math.max( blockRect.height, 48 ) - 1 + window.pageYOffset + 'px' } ); } @@ -360,10 +360,11 @@ var toolbar = this.getEl(); var toolbarRect = toolbar.getBoundingClientRect(); var elementRect = getSelectedBlock().getBoundingClientRect(); + var contentRect = editor.getBody().getBoundingClientRect(); DOM.setStyles( toolbar, { position: 'absolute', - left: elementRect.left + 'px', + left: Math.max( contentRect.left + 100, elementRect.left ) + 'px', top: elementRect.top + window.pageYOffset - toolbarRect.height - 8 + 'px' } );