Skip to content

Commit

Permalink
Merge pull request #1069 from vektor-inc/fix/width-202309
Browse files Browse the repository at this point in the history 
主に編集画面での幅処理不具合修正
  • Loading branch information
@kurudrive
kurudrive authored Sep 21, 2023
2 parents 3309ea1 + f48c157 commit 2e81e48
Show file tree
Hide file tree
Showing 10 changed files with 98 additions and 23 deletions.
4 changes: 4 additions & 0 deletions _g2/assets/_scss/block/_block.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ entry-body
margin-right: calc( ( 100% - 100vw ) / 4 );
max-width: 100vw;
}
body .is-layout-constrained > &:where(:not(.alignleft):not(.alignright):not(.alignfull)) {
margin-left: calc( ( 100% - 100vw ) / 4 ) !important;
margin-right: calc( ( 100% - 100vw ) / 4 ) !important;
}
}
.main-section--col--two {
.alignfull,
Expand Down
2 changes: 1 addition & 1 deletion _g2/assets/css/common.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion _g2/assets/css/common_editor.css
View file

Large diffs are not rendered by default.

46 changes: 36 additions & 10 deletions _g3/assets/_scss/block/_block.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,13 @@ entry-body
}
.alignfull {
&,
&.swiper-container,
&.vk_slider,
&.wp-block-image,
&.wp-block-cover-image,
&.wp-block-cover {
&:is(
.swiper-container,
.vk_slider,
.wp-block-image,
.wp-block-cover-image,
.wp-block-cover
) {
width:auto; /* Don't use 100vw!! cope with windows */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
Expand All @@ -44,10 +46,12 @@ entry-body
}
.alignwide {
&,
&.vk_slider,
&.wp-block-image,
&.wp-block-cover-image,
&.wp-block-cover {
&:is(
.vk_slider,
.wp-block-image,
.wp-block-cover-image,
.wp-block-cover
) {
// --vk-width-container != 100% なので注意
// Lightningの幅広 = コンテナの「表示エリア（100%） 」 + 左右余白分の丁度半分
width: calc( 100% + ( 100vw - 100% ) / 2 );
Expand All @@ -56,6 +60,28 @@ entry-body
max-width: 100vw;
}
}
// 通常サイズの中に幅広対策
: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;
}
}

// 全幅カバーの中に幅広ブロックを入れた時に、コアのCSSに
// body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
// max-width: var(--wp--style--global--content-size);
// margin-left: auto !important;
// margin-right: auto !important;
// }
// を入れられて幅広にならないので打ち消し処理
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;
}
}

.main-section--col--two,
.sub-section--col--two {
.alignfull,
Expand Down Expand Up @@ -124,7 +150,7 @@ entry-body
//セクションベースありにした時、全幅で余白（左右）がコンテンツエリアに合わせるの場合に、ブロック側のpaddingでデザインがおかしくなるので打ち消し
.main-section--base--on & {
padding-left: var(--vk-width-base-padding);
padding-right: var(--vk-width-base-padding);
padding-right: var(--vk-width-base-padding);
}
}

Expand Down
57 changes: 50 additions & 7 deletions _g3/assets/_scss/block/_block_editor_width.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ body.is-fullscreen-mode .edit-post-layout:not(.is-sidebar-opened){
body.is-fullscreen-mode .edit-post-layout.is-sidebar-opened{
--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 );
--vk-width-editor-container-body:calc( ( 100vw - 280px ) * 0.8 - 30px ) !important;
}

// 左管理メニュー表示（ 展開 ） / 右サイドバー展開
Expand All @@ -80,6 +80,7 @@ body.folded:not(.is-fullscreen-mode) .edit-post-layout:not(.is-sidebar-opened){
// 左管理メニュー表示（ 縮小 ） / 右サイドバー展開
body.folded:not(.is-fullscreen-mode) .edit-post-layout.is-sidebar-opened{
--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 );
}
Expand Down Expand Up @@ -130,8 +131,13 @@ div[data-align=full]

html .edit-post-visual-editor :where(.editor-styles-wrapper) .block-editor-block-list__layout.is-root-container{

// Outer Element : Full
:is( .wp-block[data-align=full], .wp-block.alignfull, div[data-align=full], .vk_outer-width-full ) {
// Outer Element : Full /////////////////////////////////////////////////////////////
:is(
.wp-block[data-align=full],
.wp-block.alignfull,
div[data-align=full],
.vk_outer-width-full:where(:not(.vk_outer-paddingLR-zero,.vk_outer-paddingLR-use))
) {
box-sizing: border-box;
width:var(--vk-width-editor-full);
max-width:var(--vk-width-editor-full);
Expand All @@ -140,9 +146,46 @@ html .edit-post-visual-editor :where(.editor-styles-wrapper) .block-editor-block
margin-left: calc( var(--vk-width-editor-container-body) / 2 - var(--vk-width-editor-full) / 2 );
margin-right: calc( var(--vk-width-editor-container-body) / 2 - var(--vk-width-editor-full) / 2 );

// Outer ブロックの内側の余白機能は独特なので除外してインナー要素の全幅や幅広のネガティブマージンを指定する
&:where(:not(.vk_outer-paddingLR-zero,.vk_outer-paddingLR-use)){
:is( .wp-block[data-align=full], .wp-block.alignfull, div[data-align=full], .vk_outer-width-full ) {
// ! important をつけないと コアが
// .editor-styles-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
// max-width: var(--wp--style--global--content-size);
// margin-left: auto !important;
// margin-right: auto !important;
// }
// をつけてくるので負ける
margin-left: calc( var(--vk-width-editor-container-body) / 2 - var(--vk-width-editor-full) / 2 ) !important;
margin-right: calc( var(--vk-width-editor-container-body) / 2 - var(--vk-width-editor-full) / 2 ) !important;
}
:is( .wp-block[data-align=wide], .wp-block.alignwide, div[data-align=wide], .vk_outer-width-wide ) {
// ! important をつけないと コアが
// .editor-styles-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
// max-width: var(--wp--style--global--content-size);
// margin-left: auto !important;
// margin-right: auto !important;
// }
// をつけてくるので負ける
margin-left: calc( ( var(--vk-width-editor-container-body) - var(--vk-width-editor-full) ) / 4 ) !important;
margin-right: calc( ( var(--vk-width-editor-container-body) - var(--vk-width-editor-full) ) / 4 ) !important;
}
}
}

// 通常サイズの中に幅広対策
:is(.wp-block-cover,.wp-block-group):not(.alignfull,.alignwide){
& > .is-layout-constrained [data-align=full] {
margin-left: calc( var(--vk-width-editor-container-body) / 2 - var(--vk-width-editor-full) / 2 ) !important;
margin-right: calc( var(--vk-width-editor-container-body) / 2 - var(--vk-width-editor-full) / 2 ) !important;
}
& > .is-layout-constrained [data-align=wide] {
margin-left: calc( ( var(--vk-width-editor-container-body) - var(--vk-width-editor-full) ) / 4 ) !important;
margin-right: calc( ( var(--vk-width-editor-container-body) - var(--vk-width-editor-full) ) / 4 ) !important;
}
}

// Outer Element : Wide
// Outer Element : Wide /////////////////////////////////////////////////////////////
:is( .wp-block[data-align=wide], .wp-block.alignwide, div[data-align=wide] ){
width:var(--vk-width-editor-wide);
max-width:var(--vk-width-editor-wide); // max-width も指定しておかないと上書きできない
Expand Down Expand Up @@ -185,16 +228,16 @@ html .edit-post-visual-editor :where(.editor-styles-wrapper) .block-editor-block
max-width:var(--vk-width-editor-container-body);
}
}
// Outer固有の微妙な余白使用
// Outer固有の微妙な余白（左右それぞれ4em付与される）使用
&.vk_outer-paddingLR-use{
.vk_outer_container{
--vk-width-editor-container-body:calc( 100vw - var(--vk-width-editor-sidebar) - var(--vk-width-editor-leftmenu) - 8em );
--vk-width-editor-container-body:calc( var(--vk-width-editor-full) - 8em );
}
:is(.wp-block[data-align=full] ){
width: auto;
margin-left: calc(50% - var(--vk-width-editor-full)/2);
margin-right: calc(50% - var(--vk-width-editor-full)/2);
max-width: 100vw;
max-width: var(--vk-width-editor-full);
}
:is(.wp-block[data-align=wide] ){
--vk-width-editor-wide : calc(var(--vk-width-editor-full) - 4em );
Expand Down
2 changes: 1 addition & 1 deletion _g3/assets/css/editor.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion _g3/assets/css/style-theme-json.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion _g3/assets/css/style.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion _theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
},
"layout": {
"contentSize": "calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 )",
"wideSize": "calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 + ( 100vw - var(--vk-width-container) - var(--vk-width-container-padding) * 2 ) / 2 )"
"wideSize": "calc( var(--vk-width-container) - var(--vk-width-container-padding) * 2 + ( 100vw - ( var(--vk-width-container) - var(--vk-width-container-padding) * 2 ) ) / 2 )"
},
"border": {
"color": true,
Expand Down
2 changes: 2 additions & 0 deletions readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ https://www.vektor-inc.co.jp/inquiry/

== Changelog ==

[ G3 ][ Bugfix ] fix editor width

v15.11.0
Update Font Awesome 6.4.2 ( Supports the icon font of X )

Expand Down

0 comments on commit 2e81e48

Please sign in to comment.