Merge pull request #192 from WordPress/try/tinymce-single/full-bleed

Try full bleed for objects
WordPress · Mar 6, 2017 · 399bdcf · 399bdcf
2 parents d75934e + 8537c46
commit 399bdcf
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 9 deletions.
diff --git a/shared/gridicons.svg b/shared/gridicons.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
 						} );