diff --git a/patterns-data/_scss/_vk-cols.scss b/patterns-data/_scss/_vk-cols.scss index c3e16f0..273580e 100644 --- a/patterns-data/_scss/_vk-cols.scss +++ b/patterns-data/_scss/_vk-cols.scss @@ -3,6 +3,7 @@ } .vk-cols--hasbtn{ // 結局汎用ブロックではボタンの処理が完全に制御できないので基本的に非推奨 + margin-bottom:0; & > .row > .vk_gridColumn_item, & > .wp-block-column { position: relative; @@ -15,7 +16,6 @@ width:100%; // カラムに padding つけられると absolute なのでpadding引いた幅を検出できずにはみ出すが、まぁしゃーないと思う。 } } - margin-bottom:0; } /* @@ -91,7 +91,8 @@ // 画像部分全幅 &.vk-cols--grid--alignfull { & > .wp-block-column:nth-child(2){ - & > .wp-block-cover { + & > .wp-block-cover, + & > .vk_outer { @media (max-width: 599px){ width:100vw; margin-right:calc( ( 100% - 100vw ) / 2 ); @@ -111,7 +112,8 @@ margin-right:0; } & > .wp-block-column:nth-child(2){ - & > .wp-block-cover { + & > .wp-block-cover, + & > .vk_outer { margin-left:calc( 100% - 50vw ); } } diff --git a/patterns-data/style.css b/patterns-data/style.css index 668b1bb..e22dbad 100755 --- a/patterns-data/style.css +++ b/patterns-data/style.css @@ -1 +1 @@ -.vk-cols--reverse{flex-direction:row-reverse}.vk-cols--hasbtn{margin-bottom:0}.vk-cols--hasbtn>.row>.vk_gridColumn_item,.vk-cols--hasbtn>.wp-block-column{position:relative;padding-bottom:3em}.vk-cols--hasbtn>.row>.vk_gridColumn_item>.wp-block-buttons,.vk-cols--hasbtn>.row>.vk_gridColumn_item>.vk_button,.vk-cols--hasbtn>.wp-block-column>.wp-block-buttons,.vk-cols--hasbtn>.wp-block-column>.vk_button{position:absolute;bottom:0;width:100%}.vk-cols--fit.wp-block-columns{gap:0}.vk-cols--fit.wp-block-columns,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile){margin-top:0;margin-bottom:0;justify-content:space-between}.vk-cols--fit.wp-block-columns>.wp-block-column *:last-child,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column *:last-child{margin-bottom:0}.vk-cols--fit.wp-block-columns>.wp-block-column>.wp-block-cover,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column>.wp-block-cover{margin-top:0}.vk-cols--fit.wp-block-columns.has-background,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile).has-background{padding:0}@media(max-width: 599px){.vk-cols--fit.wp-block-columns:not(.has-background)>.wp-block-column:not(.has-background),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile):not(.has-background)>.wp-block-column:not(.has-background){padding-left:0 !important;padding-right:0 !important}}@media(min-width: 782px){.vk-cols--fit.wp-block-columns .block-editor-block-list__block.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns>.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .block-editor-block-list__block.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child){margin-left:0}}@media(min-width: 600px)and (max-width: 781px){.vk-cols--fit.wp-block-columns .wp-block-column:nth-child(2n),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:nth-child(2n){margin-left:0}.vk-cols--fit.wp-block-columns .wp-block-column:not(:only-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:not(:only-child){flex-basis:50% !important}}.vk-cols--fit--gap1.wp-block-columns{gap:1px}@media(min-width: 600px)and (max-width: 781px){.vk-cols--fit--gap1.wp-block-columns .wp-block-column:not(:only-child){flex-basis:calc(50% - 1px) !important}}.vk-cols--fit.vk-cols--grid>.block-editor-block-list__block,.vk-cols--fit.vk-cols--grid>.wp-block-column,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile)>.block-editor-block-list__block,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:50%;box-sizing:border-box}@media(max-width: 599px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover{width:100vw;margin-right:calc((100% - 100vw)/2);margin-left:calc((100% - 100vw)/2)}}@media(min-width: 600px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover{margin-right:calc(100% - 50vw);width:50vw}}@media(min-width: 600px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column{margin-left:0;margin-right:0}.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.wp-block-cover{margin-left:calc(100% - 50vw)}}.vk-cols--menu h2,.vk-cols--menu h3,.vk-cols--menu h4,.vk-cols--menu h5{margin-bottom:.2em;text-shadow:#000 0 0 10px}.vk-cols--menu h2:first-child,.vk-cols--menu h3:first-child,.vk-cols--menu h4:first-child,.vk-cols--menu h5:first-child{margin-top:0}.vk-cols--menu p{margin-bottom:1rem;text-shadow:#000 0 0 10px}.vk-cols--menu .wp-block-cover__inner-container:last-child{margin-bottom:0}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover img{filter:unset}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover{background-color:unset}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover .wp-block-cover__image-background{filter:unset !important}.vk-cols--fitbnrs .wp-block-cover__inner-container{position:absolute;height:100%;width:100%}.vk-cols--fitbnrs .vk_button{height:100%;margin:0}.vk-cols--fitbnrs .vk_button .vk_button_btn,.vk-cols--fitbnrs .vk_button .btn{height:100%;width:100%;border:none;box-shadow:none;background-color:unset !important;transition:unset}.vk-cols--fitbnrs .vk_button .vk_button_btn:hover,.vk-cols--fitbnrs .vk_button .btn:hover{transition:unset}.vk-cols--fitbnrs .vk_button .vk_button_btn:after,.vk-cols--fitbnrs .vk_button .btn:after{border:none}.vk-cols--fitbnrs .vk_button .vk_button_link_txt{width:100%;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);font-size:2rem;text-shadow:#000 0 0 10px}.vk-cols--fitbnrs .vk_button .vk_button_link_subCaption{width:100%;position:absolute;top:calc(50% + 2.2em);left:50%;transform:translateY(-50%) translateX(-50%);text-shadow:#000 0 0 10px}@media(min-width: 992px){.vk-cols--media.wp-block-columns{gap:3rem}}.vk-fit-map figure{margin-bottom:0}.vk-fit-map iframe{position:relative;margin-bottom:0;display:block;max-height:400px;width:100vw}.vk-fit-map:is(.alignfull,.alignwide) div{max-width:100%}.vk-table--th--width25 :where(tr>*:first-child){width:25%}.vk-table--th--width30 :where(tr>*:first-child){width:30%}.vk-table--th--width35 :where(tr>*:first-child){width:35%}.vk-table--th--width40 :where(tr>*:first-child){width:40%}.vk-table--th--bg-bright :where(tr>*:first-child){background-color:var(--wp--preset--color--bg-secondary, rgba(0, 0, 0, 0.05))}@media(max-width: 599px){.vk-table--mobile-block :is(th,td){width:100%;display:block}.vk-table--mobile-block.wp-block-table table :is(th,td){border-top:none}}.vk-table--width--th25 :where(tr>*:first-child){width:25%}.vk-table--width--th30 :where(tr>*:first-child){width:30%}.vk-table--width--th35 :where(tr>*:first-child){width:35%}.vk-table--width--th40 :where(tr>*:first-child){width:40%}.no-margin{margin:0}@media(max-width: 599px){.wp-block-image.vk-aligncenter--mobile>.alignright{float:none;margin-left:auto;margin-right:auto}.vk-no-padding-horizontal--mobile{padding-left:0 !important;padding-right:0 !important}} +.vk-cols--reverse{flex-direction:row-reverse}.vk-cols--hasbtn{margin-bottom:0}.vk-cols--hasbtn>.row>.vk_gridColumn_item,.vk-cols--hasbtn>.wp-block-column{position:relative;padding-bottom:3em}.vk-cols--hasbtn>.row>.vk_gridColumn_item>.wp-block-buttons,.vk-cols--hasbtn>.row>.vk_gridColumn_item>.vk_button,.vk-cols--hasbtn>.wp-block-column>.wp-block-buttons,.vk-cols--hasbtn>.wp-block-column>.vk_button{position:absolute;bottom:0;width:100%}.vk-cols--fit.wp-block-columns{gap:0}.vk-cols--fit.wp-block-columns,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile){margin-top:0;margin-bottom:0;justify-content:space-between}.vk-cols--fit.wp-block-columns>.wp-block-column *:last-child,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column *:last-child{margin-bottom:0}.vk-cols--fit.wp-block-columns>.wp-block-column>.wp-block-cover,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column>.wp-block-cover{margin-top:0}.vk-cols--fit.wp-block-columns.has-background,.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile).has-background{padding:0}@media(max-width: 599px){.vk-cols--fit.wp-block-columns:not(.has-background)>.wp-block-column:not(.has-background),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile):not(.has-background)>.wp-block-column:not(.has-background){padding-left:0 !important;padding-right:0 !important}}@media(min-width: 782px){.vk-cols--fit.wp-block-columns .block-editor-block-list__block.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns>.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .block-editor-block-list__block.wp-block-column:not(:first-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child){margin-left:0}}@media(min-width: 600px)and (max-width: 781px){.vk-cols--fit.wp-block-columns .wp-block-column:nth-child(2n),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:nth-child(2n){margin-left:0}.vk-cols--fit.wp-block-columns .wp-block-column:not(:only-child),.vk-cols--fit.wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:not(:only-child){flex-basis:50% !important}}.vk-cols--fit--gap1.wp-block-columns{gap:1px}@media(min-width: 600px)and (max-width: 781px){.vk-cols--fit--gap1.wp-block-columns .wp-block-column:not(:only-child){flex-basis:calc(50% - 1px) !important}}.vk-cols--fit.vk-cols--grid>.block-editor-block-list__block,.vk-cols--fit.vk-cols--grid>.wp-block-column,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile)>.block-editor-block-list__block,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile)>.wp-block-column{flex-basis:50%;box-sizing:border-box}@media(max-width: 599px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.vk_outer,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.vk_outer{width:100vw;margin-right:calc((100% - 100vw)/2);margin-left:calc((100% - 100vw)/2)}}@media(min-width: 600px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.vk_outer,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull>.wp-block-column:nth-child(2)>.vk_outer{margin-right:calc(100% - 50vw);width:50vw}}@media(min-width: 600px){.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column{margin-left:0;margin-right:0}.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid.vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.vk_outer,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.wp-block-cover,.vk-cols--fit.vk-cols--grid:not(.is-not-stacked-on-mobile).vk-cols--grid--alignfull.vk-cols--reverse>.wp-block-column:nth-child(2)>.vk_outer{margin-left:calc(100% - 50vw)}}.vk-cols--menu h2,.vk-cols--menu h3,.vk-cols--menu h4,.vk-cols--menu h5{margin-bottom:.2em;text-shadow:#000 0 0 10px}.vk-cols--menu h2:first-child,.vk-cols--menu h3:first-child,.vk-cols--menu h4:first-child,.vk-cols--menu h5:first-child{margin-top:0}.vk-cols--menu p{margin-bottom:1rem;text-shadow:#000 0 0 10px}.vk-cols--menu .wp-block-cover__inner-container:last-child{margin-bottom:0}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover img{filter:unset}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover{background-color:unset}.vk-cols--fitbnrs .wp-block-column .wp-block-cover:hover .wp-block-cover__image-background{filter:unset !important}.vk-cols--fitbnrs .wp-block-cover__inner-container{position:absolute;height:100%;width:100%}.vk-cols--fitbnrs .vk_button{height:100%;margin:0}.vk-cols--fitbnrs .vk_button .vk_button_btn,.vk-cols--fitbnrs .vk_button .btn{height:100%;width:100%;border:none;box-shadow:none;background-color:unset !important;transition:unset}.vk-cols--fitbnrs .vk_button .vk_button_btn:hover,.vk-cols--fitbnrs .vk_button .btn:hover{transition:unset}.vk-cols--fitbnrs .vk_button .vk_button_btn:after,.vk-cols--fitbnrs .vk_button .btn:after{border:none}.vk-cols--fitbnrs .vk_button .vk_button_link_txt{width:100%;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);font-size:2rem;text-shadow:#000 0 0 10px}.vk-cols--fitbnrs .vk_button .vk_button_link_subCaption{width:100%;position:absolute;top:calc(50% + 2.2em);left:50%;transform:translateY(-50%) translateX(-50%);text-shadow:#000 0 0 10px}@media(min-width: 992px){.vk-cols--media.wp-block-columns{gap:3rem}}.vk-fit-map figure{margin-bottom:0}.vk-fit-map iframe{position:relative;margin-bottom:0;display:block;max-height:400px;width:100vw}.vk-fit-map:is(.alignfull,.alignwide) div{max-width:100%}.vk-table--th--width25 :where(tr>*:first-child){width:25%}.vk-table--th--width30 :where(tr>*:first-child){width:30%}.vk-table--th--width35 :where(tr>*:first-child){width:35%}.vk-table--th--width40 :where(tr>*:first-child){width:40%}.vk-table--th--bg-bright :where(tr>*:first-child){background-color:var(--wp--preset--color--bg-secondary, rgba(0, 0, 0, 0.05))}@media(max-width: 599px){.vk-table--mobile-block :is(th,td){width:100%;display:block}.vk-table--mobile-block.wp-block-table table :is(th,td){border-top:none}}.vk-table--width--th25 :where(tr>*:first-child){width:25%}.vk-table--width--th30 :where(tr>*:first-child){width:30%}.vk-table--width--th35 :where(tr>*:first-child){width:35%}.vk-table--width--th40 :where(tr>*:first-child){width:40%}.no-margin{margin:0}@media(max-width: 599px){.wp-block-image.vk-aligncenter--mobile>.alignright{float:none;margin-left:auto;margin-right:auto}.vk-no-padding-horizontal--mobile{padding-left:0 !important;padding-right:0 !important}} diff --git a/readme.txt b/readme.txt index deaf154..4fc3c65 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Donate link: Tags: Guternberg, Block Pattern Requires at least: 6.2 Tested up to: 6.6 -Stable tag: 1.32.3.0 +Stable tag: 1.32.4.0 Requires PHP: 7.4 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html @@ -16,6 +16,9 @@ When you activate this plugin that create new custom post type for custom block == Changelog == += 1.32.4 = +[ Design tuning ] Fixed "Fit columns alignfull" so that "Outer" also has full width. + = 1.32.3 = [ Bug fix ] Handling the issue where the admin screen does not display on 1.32.2