Merge pull request #1163 from vektor-inc/fix/editor/width-v3

Fix/editor/width v3
vektor-inc · Jul 16, 2024 · 309d924 · 309d924
2 parents d2c4524 + 115f529
commit 309d924
Show file tree

Hide file tree

Showing 13 changed files with 184 additions and 270 deletions.
diff --git a/_g2/assets/_scss/block/_block_editor_width.scss b/_g2/assets/_scss/block/_block_editor_width.scss
@@ -9,43 +9,50 @@
 }
 
 // 左管理メニュー非表示 / 右サイドバー非表示
-body.is-fullscreen-mode .edit-post-layout:not(.is-sidebar-opened){
+body.is-fullscreen-mode .edit-post-layout:not(.is-sidebar-opened), // WP6.5.5まで
+body.is-fullscreen-mode .edit-post-layout:has(.interface-navigable-region) { // WP6.6用	
 	--vk-width-editor-full:100vw;
 	--vk-width-editor-container-body:calc( var(--vk-width-editor-container) - var(--vk-width-container-padding) * 2 );
 	--vk-width-editor-wide:calc( var(--vk-width-editor-container-body) + ( 100vw - var(--vk-width-editor-container-body) ) / 2 );
 	--vk-width-editor-wide-nega-margin:calc( ( var(--vk-width-editor-container-body) - 100vw ) / 4 );
 }
 // 左管理メニュー非表示 / 右サイドバー表示
-body.is-fullscreen-mode .edit-post-layout.is-sidebar-opened{
+body.is-fullscreen-mode .edit-post-layout.is-sidebar-opened, // WP6.5.5まで
+body.is-fullscreen-mode .edit-post-layout:has(.interface-interface-skeleton__sidebar) { // WP6.6用
 	--vk-width-editor-full:calc( 100vw - 280px );
 	--vk-width-editor-wide:calc( 100vw - 280px - ( ( 100vw - 280px ) * ( 1 - 0.8 ) / 2 ) );
 	--vk-width-editor-container-body:calc(  ( 100vw - 280px ) * 0.8 - 30px );
 }
 
 // 左管理メニュー表示（ 展開 ） / 右サイドバー展開
-body:not(.is-fullscreen-mode) .edit-post-layout.is-sidebar-opened{
+body:not(.is-fullscreen-mode) .edit-post-layout.is-sidebar-opened, // WP6.5.5まで
+body:not(.is-fullscreen-mode) .edit-post-layout:has(.interface-interface-skeleton__sidebar) { // WP6.6用
 	--vk-width-editor-container:calc( var(--vk-width-container) - var(--vk-width-editor-leftmenu) - var(--vk-width-editor-sidebar) );
 	--vk-width-editor-container-body:calc(  ( 100vw - 280px - 160px ) * 0.8 - 30px );
 	--vk-width-editor-full:calc( 100vw - var(--vk-width-editor-leftmenu) - var(--vk-width-editor-sidebar) );
 	--vk-width-editor-wide:calc( var( --vk-width-editor-container-body ) + ( 100vw - var( --vk-width-editor-container-body ) - var(--vk-width-editor-leftmenu) - var(--vk-width-editor-sidebar) ) / 2 );
 }
 // 左管理メニュー表示（ 展開 ） / 右サイドバー非表示
-body:not(.is-fullscreen-mode) .edit-post-layout:not(.is-sidebar-opened){
+body:not(.is-fullscreen-mode) .edit-post-layout:not(.is-sidebar-opened), // WP6.5.5まで
+body:not(.is-fullscreen-mode) .edit-post-layout { // WP6.6用
 	--vk-width-editor-container:calc( var(--vk-width-container) - var(--vk-width-editor-leftmenu) );
 	--vk-width-editor-container-body:calc(  ( 100vw - 160px ) * 0.8 - 30px );
 	--vk-width-editor-full:calc( 100vw - var(--vk-width-editor-leftmenu) );
 	--vk-width-editor-wide:calc( var( --vk-width-editor-container-body ) + ( 100vw - var( --vk-width-editor-container-body ) - var(--vk-width-editor-leftmenu) ) / 2 );
 }
 
 // 左管理メニュー表示（ 縮小 ） / 右サイドバー非表示
-body.folded:not(.is-fullscreen-mode) .edit-post-layout:not(.is-sidebar-opened){
+body.folded:not(.is-fullscreen-mode) .edit-post-layout:not(.is-sidebar-opened), // WP6.5.5まで
+body.folded:not(.is-fullscreen-mode) .edit-post-layout { // WP6.6用
 	--vk-width-editor-container:calc( var(--vk-width-container) - var(--vk-width-editor-leftmenu-folded) );
 	--vk-width-editor-full:calc( 100vw - var(--vk-width-editor-leftmenu-folded) );
 	--vk-width-editor-wide:calc( var( --vk-width-editor-container-body ) + ( 100vw - var( --vk-width-editor-container-body ) - var(--vk-width-editor-leftmenu-folded) ) / 2 );
 }
 // 左管理メニュー表示（ 縮小 ） / 右サイドバー展開
-body.folded:not(.is-fullscreen-mode) .edit-post-layout.is-sidebar-opened{
+body:is(.folded, .auto-fold ):not(.is-fullscreen-mode) .edit-post-layout.is-sidebar-opened, // WP6.5.5まで
+body:is(.folded, .auto-fold ):not(.is-fullscreen-mode) .edit-post-layout:has(.interface-interface-skeleton__sidebar) { // WP6.6用
 	--vk-width-editor-container:calc( var(--vk-width-container) - var(--vk-width-editor-leftmenu-folded) - var(--vk-width-editor-sidebar) );
+	--vk-width-editor-container-body:calc(  ( 100vw - var(--vk-width-editor-sidebar) ) * 0.8 - 30px );
 	--vk-width-editor-full:calc( 100vw - var(--vk-width-editor-leftmenu-folded) - var(--vk-width-editor-sidebar) );
 	--vk-width-editor-wide:calc( var( --vk-width-editor-container-body ) + ( 100vw - var( --vk-width-editor-container-body ) - var(--vk-width-editor-leftmenu-folded) - var(--vk-width-editor-sidebar) ) / 2 );
 }
@@ -137,4 +144,4 @@ div[data-align=full]
 			max-width:var(--vk-width-editor-container);
 		}
 	}
-}
+}
diff --git a/_g2/assets/css/common_editor.css b/_g2/assets/css/common_editor.css
diff --git a/_g3/assets/_scss/_variables.scss b/_g3/assets/_scss/_variables.scss
@@ -38,6 +38,13 @@ $containter-padding:15px;
     --vk-width-container : 100svw;
 
     --vk-width-container-padding : 15px;
+
+	/**
+	* @since 15.26
+	* --vk-width-full : 編集画面は全幅が 100svw ではないため、変更できるように --vk-width-full を使用する
+	*/
+	--vk-width-full : 100svw;
+
 	--vk-width-col-2-main : 66.6%;
     // サイドバーがjsでfixedにすると、ストレートな幅指定だと基準がウィンドウになってしまうため、コンテナ基準にしている
 	--vk-width-col-2-sub: calc( var(--vk-width-container) * 0.27 );

diff --git a/_g3/assets/_scss/block/_block.scss b/_g3/assets/_scss/block/_block.scss
@@ -12,6 +12,9 @@
 	font-size : 36px;
 }
 
+.block-editor-block-list__layout{
+	box-sizing: border-box;
+}
 
 /* カラム（水平）で点線と余白ができる */
 .vk_post .row {

diff --git a/_g3/assets/_scss/block/_block_editor.scss b/_g3/assets/_scss/block/_block_editor.scss
@@ -1,5 +1,9 @@
 // editor only
 
+.editor-styles-wrapper {
+	padding: 0;
+}
+
 .editor-post-title { // Attend to 6.5 with theme.json
 	margin-left:auto;
 	margin-right:auto;
@@ -43,12 +47,6 @@
     margin-left:0;
 }
 
-.is-root-container > .wp-block,
-.is-root-container > :where(div:not(.wp-block)) > .wp-block {
-	margin-left:auto;
-	margin-right:auto;
-}
-
 // theme.json を追加すると gap:24px をつけられるので打ち消し
 // .block-editor-block-list__layout がないと負けるので追加してある
 .editor-styles-wrapper .block-editor-block-list__layout .is-layout-flex:where(:not(.wp-block-columns)) {

diff --git a/_g3/assets/_scss/block/_block_width.scss b/_g3/assets/_scss/block/_block_width.scss
@@ -25,10 +25,10 @@ entry-body
 	.wp-block-cover-image,
 	.wp-block-cover
 	) {
-		width:auto; /* Don't use 100vw!! cope with windows */
+		width:auto; /* Don't use 100svw!! cope with windows */
 		margin-left: calc(50% - 50vw);
 		margin-right: calc(50% - 50vw);
-		max-width: 100vw;
+		max-width: var(--vk-width-full);
 	}
 }
 .alignwide {
@@ -41,17 +41,17 @@ entry-body
 	) {
 		// --vk-width-container != 100% なので注意
 		// Lightningの幅広 = コンテナの「表示エリア（100%）	」 + 左右余白分の丁度半分
-		width: calc( 100% + ( 100vw - 100% ) / 2 );
-		margin-left: calc( ( 100% - 100vw ) / 4 );
-		margin-right: calc( ( 100% - 100vw ) / 4 );
-		max-width: 100vw;
+		width: calc( 100% + ( var(--vk-width-full) - 100% ) / 2 );
+		margin-left: calc( ( 100% - var(--vk-width-full) ) / 4 );
+		margin-right: calc( ( 100% - var(--vk-width-full) ) / 4 );
+		max-width: var(--vk-width-full);
 	}
 }
 // 通常サイズの中に幅広対策
 :is(.wp-block-cover,.wp-block-group):not(.alignfull,.alignwide){
 	& > .is-layout-constrained > .alignwide {
-		margin-left: calc( ( 100% - 100vw ) / 4 ) !important;
-		margin-right: calc( ( 100% - 100vw ) / 4 ) !important;
+		margin-left: calc( ( 100% - var(--vk-width-full) ) / 4 ) !important;
+		margin-right: calc( ( 100% - var(--vk-width-full) ) / 4 ) !important;
 	}
 }
 
@@ -64,8 +64,8 @@ entry-body
 // を入れられて幅広にならないので打ち消し処理
 body :where(.alignfull,.alignwide):where(:not(.vk_outer-paddingLR-zero)) .is-layout-constrained {
 	& > .alignwide {
-		margin-left: calc( ( 100% - 100vw ) / 4 ) !important;
-		margin-right: calc( ( 100% - 100vw ) / 4 ) !important;
+		margin-left: calc( ( 100% - var(--vk-width-full) ) / 4 ) !important;
+		margin-right: calc( ( 100% - var(--vk-width-full) ) / 4 ) !important;
 	}
 }