From eb16f62beb5aa1c66b235e394165040b62075018 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 13 Jan 2022 17:42:49 -0300 Subject: [PATCH] Fixes new modal css conflicts from WP 5.9 --- ...n-gutenberg-block-common-editor-styles.css | 22 +++++++++------- ...tenberg-block-common-editor-styles.css.map | 2 +- .../dynamic-and-carousel-items-modal.js | 3 ++- .../blocks/items-list/items-modal.js | 3 ++- .../related-items-list/related-items-modal.js | 3 ++- .../scss/gutenberg-blocks-editor-style.scss | 25 +++++++++++++------ 6 files changed, 37 insertions(+), 21 deletions(-) diff --git a/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css b/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css index a2c1c03d0..4ef12517b 100644 --- a/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css +++ b/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css @@ -49,15 +49,20 @@ width: 80vw; height: 80vh; } .wp-block-tainacan-modal.dynamic-modal iframe { - width: calc(100% + 32px); - height: calc(100% - 132px); - margin-left: -16px; } + width: 100%; + height: calc(100% - 96px); } + .wp-block-tainacan-modal.dynamic-modal.wp-version-smaller-than-5-9 iframe { + height: calc(100% - 156px); } .wp-block-tainacan-modal.dynamic-modal .modal-footer-area { height: 68px; - width: calc(100% + 32px); - margin-left: -16px !important; - padding: 1.2em 1.2em !important; - border-top: 1px solid var(--tainacan-block-gray3, #cbcbcb); } + width: 100%; + border-top: 1px solid var(--tainacan-block-gray3, #cbcbcb); + padding: 15px 32px; } + .wp-block-tainacan-modal.dynamic-modal .components-modal__content { + padding: 0; } + .wp-block-tainacan-modal.dynamic-modal .components-modal__content .components-modal__header { + margin-left: 0; + margin-right: 0; } .wp-block-tainacan-modal .spinner-container { min-height: 56px; padding: 1em; @@ -173,8 +178,7 @@ display: flex; align-items: baseline; justify-content: space-between; - padding: 15px 16px 0 16px; - margin: 0 -16px; } + padding: 15px 0 0 0; } .wp-block-tainacan-modal .modal-footer-area p { padding: 0 12px; color: var(--tainacan-block-gray5, #454647); } diff --git a/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css.map b/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css.map index 945ed8959..1c7060418 100644 --- a/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css.map +++ b/src/assets/css/tainacan-gutenberg-block-common-editor-styles.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "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", +"mappings": "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", "sources": ["../../views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"], "names": [], "file": "tainacan-gutenberg-block-common-editor-styles.css" diff --git a/src/views/gutenberg-blocks/blocks/carousel-items-list/dynamic-and-carousel-items-modal.js b/src/views/gutenberg-blocks/blocks/carousel-items-list/dynamic-and-carousel-items-modal.js index f6e8909db..8f9a09e10 100644 --- a/src/views/gutenberg-blocks/blocks/carousel-items-list/dynamic-and-carousel-items-modal.js +++ b/src/views/gutenberg-blocks/blocks/carousel-items-list/dynamic-and-carousel-items-modal.js @@ -4,6 +4,7 @@ import axios from 'axios'; const { __ } = wp.i18n; const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components; +const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; export default class CarouselItemsModal extends React.Component { constructor(props) { @@ -204,7 +205,7 @@ export default class CarouselItemsModal extends React.Component { return this.state.collectionId ? ( // Items modal this.cancelSelection() } shouldCloseOnClickOutside={ false } diff --git a/src/views/gutenberg-blocks/blocks/items-list/items-modal.js b/src/views/gutenberg-blocks/blocks/items-list/items-modal.js index 1fc09064f..7185b824e 100644 --- a/src/views/gutenberg-blocks/blocks/items-list/items-modal.js +++ b/src/views/gutenberg-blocks/blocks/items-list/items-modal.js @@ -5,6 +5,7 @@ import qs from 'qs'; const { __ } = wp.i18n; const { TextControl, Button, Modal, SelectControl, RadioControl, Spinner } = wp.components; +const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; export default class ItemsModal extends React.Component { constructor(props) { @@ -238,7 +239,7 @@ export default class ItemsModal extends React.Component { return this.state.collectionId ? ( // Items modal this.cancelSelection() } shouldCloseOnClickOutside={ false } diff --git a/src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js b/src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js index be88bbe80..ce3a4ab86 100644 --- a/src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js +++ b/src/views/gutenberg-blocks/blocks/related-items-list/related-items-modal.js @@ -4,6 +4,7 @@ import axios from 'axios'; const { __ } = wp.i18n; const { TextControl, Button, Modal, RadioControl, SelectControl, Spinner } = wp.components; +const currentWPVersion = (typeof tainacan_blocks != 'undefined') ? tainacan_blocks.wp_version : tainacan_plugin.wp_version; export default class RelatedItemsModal extends React.Component { constructor(props) { @@ -199,7 +200,7 @@ export default class RelatedItemsModal extends React.Component { return this.state.collectionId ? ( // Items modal this.cancelSelection() } shouldCloseOnClickOutside={ false } diff --git a/src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss b/src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss index 459cd109a..cce8f495d 100644 --- a/src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss +++ b/src/views/gutenberg-blocks/scss/gutenberg-blocks-editor-style.scss @@ -65,17 +65,27 @@ height: 80vh; iframe { - width: calc(100% + 32px); - height: calc(100% - 132px); - margin-left: -16px; + width: 100%; + height: calc(100% - 96px); + } + &.wp-version-smaller-than-5-9 iframe { + height: calc(100% - 156px); } .modal-footer-area { height: 68px; - width: calc(100% + 32px); - margin-left: -16px !important; - padding: 1.2em 1.2em !important; + width: 100%; border-top: 1px solid var(--tainacan-block-gray3, $gray3); + padding: 15px 32px; + } + + .components-modal__content { + padding: 0; + + .components-modal__header { + margin-left: 0; + margin-right: 0; + } } } @@ -209,8 +219,7 @@ display: flex; align-items: baseline; justify-content: space-between; - padding: 15px 16px 0 16px; - margin: 0 -16px; + padding: 15px 0 0 0; p { padding: 0 12px;