Logger
11 months ago
Patterns
11 months ago
PersonalizationTags
3 days ago
Renderer
3 days ago
Templates
4 months ago
class-assets-manager.php
5 months ago
class-dependency-check.php
11 months ago
class-email-api-controller.php
6 months ago
class-email-editor.php
3 days ago
class-email-styles-schema.php
11 months ago
class-personalizer.php
3 days ago
class-send-preview-email.php
5 months ago
class-settings-controller.php
3 months ago
class-site-style-sync-controller.php
4 months ago
class-theme-controller.php
3 months ago
class-user-theme.php
11 months ago
content-editor.css
2 weeks ago
content-shared.css
11 months ago
index.php
11 months ago
theme.json
3 months ago
content-editor.css
211 lines
| 1 | /* |
| 2 | * Styles for the email editor. |
| 3 | */ |
| 4 | /* |
| 5 | * Flex layout used for buttons block for email editor. |
| 6 | */ |
| 7 | .is-layout-email-flex { |
| 8 | flex-wrap: nowrap; |
| 9 | } |
| 10 | |
| 11 | :where(body .is-layout-flex) { |
| 12 | gap: var(--wp--style--block-gap, 16px); |
| 13 | } |
| 14 | |
| 15 | .is-mobile-preview .is-layout-email-flex { |
| 16 | display: block; |
| 17 | } |
| 18 | |
| 19 | .is-mobile-preview .is-layout-email-flex .block-editor-block-list__block { |
| 20 | padding: 5px 0; |
| 21 | width: 100%; |
| 22 | } |
| 23 | |
| 24 | .is-mobile-preview .is-layout-email-flex .wp-block-button__link { |
| 25 | width: 100%; |
| 26 | } |
| 27 | |
| 28 | /* |
| 29 | * Email Editor specific styles for vertical gap between blocks in column and group. |
| 30 | * This is needed because we disable layout for core/group, core/column and core/columns blocks, and .is-layout-flex is not applied. |
| 31 | */ |
| 32 | .wp-block-columns:not(.is-not-stacked-on-mobile) |
| 33 | > .wp-block-column |
| 34 | > .wp-block:first-child, |
| 35 | .wp-block-group > .wp-block:first-child { |
| 36 | margin-top: 0; |
| 37 | } |
| 38 | |
| 39 | .wp-block-columns:not(.is-not-stacked-on-mobile) |
| 40 | > .wp-block-column |
| 41 | > .wp-block, |
| 42 | .wp-block-group > .wp-block { |
| 43 | margin-bottom: var(--wp--style--block-gap, 16px); |
| 44 | margin-top: var(--wp--style--block-gap, 16px); |
| 45 | } |
| 46 | |
| 47 | .wp-block-columns:not(.is-not-stacked-on-mobile) |
| 48 | > .wp-block-column |
| 49 | > .wp-block:not([aria-hidden="true"]):last-of-type, |
| 50 | .wp-block-group > .wp-block:not([aria-hidden="true"]):last-of-type { |
| 51 | margin-bottom: 0; |
| 52 | } |
| 53 | |
| 54 | /* |
| 55 | * Use box sizing border box for columns that have defined a width (they have flex-basis set). |
| 56 | */ |
| 57 | .wp-block-columns:not(.is-not-stacked-on-mobile) |
| 58 | > .wp-block-column[style*='flex-basis'] { |
| 59 | box-sizing: border-box; |
| 60 | } |
| 61 | |
| 62 | /* |
| 63 | * For the WYSIWYG experience we don't want to display any margins between blocks in the editor |
| 64 | */ |
| 65 | .wp-block { |
| 66 | clear: both; |
| 67 | } |
| 68 | |
| 69 | /* |
| 70 | * Image block enhancements |
| 71 | */ |
| 72 | .wp-block-image figcaption { |
| 73 | /* Resetting the margin for images in the editor to avoid unexpected spacing */ |
| 74 | margin: 0; |
| 75 | } |
| 76 | |
| 77 | /* |
| 78 | * Table block enhancements |
| 79 | */ |
| 80 | .wp-block-table figcaption { |
| 81 | /* Center-align table captions like core WordPress */ |
| 82 | text-align: center; |
| 83 | } |
| 84 | |
| 85 | /* Ensure bold formatting shows up in table cells and captions in the editor */ |
| 86 | .wp-block-table td strong, |
| 87 | .wp-block-table th strong, |
| 88 | .wp-block-table figcaption strong { |
| 89 | font-weight: bold; |
| 90 | } |
| 91 | |
| 92 | /* |
| 93 | * Embed block enhancements |
| 94 | */ |
| 95 | .wp-block-embed figcaption { |
| 96 | /* Center-align embed captions like core WordPress, matching the email renderer and the table block */ |
| 97 | text-align: center; |
| 98 | } |
| 99 | |
| 100 | .wp-block-image.alignleft, |
| 101 | .wp-block-image.alignright { |
| 102 | margin-inline: 0 0; |
| 103 | text-align: center; |
| 104 | } |
| 105 | |
| 106 | .wp-block-image.aligncenter { |
| 107 | margin-left: auto; |
| 108 | margin-right: auto; |
| 109 | } |
| 110 | |
| 111 | .wp-block-image.alignright { |
| 112 | margin-left: auto; |
| 113 | } |
| 114 | |
| 115 | /* |
| 116 | * Set default padding-left to have consistent default look in editor and in email |
| 117 | * This also overrides the default values in browsers for padding-inline-start |
| 118 | */ |
| 119 | ul, |
| 120 | ol { |
| 121 | padding-left: 40px; |
| 122 | } |
| 123 | |
| 124 | /* |
| 125 | * Override default button border radius which is set in core to 9999px |
| 126 | */ |
| 127 | .wp-block-button__link { |
| 128 | border-radius: 0; |
| 129 | } |
| 130 | |
| 131 | /* |
| 132 | * Mobile preview fixes |
| 133 | */ |
| 134 | .is-mobile-preview figure > div { |
| 135 | max-width: 100% !important; |
| 136 | height: auto !important; |
| 137 | } |
| 138 | |
| 139 | /* |
| 140 | * Reset default margin for blocks in template-mode |
| 141 | * This was causing the first block to have a margin-top set to block gap. |
| 142 | * We control the gab via different css |
| 143 | */ |
| 144 | .wp-site-blocks > * { |
| 145 | margin-block-start: 0; |
| 146 | } |
| 147 | |
| 148 | /* |
| 149 | * Hide the post title. |
| 150 | * When user disables the template-lock mode we don't want to show the post title. |
| 151 | */ |
| 152 | .editor-visual-editor__post-title-wrapper { |
| 153 | display: none; |
| 154 | } |
| 155 | |
| 156 | /* |
| 157 | * Temporary styles for Rich Text HTML comments from the PR: https://github.com/WordPress/gutenberg/pull/62128/files |
| 158 | */ |
| 159 | [data-rich-text-comment], |
| 160 | [data-rich-text-format-boundary] { |
| 161 | border-radius: 2px; |
| 162 | } |
| 163 | |
| 164 | [data-rich-text-comment] { |
| 165 | background-color: var( |
| 166 | --wp-components-color-accent, |
| 167 | var(--wp-admin-theme-color, #3858e9) |
| 168 | ); |
| 169 | |
| 170 | span { |
| 171 | color: var(--wp-components-color-accent-inverted, #fff); |
| 172 | filter: none; |
| 173 | padding: 0 2px; |
| 174 | } |
| 175 | } |
| 176 | |
| 177 | /** |
| 178 | * Override the default gap for social links block in the editor. |
| 179 | * This is needed because we do not want to have a gap between the social links and also for a WYSIWYG experience. |
| 180 | */ |
| 181 | .wp-block-social-links.is-layout-flex { |
| 182 | gap: 16px !important; |
| 183 | } |
| 184 | |
| 185 | /** |
| 186 | * Override the default padding for social links block in the editor. |
| 187 | * This is needed because we do not want to have a padding for the social links block particularly for a WYSIWYG experience. |
| 188 | */ |
| 189 | .wp-block-social-links.has-background { |
| 190 | padding-left: 0; |
| 191 | } |
| 192 | |
| 193 | /** |
| 194 | * Override the default background color for social links block in the editor. |
| 195 | * This is mostly for a WYSIWYG experience. These icons don't have a default background color. |
| 196 | */ |
| 197 | :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-mail, |
| 198 | :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-feed, |
| 199 | :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-chain { |
| 200 | background-color:#000; |
| 201 | color:#fff; |
| 202 | } |
| 203 | |
| 204 | /** |
| 205 | * Override the default overflow-x for the iframe in the editor. |
| 206 | * This is needed because we do want allow scrolling on small screens such as mobile devices. |
| 207 | */ |
| 208 | .block-editor-iframe__body { |
| 209 | overflow-x: auto; |
| 210 | } |
| 211 |