diff --git a/.github/workflows/plugin-build.yml b/.github/workflows/plugin-build.yml index bc40aaeda..8aeb6e3f5 100644 --- a/.github/workflows/plugin-build.yml +++ b/.github/workflows/plugin-build.yml @@ -46,3 +46,10 @@ jobs: repo-token: ${{ secrets.GITHUB_TOKEN }} artifacts: stackable-${{ env.VERSION_SUFFIX }}.zip artifacts-branch: artifacts + + - name: Comment WordPress playground link + if: ${{ github.event_name == 'pull_request' }} + uses: dannyskoog/pull-request-comment@v1.0.1 + with: + message: 'Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr${{ github.event.number }}-stackable-${{ github.event.number }}-merge.zip"}}]}' + marker: diff --git a/languages/stackable-ultimate-gutenberg-blocks.pot b/languages/stackable-ultimate-gutenberg-blocks.pot index 8e53083a0..5e697fffd 100644 --- a/languages/stackable-ultimate-gutenberg-blocks.pot +++ b/languages/stackable-ultimate-gutenberg-blocks.pot @@ -2,14 +2,14 @@ # This file is distributed under the same license as the Stackable - Gutenberg Blocks plugin. msgid "" msgstr "" -"Project-Id-Version: Stackable - Gutenberg Blocks 3.10.0\n" +"Project-Id-Version: Stackable - Gutenberg Blocks 3.10.1\n" "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/stackable-ultimate-gutenberg-blocks\n" "Last-Translator: FULL NAME \n" "Language-Team: LANGUAGE \n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" -"POT-Creation-Date: 2023-07-13T09:16:51+00:00\n" +"POT-Creation-Date: 2023-07-29T13:07:44+00:00\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "X-Generator: WP-CLI 2.5.0\n" @@ -729,67 +729,27 @@ msgid "Stackable global color palette" msgstr "" #: src/global-settings.php:126 -msgid "Stackable global colors display only global colors" +msgid "Hide theme colors in the Stackable color picker" msgstr "" #: src/global-settings.php:138 -msgid "Stackable global typography apply to setting" +msgid "Hide default colors in the Stackable color picker" msgstr "" #: src/global-settings.php:150 -msgid "Stackable global typography add important to global styles" -msgstr "" - -#: src/global-settings.php:222 -msgid "Stackable global typography settings" -msgstr "" - -#: src/global-settings.php:275 -msgid "Black" -msgstr "" - -#: src/global-settings.php:280 -msgid "Cyan bluish gray" -msgstr "" - -#: src/global-settings.php:285 -msgid "White" -msgstr "" - -#: src/global-settings.php:290 -msgid "Pale pink" -msgstr "" - -#: src/global-settings.php:295 -msgid "Vivid red" +msgid "Hide Site Editor colors in the Stackable color picker" msgstr "" -#: src/global-settings.php:300 -msgid "Luminous vivid orange" -msgstr "" - -#: src/global-settings.php:305 -msgid "Luminous vivid amber" -msgstr "" - -#: src/global-settings.php:310 -msgid "Light green cyan" -msgstr "" - -#: src/global-settings.php:315 -msgid "Vivid green cyan" -msgstr "" - -#: src/global-settings.php:320 -msgid "Pale cyan blue" +#: src/global-settings.php:162 +msgid "Stackable global typography apply to setting" msgstr "" -#: src/global-settings.php:325 -msgid "Vivid cyan blue" +#: src/global-settings.php:174 +msgid "Stackable global typography add important to global styles" msgstr "" -#: src/global-settings.php:330 -msgid "Vivid purple" +#: src/global-settings.php:246 +msgid "Stackable global typography settings" msgstr "" #: src/pro.php:49 @@ -951,7 +911,7 @@ msgid "230+ Additional Library Designs" msgstr "" #: src/welcome/index.php:243 -#: pro__premium_only/src/format-types/dynamic-content/index.js:205 +#: pro__premium_only/src/format-types/dynamic-content/index.js:206 msgid "Dynamic Content" msgstr "" @@ -1046,27 +1006,24 @@ msgstr "" msgid "Stackable Onboarding Wizard" msgstr "" -#: pro__premium_only/src/block-components/conditional-display/delete-button.js:47 +#: pro__premium_only/src/block-components/conditional-display/delete-button.js:48 msgid "Delete Condition" msgstr "" -#: pro__premium_only/src/block-components/conditional-display/delete-button.js:50 +#: pro__premium_only/src/block-components/conditional-display/delete-button.js:51 msgid "Deleting will remove this condition for the block. Proceed?" msgstr "" -#: pro__premium_only/src/block-components/conditional-display/delete-button.js:62 +#: pro__premium_only/src/block-components/conditional-display/delete-button.js:63 #: pro__premium_only/src/block-components/conditional-display/index.js:55 #: pro__premium_only/src/block-components/conditional-display/index.js:56 -#: src/plugins/global-settings/colors/color-picker.js:102 msgid "Delete" msgstr "" -#: pro__premium_only/src/block-components/conditional-display/delete-button.js:68 +#: pro__premium_only/src/block-components/conditional-display/delete-button.js:69 #: pro__premium_only/src/components/panel-design-user-library/modal-design-manage.js:130 #: pro__premium_only/src/components/panel-design-user-library/modal-design-new.js:111 #: pro__premium_only/src/welcome/custom-fields/admin.js:399 -#: src/plugins/global-settings/colors/color-picker.js:108 -#: src/plugins/global-settings/colors/color-picker.js:171 msgid "Cancel" msgstr "" @@ -1077,10 +1034,10 @@ msgstr "" #: pro__premium_only/src/conditional-display/site-option.js:29 #: pro__premium_only/src/deprecated/v2/components/effects-settings/index.js:39 #: src/block-components/advanced/edit.js:80 -#: src/block-components/button/edit.js:59 +#: src/block-components/button/edit.js:57 #: src/block-components/helpers/borders/edit.js:23 -#: src/block-components/image/edit.js:414 -#: src/block-components/typography/edit.js:218 +#: src/block-components/image/edit.js:415 +#: src/block-components/typography/edit.js:203 #: src/block/countdown/edit.js:62 #: src/block/table-of-contents/edit.js:73 #: src/components/blend-mode-control/index.js:17 @@ -1171,7 +1128,7 @@ msgstr "" #: pro__premium_only/src/block-components/transform/transform-control.js:50 #: pro__premium_only/src/deprecated/v2/components/effects-settings/index.js:46 #: pro__premium_only/src/deprecated/v2/components/effects-settings/index.js:47 -#: src/block-components/button/edit.js:71 +#: src/block-components/button/edit.js:69 #: src/deprecated/v2/components/button-controls/index.js:216 msgid "Scale" msgstr "" @@ -1208,8 +1165,8 @@ msgid "Slow" msgstr "" #: pro__premium_only/src/block-components/effects-animations/index.js:62 -#: src/block-components/typography/edit.js:201 -#: src/block-components/typography/edit.js:231 +#: src/block-components/typography/edit.js:186 +#: src/block-components/typography/edit.js:216 #: src/components/blend-mode-control/index.js:18 #: src/components/typography-control/index.js:129 #: src/deprecated/v2/block/columns/edit.js:336 @@ -1315,14 +1272,14 @@ msgstr "" #: pro__premium_only/src/block-components/icon/background-shape-controls.js:36 #: pro__premium_only/src/block-components/icon/background-shape-controls.js:41 #: pro__premium_only/src/features/icon-controls/index.js:260 -#: src/block-components/image/edit.js:448 +#: src/block-components/image/edit.js:449 #: src/block/number-box/edit.js:80 #: src/components/image-shape-control/index.js:59 msgid "Shape" msgstr "" #: pro__premium_only/src/block-components/icon/background-shape-controls.js:42 -#: src/block-components/image/edit.js:449 +#: src/block-components/image/edit.js:450 msgid "Change the shape of the image" msgstr "" @@ -1363,12 +1320,12 @@ msgstr "" #: pro__premium_only/src/block-components/icon/gradient-controls.js:31 #: pro__premium_only/src/features/icon-controls/index.js:105 #: pro__premium_only/src/features/icon-controls/index.js:225 -#: src/block-components/button/edit.js:159 -#: src/block-components/helpers/backgrounds/edit.js:141 -#: src/block-components/image/edit.js:350 +#: src/block-components/button/edit.js:156 +#: src/block-components/helpers/backgrounds/edit.js:166 +#: src/block-components/image/edit.js:351 #: src/block-components/progress-bar/edit.js:155 #: src/block-components/progress-bar/edit.js:183 -#: src/block-components/typography/edit.js:315 +#: src/block-components/typography/edit.js:299 #: src/deprecated/v2/components/background-controls/index.js:109 #: src/deprecated/v2/components/button-controls/index.js:171 #: src/deprecated/v2/components/button-controls/index.js:279 @@ -1379,11 +1336,11 @@ msgstr "" #: pro__premium_only/src/block-components/icon/index.js:56 #: pro__premium_only/src/features/icon-controls/index.js:67 #: pro__premium_only/src/features/icon-controls/index.js:192 -#: src/block-components/button/edit.js:134 -#: src/block-components/helpers/backgrounds/edit.js:39 +#: src/block-components/button/edit.js:131 +#: src/block-components/helpers/backgrounds/edit.js:40 #: src/block-components/image/edit.js:275 #: src/block-components/progress-bar/edit.js:36 -#: src/block-components/typography/edit.js:60 +#: src/block-components/typography/edit.js:56 #: src/deprecated/v2/components/background-controls/index.js:51 #: src/deprecated/v2/components/button-controls/index.js:138 #: src/deprecated/v2/components/icon-controls/index.js:81 @@ -1445,11 +1402,11 @@ msgstr "" #: pro__premium_only/src/features/icon-controls/index.js:88 #: pro__premium_only/src/features/icon-controls/index.js:97 #: pro__premium_only/src/features/icon-controls/index.js:132 -#: src/block-components/button/edit.js:191 +#: src/block-components/button/edit.js:177 #: src/block-components/icon/edit.js:121 #: src/block/notification/edit.js:143 -#: src/block/tab-labels/edit.js:469 -#: src/block/tab-labels/edit.js:501 +#: src/block/tab-labels/edit.js:478 +#: src/block/tab-labels/edit.js:510 #: src/deprecated/v2/block/icon-list/edit.js:148 #: src/deprecated/v2/block/notification/edit.js:386 #: src/deprecated/v2/components/icon-controls/index.js:104 @@ -1553,13 +1510,13 @@ msgstr "" #: src/block-components/advanced/edit.js:65 #: src/block-components/advanced/edit.js:76 #: src/block-components/advanced/edit.js:128 -#: src/block-components/helpers/backgrounds/edit.js:294 -#: src/block-components/helpers/backgrounds/edit.js:316 -#: src/block-components/helpers/backgrounds/edit.js:333 -#: src/block-components/image/edit.js:410 -#: src/block-components/typography/edit.js:200 -#: src/block-components/typography/edit.js:214 -#: src/block-components/typography/edit.js:230 +#: src/block-components/helpers/backgrounds/edit.js:319 +#: src/block-components/helpers/backgrounds/edit.js:341 +#: src/block-components/helpers/backgrounds/edit.js:358 +#: src/block-components/image/edit.js:411 +#: src/block-components/typography/edit.js:185 +#: src/block-components/typography/edit.js:199 +#: src/block-components/typography/edit.js:215 #: src/block/accordion/variations.js:36 #: src/block/accordion/variations.js:41 #: src/block/blockquote/variations.js:35 @@ -1670,8 +1627,8 @@ msgid "Ease In Out Back" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:60 -#: src/block-components/typography/edit.js:212 -#: src/block-components/typography/edit.js:223 +#: src/block-components/typography/edit.js:197 +#: src/block-components/typography/edit.js:208 #: src/components/typography-control/index.js:143 #: src/components/typography-control/index.js:155 msgid "Transform" @@ -1682,7 +1639,7 @@ msgid "Transform Origin" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:69 -#: src/block-components/helpers/backgrounds/edit.js:295 +#: src/block-components/helpers/backgrounds/edit.js:320 #: src/deprecated/v2/components/background-controls/index.js:257 #: src/deprecated/v2/components/background-controls/index.js:277 #: src/deprecated/v2/components/background-controls/index.js:297 @@ -1691,7 +1648,7 @@ msgid "Top Left" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:70 -#: src/block-components/helpers/backgrounds/edit.js:296 +#: src/block-components/helpers/backgrounds/edit.js:321 #: src/deprecated/v2/components/background-controls/index.js:258 #: src/deprecated/v2/components/background-controls/index.js:278 #: src/deprecated/v2/components/background-controls/index.js:298 @@ -1700,7 +1657,7 @@ msgid "Top Center" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:71 -#: src/block-components/helpers/backgrounds/edit.js:297 +#: src/block-components/helpers/backgrounds/edit.js:322 #: src/deprecated/v2/components/background-controls/index.js:259 #: src/deprecated/v2/components/background-controls/index.js:279 #: src/deprecated/v2/components/background-controls/index.js:299 @@ -1709,7 +1666,7 @@ msgid "Top Right" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:72 -#: src/block-components/helpers/backgrounds/edit.js:298 +#: src/block-components/helpers/backgrounds/edit.js:323 #: src/deprecated/v2/components/background-controls/index.js:260 #: src/deprecated/v2/components/background-controls/index.js:280 #: src/deprecated/v2/components/background-controls/index.js:300 @@ -1718,7 +1675,7 @@ msgid "Center Left" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:73 -#: src/block-components/helpers/backgrounds/edit.js:299 +#: src/block-components/helpers/backgrounds/edit.js:324 #: src/deprecated/v2/components/background-controls/index.js:261 #: src/deprecated/v2/components/background-controls/index.js:281 #: src/deprecated/v2/components/background-controls/index.js:301 @@ -1727,7 +1684,7 @@ msgid "Center Center" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:74 -#: src/block-components/helpers/backgrounds/edit.js:300 +#: src/block-components/helpers/backgrounds/edit.js:325 #: src/deprecated/v2/components/background-controls/index.js:262 #: src/deprecated/v2/components/background-controls/index.js:282 #: src/deprecated/v2/components/background-controls/index.js:302 @@ -1736,7 +1693,7 @@ msgid "Center Right" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:75 -#: src/block-components/helpers/backgrounds/edit.js:301 +#: src/block-components/helpers/backgrounds/edit.js:326 #: src/deprecated/v2/components/background-controls/index.js:263 #: src/deprecated/v2/components/background-controls/index.js:283 #: src/deprecated/v2/components/background-controls/index.js:303 @@ -1745,7 +1702,7 @@ msgid "Bottom Left" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:76 -#: src/block-components/helpers/backgrounds/edit.js:302 +#: src/block-components/helpers/backgrounds/edit.js:327 #: src/deprecated/v2/components/background-controls/index.js:264 #: src/deprecated/v2/components/background-controls/index.js:284 #: src/deprecated/v2/components/background-controls/index.js:304 @@ -1754,7 +1711,7 @@ msgid "Bottom Center" msgstr "" #: pro__premium_only/src/block-components/transform/index.js:77 -#: src/block-components/helpers/backgrounds/edit.js:303 +#: src/block-components/helpers/backgrounds/edit.js:328 #: src/deprecated/v2/components/background-controls/index.js:265 #: src/deprecated/v2/components/background-controls/index.js:285 #: src/deprecated/v2/components/background-controls/index.js:305 @@ -2333,13 +2290,11 @@ msgstr "" #: pro__premium_only/src/components/panel-design-user-library/index.js:313 #: pro__premium_only/src/components/panel-design-user-library/modal-design-manage.js:131 -#: pro__premium_only/src/conditional-display/date-time.js:74 +#: pro__premium_only/src/conditional-display/date-time.js:75 #: src/components/advanced-range-control/range-control.js:191 #: src/components/base-control/index.js:61 #: src/components/base-control2/reset-button.js:36 #: src/deprecated/v2/components/columns-width-control/index.js:213 -#: src/plugins/global-settings/colors/color-picker.js:141 -#: src/plugins/global-settings/colors/color-picker.js:165 msgid "Reset" msgstr "" @@ -2591,59 +2546,59 @@ msgstr "" msgid "If a syntax error is present, check your PHP code" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:90 -#: pro__premium_only/src/conditional-display/date-time.js:95 +#: pro__premium_only/src/conditional-display/date-time.js:91 +#: pro__premium_only/src/conditional-display/date-time.js:96 #: src/block/countdown/edit.js:192 msgid "Start Date" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:94 +#: pro__premium_only/src/conditional-display/date-time.js:95 msgid "Now" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:102 -#: pro__premium_only/src/conditional-display/date-time.js:107 +#: pro__premium_only/src/conditional-display/date-time.js:103 +#: pro__premium_only/src/conditional-display/date-time.js:108 #: src/block/countdown/edit.js:192 msgid "End Date" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:106 +#: pro__premium_only/src/conditional-display/date-time.js:107 msgid "Never" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:114 +#: pro__premium_only/src/conditional-display/date-time.js:115 msgid "Days of the Week" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:117 +#: pro__premium_only/src/conditional-display/date-time.js:118 msgid "If set, the block will be displayed / hidden on selected days." msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:120 +#: pro__premium_only/src/conditional-display/date-time.js:121 msgid "Sunday" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:125 +#: pro__premium_only/src/conditional-display/date-time.js:126 msgid "Monday" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:130 +#: pro__premium_only/src/conditional-display/date-time.js:131 msgid "Tuesday" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:135 +#: pro__premium_only/src/conditional-display/date-time.js:136 msgid "Wednesday" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:140 +#: pro__premium_only/src/conditional-display/date-time.js:141 msgid "Thursday" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:145 +#: pro__premium_only/src/conditional-display/date-time.js:146 msgid "Friday" msgstr "" -#: pro__premium_only/src/conditional-display/date-time.js:150 +#: pro__premium_only/src/conditional-display/date-time.js:151 msgid "Saturday" msgstr "" @@ -2788,7 +2743,7 @@ msgstr "" #: pro__premium_only/src/deprecated/v2/block/blog-posts/index.js:128 #: pro__premium_only/src/deprecated/v2/block/blog-posts/index.js:184 -#: src/block-components/typography/edit.js:342 +#: src/block-components/typography/edit.js:326 #: src/block/heading/edit.js:190 #: src/block/heading/edit.js:236 #: src/components/align-buttons-control/index.js:62 @@ -2892,7 +2847,7 @@ msgstr "" #: src/block-components/columns/edit.js:173 #: src/block-components/helpers/flex-gap/edit.js:16 #: src/block/icon-list/edit.js:222 -#: src/block/tab-labels/edit.js:410 +#: src/block/tab-labels/edit.js:419 #: src/block/table-of-contents/edit.js:382 #: src/block/text/edit.js:147 msgid "Column Gap" @@ -2903,7 +2858,7 @@ msgstr "" #: src/block-components/columns/edit.js:190 #: src/block-components/helpers/flex-gap/edit.js:24 #: src/block/icon-list/edit.js:230 -#: src/block/tab-labels/edit.js:420 +#: src/block/tab-labels/edit.js:429 #: src/block/table-of-contents/edit.js:391 msgid "Row Gap" msgstr "" @@ -2916,8 +2871,8 @@ msgstr "" #: pro__premium_only/src/deprecated/v2/block/testimonial/index.js:90 #: pro__premium_only/src/deprecated/v2/block/testimonial/index.js:135 #: pro__premium_only/src/deprecated/v2/block/testimonial/index.js:196 -#: src/block-components/image/edit.js:531 -#: src/components/resizer-tooltip/index.js:277 +#: src/block-components/image/edit.js:532 +#: src/components/resizer-tooltip/index.js:278 #: src/deprecated/v2/block/blog-posts/edit.js:411 #: src/deprecated/v2/block/card/edit.js:286 #: src/deprecated/v2/block/card/edit.js:362 @@ -2982,7 +2937,7 @@ msgstr "" #: src/block-components/alignment/edit.js:157 #: src/block-components/alignment/edit.js:176 #: src/block-components/alignment/edit.js:195 -#: src/components/resizable-column/index.js:545 +#: src/components/resizable-column/index.js:546 msgid "Column" msgstr "" @@ -3021,7 +2976,7 @@ msgstr "" #: src/block/carousel/edit.js:395 #: src/block/carousel/edit.js:425 #: src/block/icon-list/edit.js:268 -#: src/block/tab-labels/edit.js:535 +#: src/block/tab-labels/edit.js:544 #: src/components/icon-control/index.js:67 #: src/deprecated/v2/block/blockquote/edit.js:236 #: src/deprecated/v2/block/count-up/edit.js:243 @@ -3112,7 +3067,7 @@ msgstr "" #: pro__premium_only/src/deprecated/v2/block/pricing-box/index.js:171 #: pro__premium_only/src/dynamic-content/components/image-size-control.js:17 -#: src/block-components/helpers/backgrounds/edit.js:330 +#: src/block-components/helpers/backgrounds/edit.js:355 #: src/block-components/image/edit.js:228 #: src/block/posts/edit.js:564 #: src/components/image-size-control/index.js:51 @@ -3233,8 +3188,8 @@ msgstr "" #: pro__premium_only/src/deprecated/v2/block/testimonial/vertical.js:63 #: src/block-components/helpers/borders/edit.js:99 #: src/block-components/separator/edit.js:93 -#: src/block-components/typography/edit.js:331 -#: src/components/shadow-control/index.js:347 +#: src/block-components/typography/edit.js:315 +#: src/components/shadow-control/index.js:349 #: src/deprecated/v2/block/accordion/edit.js:218 #: src/deprecated/v2/block/blockquote/edit.js:196 #: src/deprecated/v2/block/blog-posts/edit.js:229 @@ -3301,7 +3256,7 @@ msgstr "" #: pro__premium_only/src/deprecated/v2/components/effects-settings/index.js:41 #: pro__premium_only/src/deprecated/v2/components/effects-settings/index.js:42 -#: src/block-components/button/edit.js:67 +#: src/block-components/button/edit.js:65 #: src/deprecated/v2/components/button-controls/index.js:213 msgid "Lift" msgstr "" @@ -3338,7 +3293,7 @@ msgid "Grayscale Hover Effect" msgstr "" #: pro__premium_only/src/deprecated/v2/components/effects-settings/index.js:82 -#: src/block-components/button/edit.js:95 +#: src/block-components/button/edit.js:93 #: src/deprecated/v2/components/button-controls/index.js:205 msgid "Hover Effect" msgstr "" @@ -3395,8 +3350,8 @@ msgid "Custom Text" msgstr "" #: pro__premium_only/src/dynamic-content/components/date-format-picker.js:23 -#: src/block-components/helpers/backgrounds/edit.js:337 -#: src/components/shadow-control/index.js:317 +#: src/block-components/helpers/backgrounds/edit.js:362 +#: src/components/shadow-control/index.js:318 #: src/deprecated/v2/components/background-controls/index.js:367 #: src/deprecated/v2/components/background-controls/index.js:382 #: src/deprecated/v2/components/background-controls/index.js:397 @@ -3551,13 +3506,13 @@ msgstr "" #: pro__premium_only/src/features/icon-controls/index.js:63 #: pro__premium_only/src/features/icon-controls/index.js:188 -#: src/block-components/button/edit.js:130 -#: src/block-components/helpers/backgrounds/edit.js:35 +#: src/block-components/button/edit.js:127 +#: src/block-components/helpers/backgrounds/edit.js:36 #: src/block-components/icon/edit.js:73 #: src/block-components/icon/edit.js:80 #: src/block-components/image/edit.js:271 #: src/block-components/progress-bar/edit.js:32 -#: src/block-components/typography/edit.js:56 +#: src/block-components/typography/edit.js:52 #: src/deprecated/v2/components/background-controls/index.js:47 #: src/deprecated/v2/components/button-controls/index.js:134 #: src/deprecated/v2/components/icon-controls/index.js:77 @@ -3646,16 +3601,16 @@ msgid "Used to paste core/stackable block styles" msgstr "" #: pro__premium_only/src/plugins/copy-paste-styles/multiple-dropdown.js:86 -#: pro__premium_only/src/plugins/copy-paste-styles/toolbar-button.js:102 +#: pro__premium_only/src/plugins/copy-paste-styles/toolbar-button.js:101 msgid "Adv Copy Styles" msgstr "" #: pro__premium_only/src/plugins/copy-paste-styles/multiple-dropdown.js:98 -#: pro__premium_only/src/plugins/copy-paste-styles/toolbar-button.js:118 +#: pro__premium_only/src/plugins/copy-paste-styles/toolbar-button.js:117 msgid "Adv Paste Styles" msgstr "" -#: pro__premium_only/src/plugins/copy-paste-styles/toolbar-button.js:85 +#: pro__premium_only/src/plugins/copy-paste-styles/toolbar-button.js:83 msgid "Copy & paste styles" msgstr "" @@ -3986,7 +3941,7 @@ msgid "Overflow" msgstr "" #: src/block-components/advanced/edit.js:66 -#: src/block-components/helpers/backgrounds/edit.js:334 +#: src/block-components/helpers/backgrounds/edit.js:359 #: src/components/resizable-column/index.js:474 #: src/components/resizable-column/index.js:482 #: src/components/resizable-column/index.js:491 @@ -4088,7 +4043,7 @@ msgid "%s Alignment" msgstr "" #: src/block-components/alignment/edit.js:80 -#: src/block-components/typography/edit.js:123 +#: src/block-components/typography/edit.js:108 #: src/block/button-group/edit.js:169 msgid "Content" msgstr "" @@ -4312,43 +4267,43 @@ msgstr "" msgid "Styles" msgstr "" -#: src/block-components/button/edit.js:63 +#: src/block-components/button/edit.js:61 #: src/components/blend-mode-control/index.js:22 msgid "Darken" msgstr "" -#: src/block-components/button/edit.js:75 +#: src/block-components/button/edit.js:73 #: src/deprecated/v2/components/button-controls/index.js:219 msgid "Lift & Scale" msgstr "" -#: src/block-components/button/edit.js:79 +#: src/block-components/button/edit.js:77 msgid "Lift More" msgstr "" -#: src/block-components/button/edit.js:83 +#: src/block-components/button/edit.js:81 #: src/deprecated/v2/components/button-controls/index.js:222 msgid "Scale More" msgstr "" -#: src/block-components/button/edit.js:87 +#: src/block-components/button/edit.js:85 #: src/deprecated/v2/components/button-controls/index.js:225 msgid "Lift & Scale More" msgstr "" -#: src/block-components/button/edit.js:101 +#: src/block-components/button/edit.js:99 msgid "Hover effect" msgstr "" -#: src/block-components/button/edit.js:102 +#: src/block-components/button/edit.js:100 msgid "Triggers animation or effects when you mouse over" msgstr "" -#: src/block-components/button/edit.js:143 +#: src/block-components/button/edit.js:140 msgid "Button Color #%s" msgstr "" -#: src/block-components/button/edit.js:144 +#: src/block-components/button/edit.js:141 #: src/deprecated/v2/components/button-controls/index.js:153 #: src/deprecated/v2/components/button-controls/index.js:154 #: src/deprecated/v2/components/button-controls/index.js:163 @@ -4358,14 +4313,14 @@ msgstr "" msgid "Button Color" msgstr "" -#: src/block-components/button/edit.js:153 +#: src/block-components/button/edit.js:150 msgid "Button Color #2" msgstr "" -#: src/block-components/button/edit.js:183 -#: src/block-components/typography/edit.js:301 -#: src/block/tab-labels/edit.js:463 -#: src/block/tab-labels/edit.js:495 +#: src/block-components/button/edit.js:169 +#: src/block-components/typography/edit.js:285 +#: src/block/tab-labels/edit.js:472 +#: src/block/tab-labels/edit.js:504 #: src/deprecated/v2/block/blockquote/edit.js:311 #: src/deprecated/v2/block/blog-posts/edit.js:664 #: src/deprecated/v2/block/blog-posts/edit.js:714 @@ -4387,41 +4342,41 @@ msgstr "" msgid "Text Color" msgstr "" -#: src/block-components/button/edit.js:203 +#: src/block-components/button/edit.js:189 msgid "Button Colors" msgstr "" -#: src/block-components/button/edit.js:229 +#: src/block-components/button/edit.js:215 #: src/block/tab-labels/edit.js:345 #: src/deprecated/v2/block/button/edit.js:57 msgid "Full Width" msgstr "" -#: src/block-components/button/edit.js:234 +#: src/block-components/button/edit.js:220 msgid "Min. Button Height" msgstr "" -#: src/block-components/button/edit.js:242 +#: src/block-components/button/edit.js:228 msgid "Button Width" msgstr "" -#: src/block-components/button/edit.js:251 +#: src/block-components/button/edit.js:237 msgid "Button Padding" msgstr "" -#: src/block-components/button/edit.js:261 +#: src/block-components/button/edit.js:247 msgid "Button padding" msgstr "" -#: src/block-components/button/edit.js:262 +#: src/block-components/button/edit.js:248 msgid "Adjusts the space between the button text and button borders" msgstr "" -#: src/block-components/button/edit.js:272 +#: src/block-components/button/edit.js:258 msgid "Button Size & Spacing" msgstr "" -#: src/block-components/button/edit.js:300 +#: src/block-components/button/edit.js:286 msgid "Button Borders & Shadows" msgstr "" @@ -4530,17 +4485,17 @@ msgstr "" msgid "Custom Attributes" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:81 -#: src/block-components/helpers/backgrounds/edit.js:117 -#: src/block-components/image/edit.js:286 -#: src/block-components/image/edit.js:295 +#: src/block-components/helpers/backgrounds/edit.js:106 +#: src/block-components/helpers/backgrounds/edit.js:142 +#: src/block-components/image/edit.js:287 +#: src/block-components/image/edit.js:296 msgctxt "option title" msgid "%s #%d" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:81 -#: src/block-components/helpers/backgrounds/edit.js:82 -#: src/block-components/helpers/backgrounds/edit.js:117 +#: src/block-components/helpers/backgrounds/edit.js:106 +#: src/block-components/helpers/backgrounds/edit.js:107 +#: src/block-components/helpers/backgrounds/edit.js:142 #: src/block-components/progress-bar/edit.js:234 #: src/deprecated/v2/block/header/edit.js:335 #: src/deprecated/v2/block/separator/edit.js:188 @@ -4548,32 +4503,32 @@ msgstr "" msgid "Background Color" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:101 +#: src/block-components/helpers/backgrounds/edit.js:126 #: src/deprecated/v2/block/header/edit.js:340 #: src/deprecated/v2/components/background-controls/index.js:76 msgid "Background Color Opacity" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:111 +#: src/block-components/helpers/backgrounds/edit.js:136 msgid "Adjusts the transparency of the background color" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:124 +#: src/block-components/helpers/backgrounds/edit.js:149 #: src/block-components/progress-bar/edit.js:166 #: src/deprecated/v2/components/background-controls/index.js:98 msgid "Adv. Gradient Color Settings" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:150 -#: src/block-components/image/edit.js:360 +#: src/block-components/helpers/backgrounds/edit.js:175 +#: src/block-components/image/edit.js:361 #: src/block-components/progress-bar/edit.js:193 msgid "Sets the direction (in degrees) of the colors" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:155 -#: src/block-components/helpers/backgrounds/edit.js:169 -#: src/block-components/image/edit.js:365 -#: src/block-components/image/edit.js:380 +#: src/block-components/helpers/backgrounds/edit.js:180 +#: src/block-components/helpers/backgrounds/edit.js:194 +#: src/block-components/image/edit.js:366 +#: src/block-components/image/edit.js:381 #: src/block-components/progress-bar/edit.js:197 #: src/block-components/progress-bar/edit.js:210 #: src/deprecated/v2/components/background-controls/index.js:123 @@ -4581,42 +4536,42 @@ msgstr "" msgid "Color %d Location" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:164 -#: src/block-components/helpers/backgrounds/edit.js:178 -#: src/block-components/image/edit.js:375 -#: src/block-components/image/edit.js:390 +#: src/block-components/helpers/backgrounds/edit.js:189 +#: src/block-components/helpers/backgrounds/edit.js:203 +#: src/block-components/image/edit.js:376 +#: src/block-components/image/edit.js:391 #: src/block-components/progress-bar/edit.js:206 #: src/block-components/progress-bar/edit.js:219 msgid "Sets the placement of each color in relation to the other color" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:184 +#: src/block-components/helpers/backgrounds/edit.js:209 #: src/block-components/progress-bar/edit.js:223 #: src/deprecated/v2/components/background-controls/index.js:151 msgid "Background Gradient Blend Mode" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:188 -#: src/block-components/helpers/backgrounds/edit.js:362 +#: src/block-components/helpers/backgrounds/edit.js:213 +#: src/block-components/helpers/backgrounds/edit.js:387 #: src/block-components/progress-bar/edit.js:227 msgid "Sets how this background gradient/image blends into the other background" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:201 +#: src/block-components/helpers/backgrounds/edit.js:226 #: src/deprecated/v2/components/background-controls/index.js:168 #: src/deprecated/v2/components/background-controls/index.js:179 #: src/deprecated/v2/components/background-controls/index.js:190 msgid "Background Image or Video" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:201 +#: src/block-components/helpers/backgrounds/edit.js:226 #: src/deprecated/v2/components/background-controls/index.js:168 #: src/deprecated/v2/components/background-controls/index.js:179 #: src/deprecated/v2/components/background-controls/index.js:190 msgid "Background Image" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:202 +#: src/block-components/helpers/backgrounds/edit.js:227 #: src/block/video-popup/edit.js:99 #: src/deprecated/v2/block/video-popup/edit.js:81 #: src/deprecated/v2/components/background-controls/index.js:169 @@ -4625,48 +4580,48 @@ msgstr "" msgid "Use .mp4 format for videos" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:233 +#: src/block-components/helpers/backgrounds/edit.js:258 #: src/deprecated/v2/components/background-controls/index.js:205 msgid "Background Media Tint Strength" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:243 +#: src/block-components/helpers/backgrounds/edit.js:268 msgid "Adjusts the intensity of the background media tint" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:250 +#: src/block-components/helpers/backgrounds/edit.js:275 #: src/deprecated/v2/components/background-controls/index.js:232 msgid "Fixed Background" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:254 +#: src/block-components/helpers/backgrounds/edit.js:279 msgid "Keeps the background image fixed in place while scrolling" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:261 +#: src/block-components/helpers/backgrounds/edit.js:286 #: src/deprecated/v2/components/background-controls/index.js:242 msgid "Adv. Background Image Settings" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:291 +#: src/block-components/helpers/backgrounds/edit.js:316 #: src/deprecated/v2/components/background-controls/index.js:254 #: src/deprecated/v2/components/background-controls/index.js:274 #: src/deprecated/v2/components/background-controls/index.js:294 msgid "Image Position" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:307 +#: src/block-components/helpers/backgrounds/edit.js:332 msgid "Chooses which part of the background image will be the focal point" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:313 +#: src/block-components/helpers/backgrounds/edit.js:338 #: src/deprecated/v2/components/background-controls/index.js:315 #: src/deprecated/v2/components/background-controls/index.js:330 #: src/deprecated/v2/components/background-controls/index.js:345 msgid "Image Repeat" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:317 +#: src/block-components/helpers/backgrounds/edit.js:342 #: src/deprecated/v2/components/background-controls/index.js:318 #: src/deprecated/v2/components/background-controls/index.js:333 #: src/deprecated/v2/components/background-controls/index.js:348 @@ -4674,7 +4629,7 @@ msgstr "" msgid "No-Repeat" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:318 +#: src/block-components/helpers/backgrounds/edit.js:343 #: src/deprecated/v2/components/background-controls/index.js:319 #: src/deprecated/v2/components/background-controls/index.js:334 #: src/deprecated/v2/components/background-controls/index.js:349 @@ -4682,7 +4637,7 @@ msgstr "" msgid "Repeat" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:319 +#: src/block-components/helpers/backgrounds/edit.js:344 #: src/deprecated/v2/components/background-controls/index.js:320 #: src/deprecated/v2/components/background-controls/index.js:335 #: src/deprecated/v2/components/background-controls/index.js:350 @@ -4690,7 +4645,7 @@ msgstr "" msgid "Repeat-X" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:320 +#: src/block-components/helpers/backgrounds/edit.js:345 #: src/deprecated/v2/components/background-controls/index.js:321 #: src/deprecated/v2/components/background-controls/index.js:336 #: src/deprecated/v2/components/background-controls/index.js:351 @@ -4698,12 +4653,12 @@ msgstr "" msgid "Repeat-Y" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:324 +#: src/block-components/helpers/backgrounds/edit.js:349 msgid "Covers the background with tiled images" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:335 -#: src/block-components/image/edit.js:412 +#: src/block-components/helpers/backgrounds/edit.js:360 +#: src/block-components/image/edit.js:413 #: src/block/team-member/variations.js:131 #: src/block/team-member/variations.js:135 #: src/deprecated/v2/components/background-controls/index.js:365 @@ -4713,8 +4668,8 @@ msgstr "" msgid "Cover" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:336 -#: src/block-components/image/edit.js:411 +#: src/block-components/helpers/backgrounds/edit.js:361 +#: src/block-components/image/edit.js:412 #: src/deprecated/v2/components/background-controls/index.js:366 #: src/deprecated/v2/components/background-controls/index.js:381 #: src/deprecated/v2/components/background-controls/index.js:396 @@ -4722,11 +4677,11 @@ msgstr "" msgid "Contain" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:341 +#: src/block-components/helpers/backgrounds/edit.js:366 msgid "Sets the display image size" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:348 +#: src/block-components/helpers/backgrounds/edit.js:373 #: src/deprecated/v2/components/background-controls/index.js:408 #: src/deprecated/v2/components/background-controls/index.js:423 #: src/deprecated/v2/components/background-controls/index.js:438 @@ -4734,7 +4689,7 @@ msgstr "" msgid "Custom Size" msgstr "" -#: src/block-components/helpers/backgrounds/edit.js:358 +#: src/block-components/helpers/backgrounds/edit.js:383 #: src/deprecated/v2/components/background-controls/index.js:453 msgid "Image Blend Mode" msgstr "" @@ -4886,8 +4841,8 @@ msgid "Icon Rotation" msgstr "" #: src/block-components/icon/edit.js:165 -#: src/block/tab-labels/edit.js:381 -#: src/block/tab-labels/edit.js:568 +#: src/block/tab-labels/edit.js:390 +#: src/block/tab-labels/edit.js:577 #: src/deprecated/v2/components/button-controls/index.js:448 msgid "Icon Position" msgstr "" @@ -4895,7 +4850,7 @@ msgstr "" #: src/block-components/icon/edit.js:176 #: src/block/icon-label/edit.js:90 #: src/block/icon-list/edit.js:238 -#: src/block/tab-labels/edit.js:430 +#: src/block/tab-labels/edit.js:439 #: src/block/table-of-contents/edit.js:399 msgid "Icon Gap" msgstr "" @@ -5019,72 +4974,72 @@ msgstr "" msgid "Adjusts the radius of image corners to make them more rounded" msgstr "" -#: src/block-components/image/edit.js:286 #: src/block-components/image/edit.js:287 -#: src/block-components/image/edit.js:295 +#: src/block-components/image/edit.js:288 +#: src/block-components/image/edit.js:296 #: src/deprecated/v2/block/image-box/edit.js:355 #: src/deprecated/v2/block/image-box/edit.js:371 #: src/deprecated/v2/block/image-box/edit.js:406 msgid "Overlay Color" msgstr "" -#: src/block-components/image/edit.js:303 +#: src/block-components/image/edit.js:304 msgid "Overlay Opacity" msgstr "" -#: src/block-components/image/edit.js:313 +#: src/block-components/image/edit.js:314 msgid "Overlay Blend Mode" msgstr "" -#: src/block-components/image/edit.js:317 +#: src/block-components/image/edit.js:318 msgid "Sets how the overlay color blends with the image" msgstr "" -#: src/block-components/image/edit.js:323 +#: src/block-components/image/edit.js:324 msgid "Gradient Overlay Settings" msgstr "" -#: src/block-components/image/edit.js:400 +#: src/block-components/image/edit.js:401 msgid "Focal point" msgstr "" -#: src/block-components/image/edit.js:407 +#: src/block-components/image/edit.js:408 msgid "Image Fit" msgstr "" -#: src/block-components/image/edit.js:413 +#: src/block-components/image/edit.js:414 msgid "Fill" msgstr "" -#: src/block-components/image/edit.js:415 +#: src/block-components/image/edit.js:416 msgid "Scale Down" msgstr "" -#: src/block-components/image/edit.js:419 +#: src/block-components/image/edit.js:420 msgid "Sets the fit to default, contain, cover, fill, none, and scale down. Image fit specifies how an image resizes in a container." msgstr "" -#: src/block-components/image/edit.js:427 +#: src/block-components/image/edit.js:428 msgid "Image Shape" msgstr "" -#: src/block-components/image/edit.js:453 +#: src/block-components/image/edit.js:454 #: src/deprecated/v2/components/image-shape-controls/index.js:32 msgid "Flip Shape Horizontally" msgstr "" -#: src/block-components/image/edit.js:457 +#: src/block-components/image/edit.js:458 #: src/deprecated/v2/components/image-shape-controls/index.js:40 msgid "Flip Shape Vertically" msgstr "" -#: src/block-components/image/edit.js:461 +#: src/block-components/image/edit.js:462 #: src/deprecated/v2/components/image-shape-controls/index.js:48 msgid "Stretch Shape Mask" msgstr "" -#: src/block-components/image/edit.js:469 -#: src/block-components/image/edit.js:477 +#: src/block-components/image/edit.js:470 +#: src/block-components/image/edit.js:478 msgid "Image Filter" msgstr "" @@ -5117,7 +5072,7 @@ msgid "Maximum Progress" msgstr "" #: src/block-components/progress-bar/edit.js:87 -#: src/block-components/typography/edit.js:272 +#: src/block-components/typography/edit.js:257 #: src/block/countdown/divider.js:89 #: src/block/countdown/divider.js:105 #: src/block/number-box/edit.js:88 @@ -5303,124 +5258,124 @@ msgstr "" msgid "Transform & Transition" msgstr "" -#: src/block-components/typography/edit.js:139 +#: src/block-components/typography/edit.js:124 msgid "Use theme heading margins" msgstr "" -#: src/block-components/typography/edit.js:152 -#: src/block-components/typography/edit.js:153 -#: src/block-components/typography/edit.js:425 -#: src/block/tab-labels/edit.js:517 +#: src/block-components/typography/edit.js:137 +#: src/block-components/typography/edit.js:138 +#: src/block-components/typography/edit.js:409 +#: src/block/tab-labels/edit.js:526 #: src/components/typography-control/index.js:343 msgid "Typography" msgstr "" -#: src/block-components/typography/edit.js:180 +#: src/block-components/typography/edit.js:165 #: src/components/font-family-control/index.js:67 #: src/components/typography-control/index.js:53 msgid "Font Family" msgstr "" -#: src/block-components/typography/edit.js:185 +#: src/block-components/typography/edit.js:170 #: src/components/typography-control/index.js:58 msgid "Sets the font set to be used for the element" msgstr "" -#: src/block-components/typography/edit.js:189 +#: src/block-components/typography/edit.js:174 #: src/components/typography-control/index.js:117 msgid "Weight" msgstr "" -#: src/block-components/typography/edit.js:202 +#: src/block-components/typography/edit.js:187 #: src/components/typography-control/index.js:130 msgid "Bold" msgstr "" -#: src/block-components/typography/edit.js:207 +#: src/block-components/typography/edit.js:192 #: src/components/typography-control/index.js:136 msgid "Font weight" msgstr "" -#: src/block-components/typography/edit.js:208 +#: src/block-components/typography/edit.js:193 #: src/components/typography-control/index.js:137 msgid "Sets the thinness or thickness of text characters" msgstr "" -#: src/block-components/typography/edit.js:215 +#: src/block-components/typography/edit.js:200 #: src/components/typography-control/index.js:146 msgid "Uppercase" msgstr "" -#: src/block-components/typography/edit.js:216 +#: src/block-components/typography/edit.js:201 #: src/components/typography-control/index.js:147 msgid "Lowercase" msgstr "" -#: src/block-components/typography/edit.js:217 +#: src/block-components/typography/edit.js:202 #: src/components/typography-control/index.js:148 msgid "Capitalize" msgstr "" -#: src/block-components/typography/edit.js:224 +#: src/block-components/typography/edit.js:209 #: src/components/typography-control/index.js:156 msgid "Sets the usage of upper or lower case" msgstr "" -#: src/block-components/typography/edit.js:228 +#: src/block-components/typography/edit.js:213 msgid "Font Style" msgstr "" -#: src/block-components/typography/edit.js:232 +#: src/block-components/typography/edit.js:217 msgid "Italic" msgstr "" -#: src/block-components/typography/edit.js:233 +#: src/block-components/typography/edit.js:218 msgid "Oblique" msgstr "" -#: src/block-components/typography/edit.js:238 +#: src/block-components/typography/edit.js:223 #: src/components/typography-control/index.js:164 #: src/components/typography-control/index.js:185 #: src/components/typography-control/index.js:206 msgid "Line-Height" msgstr "" -#: src/block-components/typography/edit.js:250 +#: src/block-components/typography/edit.js:235 #: src/components/typography-control/index.js:178 #: src/components/typography-control/index.js:199 #: src/components/typography-control/index.js:220 msgid "Line height" msgstr "" -#: src/block-components/typography/edit.js:251 +#: src/block-components/typography/edit.js:236 #: src/components/typography-control/index.js:179 #: src/components/typography-control/index.js:200 #: src/components/typography-control/index.js:221 msgid "Sets the vertical distance between lines of text" msgstr "" -#: src/block-components/typography/edit.js:255 +#: src/block-components/typography/edit.js:240 #: src/components/typography-control/index.js:231 #: src/components/typography-control/index.js:248 #: src/components/typography-control/index.js:265 msgid "Letter Spacing" msgstr "" -#: src/block-components/typography/edit.js:265 +#: src/block-components/typography/edit.js:250 #: src/components/typography-control/index.js:241 #: src/components/typography-control/index.js:258 #: src/components/typography-control/index.js:275 msgid "Letter spacing" msgstr "" -#: src/block-components/typography/edit.js:266 +#: src/block-components/typography/edit.js:251 #: src/components/typography-control/index.js:242 #: src/components/typography-control/index.js:259 #: src/components/typography-control/index.js:276 msgid "Sets the distance or space between letters" msgstr "" -#: src/block-components/typography/edit.js:283 +#: src/block-components/typography/edit.js:268 #: src/components/typography-control/index.js:76 #: src/components/typography-control/index.js:92 #: src/components/typography-control/index.js:108 @@ -5430,7 +5385,7 @@ msgstr "" msgid "Font size" msgstr "" -#: src/block-components/typography/edit.js:284 +#: src/block-components/typography/edit.js:269 #: src/components/typography-control/index.js:77 #: src/components/typography-control/index.js:93 #: src/components/typography-control/index.js:109 @@ -5440,8 +5395,8 @@ msgstr "" msgid "Sets the size of text characters" msgstr "" -#: src/block-components/typography/edit.js:300 -#: src/block-components/typography/edit.js:309 +#: src/block-components/typography/edit.js:284 +#: src/block-components/typography/edit.js:293 msgid "Text Color #%s" msgstr "" @@ -5964,7 +5919,7 @@ msgstr "" #: src/block/carousel/edit.js:425 #: src/block/carousel/edit.js:498 -#: src/components/resizer-tooltip/index.js:225 +#: src/components/resizer-tooltip/index.js:226 msgid "%s Size" msgstr "" @@ -7078,8 +7033,8 @@ msgstr "" msgid "Sectioned" msgstr "" -#: src/block/progress-bar/edit.js:92 -#: src/block/progress-circle/edit.js:97 +#: src/block/progress-bar/edit.js:94 +#: src/block/progress-circle/edit.js:99 #: src/deprecated/v2/block/number-box/edit.js:316 #: src/deprecated/v2/block/number-box/edit.js:322 #: src/deprecated/v2/block/number-box/edit.js:329 @@ -7143,35 +7098,39 @@ msgid "Delete tab" msgstr "" #: src/block/tab-labels/edit.js:334 -#: src/block/tab-labels/edit.js:635 +#: src/block/tab-labels/edit.js:644 msgid "Are you sure you want to delete this tab?" msgstr "" -#: src/block/tab-labels/edit.js:390 +#: src/block/tab-labels/edit.js:382 +msgid "Fixed Icon Position" +msgstr "" + +#: src/block/tab-labels/edit.js:399 msgid "Tab Alignment" msgstr "" -#: src/block/tab-labels/edit.js:402 +#: src/block/tab-labels/edit.js:411 msgid "Text Alignment" msgstr "" -#: src/block/tab-labels/edit.js:439 +#: src/block/tab-labels/edit.js:448 msgid "Scrollable Tabs on Mobile" msgstr "" -#: src/block/tab-labels/edit.js:449 +#: src/block/tab-labels/edit.js:458 msgid "Tab" msgstr "" -#: src/block/tab-labels/edit.js:486 +#: src/block/tab-labels/edit.js:495 msgid "Tab Active State" msgstr "" -#: src/block/tab-labels/edit.js:551 +#: src/block/tab-labels/edit.js:560 msgid "Change icons individually by clicking on each tab's icon." msgstr "" -#: src/block/tab-labels/edit.js:642 +#: src/block/tab-labels/edit.js:651 msgid "Tab Label" msgstr "" @@ -7501,12 +7460,27 @@ msgstr "" msgid "Edit" msgstr "" -#: src/components/color-palette-control/index.js:61 -#: src/plugins/global-settings/colors/color-picker.js:214 -msgid "Untitled Color" +#: src/components/color-palette-control/index.js:64 +#: src/plugins/global-settings/colors/index.js:119 +msgid "Global Colors" msgstr "" -#: src/components/color-palette-control/index.js:67 +#: src/components/color-palette-control/index.js:75 +msgctxt "Indicates this palette comes from the theme." +msgid "Theme" +msgstr "" + +#: src/components/color-palette-control/index.js:79 +msgctxt "Indicates this palette comes from WordPress." +msgid "Default" +msgstr "" + +#: src/components/color-palette-control/index.js:83 +msgctxt "Indicates this palette comes from the theme." +msgid "Custom" +msgstr "" + +#: src/components/color-palette-control/index.js:97 msgid "Transparent" msgstr "" @@ -7624,7 +7598,7 @@ msgstr "" msgid "Paragraph" msgstr "" -#: src/components/help-tooltip/index.js:51 +#: src/components/help-tooltip/index.js:52 msgid "Stop showing tooltips" msgstr "" @@ -8052,19 +8026,19 @@ msgstr "" msgid "Shadow Opacity" msgstr "" -#: src/components/shadow-control/index.js:215 +#: src/components/shadow-control/index.js:216 msgid "Advanced Shadow Options" msgstr "" -#: src/components/shadow-control/index.js:325 +#: src/components/shadow-control/index.js:326 msgid "Shadow Settings" msgstr "" -#: src/components/shadow-control/index.js:356 +#: src/components/shadow-control/index.js:358 msgid "Shadow/Outline" msgstr "" -#: src/components/shadow-control/index.js:357 +#: src/components/shadow-control/index.js:359 msgid "Adjusts the intensity of the shadow/outline of the block and the appearance of the block border" msgstr "" @@ -9314,52 +9288,36 @@ msgstr "" msgid "Default %s Block Deleted!" msgstr "" -#: src/plugins/global-settings/colors/color-picker.js:45 -msgid "Style name" -msgstr "" - -#: src/plugins/global-settings/colors/color-picker.js:77 -msgid "Delete color" -msgstr "" - -#: src/plugins/global-settings/colors/color-picker.js:87 -msgid "Delete \"%s\"" -msgstr "" - -#: src/plugins/global-settings/colors/color-picker.js:90 +#: src/plugins/global-settings/colors/color-picker.js:109 msgid "Any blocks that use this color will become unlinked with this global color. Delete this color?" msgstr "" -#: src/plugins/global-settings/colors/color-picker.js:123 -msgid "Add New Color" -msgstr "" - -#: src/plugins/global-settings/colors/color-picker.js:150 -msgid "Reset Color Palette" -msgstr "" - -#: src/plugins/global-settings/colors/color-picker.js:153 -msgid "Resetting the global colors will revert all colors to its original color palette. Any added colors will be deleted and will become unlinked. Proceed?" -msgstr "" - -#: src/plugins/global-settings/colors/color-picker.js:325 +#: src/plugins/global-settings/colors/color-picker.js:136 msgid "Custom Color %s" msgstr "" -#: src/plugins/global-settings/colors/index.js:89 +#: src/plugins/global-settings/colors/index.js:109 msgid "Global Color Palette" msgstr "" -#: src/plugins/global-settings/colors/index.js:93 +#: src/plugins/global-settings/colors/index.js:113 msgid "Change your color palette for all your blocks across your site." msgstr "" -#: src/plugins/global-settings/colors/index.js:96 +#: src/plugins/global-settings/colors/index.js:116 msgid "Learn more about Global Colors" msgstr "" -#: src/plugins/global-settings/colors/index.js:103 -msgid "Use only Stackable colors" +#: src/plugins/global-settings/colors/index.js:125 +msgid "Show Theme Colors" +msgstr "" + +#: src/plugins/global-settings/colors/index.js:130 +msgid "Show Default Colors" +msgstr "" + +#: src/plugins/global-settings/colors/index.js:135 +msgid "Show Site Editor Custom Colors" msgstr "" #: src/plugins/global-settings/index.js:70 @@ -9735,15 +9693,11 @@ msgstr "" msgid "Learn the essentials" msgstr "" -#: src/welcome/getting-started.js:130 -msgid "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consequat tempus sollicitudin rhoncus pretium tellus." -msgstr "" - -#: src/welcome/getting-started.js:142 +#: src/welcome/getting-started.js:141 msgid "Check out our library of tutorials and guides" msgstr "" -#: src/welcome/getting-started.js:145 +#: src/welcome/getting-started.js:144 msgid "Go to Stackable Learn" msgstr "" diff --git a/package.json b/package.json index 8e82a2a6e..79bb5f8e4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stackable", - "version": "3.10.0", + "version": "3.10.1", "private": true, "description": "Blocks for everyone", "author": "Benjamin Intal of Gambit", diff --git a/plugin.php b/plugin.php index 47cee9671..201833e5c 100644 --- a/plugin.php +++ b/plugin.php @@ -6,7 +6,7 @@ * Author: Gambit Technologies, Inc * Author URI: http://gambit.ph * Text Domain: stackable-ultimate-gutenberg-blocks - * Version: 3.10.0 + * Version: 3.10.1 * * @package Stackable */ @@ -24,7 +24,7 @@ defined( 'STACKABLE_SHOW_PRO_NOTICES' ) || define( 'STACKABLE_SHOW_PRO_NOTICES', true ); defined( 'STACKABLE_BUILD' ) || define( 'STACKABLE_BUILD', 'free' ); -defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.10.0' ); +defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.10.1' ); defined( 'STACKABLE_FILE' ) || define( 'STACKABLE_FILE', __FILE__ ); defined( 'STACKABLE_I18N' ) || define( 'STACKABLE_I18N', 'stackable-ultimate-gutenberg-blocks' ); // Plugin slug. defined( 'STACKABLE_CLOUDFRONT_URL' ) || define( 'STACKABLE_CLOUDFRONT_URL', 'https://d3gt1urn7320t9.cloudfront.net' ); // CloudFront CDN URL diff --git a/readme.txt b/readme.txt index e4894aa1d..8ef4c4d6c 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Tags: blocks, gutenberg, gutenberg blocks, page builder, WordPress blocks Requires at least: 6.0 Tested up to: 6.2.2 Requires PHP: 5.7 -Stable tag: 3.10.0 +Stable tag: 3.10.1 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html @@ -286,6 +286,31 @@ Nope. Stackable only works with Gutenberg, the new WordPress editor. == Changelog == += 3.10.1 = +* New: Improved Block Theme & Site Editor color compatibility #2599 #2601 #2641 +* New: Improved Color palette popup - now has built-in color picker, and color categories for global colors, theme colors, default colors, and custom Site Editor colors. #2600 +* New: Improved Global Color panel UI, includes reoredring of global colors and new options to show/hide color categories in the color palette popup +* New: Added vw and vh units to some block options #2735 +* New: Added a new `stackable_activation_screen_enabled` PHP filter that when false bypasses the welcome and wizard screen. #2676 +* New: Added new "Fixed Icon Position" option in Tab Labels block for better text alignment #2739 +* Change: Stackable global colors now are no longer included in the color picker of Native blocks to prevent confusion and possible conflicts. +* Fixed: Bug when you have a custom color in the Site Editor, it stops displaying the other colors in the color picker #2599 #2601 +* Fixed: Column resize doesn't snap correctly when the Columns block has a background enabled #2579 +* Fixed: Columns block content max width and horizontal align options reset upon save #2742 +* Fixed: Resolved missing dependencies warning in Query Monitor #2562 +* Fixed: Divider block tablet and mobile alignments not working #2733 +* Fixed: Some embedded content do not show up in lightbox #2658 +* Fixed: Added support for WP Rocket's Image Lazy Loading feature in the lightbox #2724 +* Fixed: Enabling template locking on a container can cause inner blocks to overlap #2672 +* Fixed: A scrollbar was visible on the carousel block in Firefox #2701 +* Fixed: Better accessibility: pressing the escape key will close popovers #2766 +* Fixed: Colors not working for the collapsed state of accordion blocks (need to edit the block for it to take effect) #2723 +* Fixed: Carousel block aria warning #2722 +* Fixed: Design library tab focus outline #2727 +* Fixed: Map block JS callback warning is now resolved #2734 +* Fixed: Progress bar and cirlce blocks can now handle dynamic content that has commas #2688 +* Fixed: V2 Feature Grid encounters an error when using the advanced tab #2707 + = 3.10.0 = [Introducing: New Tabs Block](https://wpstackable.com/blog/introducing-new-tabs-block/?utm_source=wp-repo&utm_campaign=readme&utm_medium=link) diff --git a/src/block-components/alignment/edit.js b/src/block-components/alignment/edit.js index 278836dc4..64137d4d4 100644 --- a/src/block-components/alignment/edit.js +++ b/src/block-components/alignment/edit.js @@ -100,7 +100,7 @@ export const Edit = props => { label={ __( 'Content Max Width', i18n ) } attribute="containerWidth" responsive="all" - units={ [ 'px', '%' ] } + units={ [ 'px', '%', 'vw' ] } min={ [ 0, 0 ] } sliderMax={ [ 1500, 100 ] } step={ [ 1, 1 ] } diff --git a/src/block-components/button/edit.js b/src/block-components/button/edit.js index 298be7ae5..a073f2b47 100644 --- a/src/block-components/button/edit.js +++ b/src/block-components/button/edit.js @@ -14,16 +14,14 @@ import { import { i18n } from 'stackable' import { useAttributeEditHandlers, - useBlockAttributesContext, useBlockContext, useBlockSetAttributesContext, + useBlockAttributesContext, + useBlockContext, } from '~stackable/hooks' -import { extractColor } from '~stackable/util' /** * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n' -import { select } from '@wordpress/data' -import { getColorClassName } from '@wordpress/block-editor' /** * Internal dependencies @@ -120,7 +118,6 @@ export const ColorsControls = props => { const buttonBackgroundColorType = useBlockAttributesContext( attributes => { return attributes[ getAttrName( 'backgroundColorType' ) ] } ) - const setAttributes = useBlockSetAttributesContext() return ( <> { : __( 'Button Color', i18n ) } attribute={ getAttrName( 'backgroundColor' ) } - hasTransparent={ blockState === 'normal' && buttonBackgroundColorType !== 'gradient' } hover="all" + hasTransparent={ blockState === 'normal' && buttonBackgroundColorType !== 'gradient' } /> { buttonBackgroundColorType === 'gradient' && ( <> @@ -169,17 +166,6 @@ export const ColorsControls = props => { { hasTextColor && ( { - if ( blockState !== 'normal' ) { - return _value - } - const value = extractColor( _value ) - const colors = select( select => select( 'core/block-editor' ).getSettings().colors ) || [] - const colorSlug = colors.find( ( { color } ) => value === color )?.slug - setAttributes( { textColorClass: colorSlug ? getColorClassName( 'color', colorSlug ) : '' } ) - - return _value - } } label={ __( 'Text Color', i18n ) } attribute="textColor1" hover="all" diff --git a/src/block-components/columns/edit.js b/src/block-components/columns/edit.js index 7c5c99596..f05c2f233 100644 --- a/src/block-components/columns/edit.js +++ b/src/block-components/columns/edit.js @@ -153,7 +153,7 @@ export const Controls = props => { label={ __( 'Inner Column Spacing', i18n ) } attribute="columnSpacing" responsive="all" - units={ [ 'px', 'em' ] } + units={ [ 'px', 'em', 'vw' ] } defaultLocked={ true } min={ [ 0, 0 ] } sliderMax={ [ 200, 30 ] } diff --git a/src/block-components/helpers/backgrounds/edit.js b/src/block-components/helpers/backgrounds/edit.js index 3e8374677..9fbf1ff53 100644 --- a/src/block-components/helpers/backgrounds/edit.js +++ b/src/block-components/helpers/backgrounds/edit.js @@ -25,6 +25,7 @@ import { getAttributeName, urlIsVideo } from '~stackable/util' * WordPress dependencies */ import { Fragment } from '@wordpress/element' +// import { GradientPicker } from '@wordpress/components' import { __, _x, sprintf, } from '@wordpress/i18n' @@ -67,6 +68,30 @@ export const BackgroundControls = props => { return ( + { /* console.log( value ) } + gradients={ [ + { + name: 'JShine', + gradient: + 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)', + slug: 'jshine', + }, + { + name: 'Moonlit Asteroid', + gradient: + 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)', + slug: 'moonlit-asteroid', + }, + { + name: 'Rastafarie', + gradient: + 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)', + slug: 'rastafari', + }, + ] } + /> */ } { props.hasGradient && { label={ labelContentWidth } attribute={ getAttrName( 'width' ) } responsive="all" - units={ [ 'px', '%' ] } + units={ [ 'px', '%', 'vw' ] } min={ [ 0, 0 ] } sliderMax={ [ 1500, 100 ] } step={ [ 1, 1 ] } diff --git a/src/block-components/icon/edit.js b/src/block-components/icon/edit.js index ce9eeb937..f968daa2f 100644 --- a/src/block-components/icon/edit.js +++ b/src/block-components/icon/edit.js @@ -241,8 +241,8 @@ export const Edit = props => { ) diff --git a/src/block-components/icon/index.js b/src/block-components/icon/index.js index 97facff30..3fa35baf0 100644 --- a/src/block-components/icon/index.js +++ b/src/block-components/icon/index.js @@ -167,6 +167,7 @@ export const Icon = props => { setIsOpen( false ) } onChange={ icon => { if ( ! onChange ) { updateAttributeHandler( 'icon' )( icon ) diff --git a/src/block-components/image/edit.js b/src/block-components/image/edit.js index e06fc30c7..696432cc6 100644 --- a/src/block-components/image/edit.js +++ b/src/block-components/image/edit.js @@ -280,6 +280,7 @@ const Controls = props => { isSmall={ true } /> + { /* TODO: opacity will now be included in the color */ } { : __( 'Overlay Color', i18n ) } attribute="imageOverlayColor" - hover="all" hasTransparent={ attributes.imageOverlayColorType === 'gradient' } + hover="all" /> { attributes.imageOverlayColorType === 'gradient' && ( { const propsToPass = { @@ -27,9 +27,14 @@ const Styles = props => { { + const progressValue = value || '' + return getDynamicContent( progressValue ).replace( /,/g, '' ) + } } format={ ! isCircle ? '%s%' : undefined } /> { ! isCircle && ( diff --git a/src/block-components/typography/edit.js b/src/block-components/typography/edit.js index c7f3d12b6..236be1082 100644 --- a/src/block-components/typography/edit.js +++ b/src/block-components/typography/edit.js @@ -19,9 +19,7 @@ import { PanelAdvancedSettings, ShadowControl, } from '~stackable/components' -import { - getAttributeName, getAttrNameFunction, extractColor, -} from '~stackable/util' +import { getAttributeName, getAttrNameFunction } from '~stackable/util' /** * WordPress dependencies @@ -32,8 +30,6 @@ import { import { __, sprintf } from '@wordpress/i18n' import { escapeHTML } from '@wordpress/escape-html' import { applyFilters } from '@wordpress/hooks' -import { select } from '@wordpress/data' -import { getColorClassName } from '@wordpress/block-editor' const TYPOGRAPHY_SHADOWS = [ 'none', @@ -104,17 +100,6 @@ export const Controls = props => { const onChangeContent = useCallback( text => setDebouncedText( escapeHTML( text ) ), [] ) - const colorChangeCallback = useCallback( _value => { - if ( blockState !== 'normal' ) { - return _value - } - const value = extractColor( _value ) - const colors = select( 'core/block-editor' ).getSettings().colors || [] - const colorSlug = colors.find( ( { color } ) => value === color )?.slug - updateAttribute( 'textColorClass', colorSlug ? getColorClassName( 'color', colorSlug ) : '' ) - return _value - }, [ blockState ] ) - return ( <> { applyFilters( 'stackable.block-component.typography.before', null, props ) } @@ -296,7 +281,6 @@ export const Controls = props => { /> ) } { const { @@ -104,6 +104,9 @@ const Edit = props => { hasHeight = true } + const imageWidthUnit = props.attributes.imageWidthUnit || 'px' + const imageHeightUnit = props.attributes.imageHeightUnit || 'px' + return ( <> { isSelected && ( @@ -164,9 +167,9 @@ const Edit = props => { heightUnits={ heightUnit } defaultWidth={ 250 } width={ blockStyle !== 'horizontal' ? 100 : undefined } - widthUnit={ blockStyle !== 'horizontal' ? '%' : 'px' } + widthUnit={ blockStyle !== 'horizontal' ? '%' : imageWidthUnit } height={ blockStyle !== 'horizontal' ? undefined : 100 } - heightUnit={ blockStyle !== 'horizontal' ? 'px' : '%' } + heightUnit={ blockStyle !== 'horizontal' ? imageHeightUnit : '%' } hasTooltip={ ! [ 'full', 'faded' ].includes( blockStyle ) } />
diff --git a/src/block/carousel/edit.js b/src/block/carousel/edit.js index 8e384da03..ff869b3aa 100644 --- a/src/block/carousel/edit.js +++ b/src/block/carousel/edit.js @@ -388,8 +388,8 @@ const Edit = props => { { .block-editor-inner-blocks > .block-editor-block-list__layout { > [data-type="stackable/column"] { diff --git a/src/block/carousel/frontend-carousel.js b/src/block/carousel/frontend-carousel.js index 99a73c8b4..51a2371d9 100644 --- a/src/block/carousel/frontend-carousel.js +++ b/src/block/carousel/frontend-carousel.js @@ -35,6 +35,7 @@ class _StackableCarousel { this.initProperties() this.addEventListeners() + this.fixChildrenAccessibility() this.fixAccessibility( this.currentSlide ) this.setDotActive( this.currentSlide ) @@ -196,6 +197,12 @@ class _StackableCarousel { } } + fixChildrenAccessibility = () => { + this.slideEls.forEach( slide => { + slide.setAttribute( 'role', 'listitem' ) + } ) + } + setDotActive = slide => { this.dotEls?.forEach( ( dotEl, i ) => { if ( slide === i + 1 ) { diff --git a/src/block/carousel/style.scss b/src/block/carousel/style.scss index 116b2dd0d..258dac0c0 100644 --- a/src/block/carousel/style.scss +++ b/src/block/carousel/style.scss @@ -34,6 +34,7 @@ margin: 0 auto; position: relative; overflow: hidden; + scrollbar-width: none; // Removes scrollbar visibility in Mozilla Firefox } .stk-block-carousel__slider-wrapper { position: relative; diff --git a/src/block/column/edit.js b/src/block/column/edit.js index 70ef10849..c05a902c7 100644 --- a/src/block/column/edit.js +++ b/src/block/column/edit.js @@ -95,7 +95,7 @@ const Edit = props => { label={ __( 'Column Spacing', i18n ) } attribute="columnSpacing" responsive="all" - units={ [ 'px', 'em' ] } + units={ [ 'px', 'em', 'vw' ] } defaultLocked={ true } min={ [ 0, 0 ] } sliderMax={ [ 200, 30 ] } diff --git a/src/block/columns/schema.js b/src/block/columns/schema.js index 936bbe854..8974adff6 100644 --- a/src/block/columns/schema.js +++ b/src/block/columns/schema.js @@ -53,6 +53,23 @@ export const attributes = ( version = VERSION ) => { versionDeprecated: '', } ) + attrObject.add( { + attributes: { + containerWidth: { + stkResponsive: true, + type: 'number', + default: '', + }, + containerHorizontalAlign: { + stkResponsive: true, + type: 'string', + default: '', + }, + }, + versionAdded: '3.10.1', + versionDeprecated: '', + } ) + return attrObject.getMerged( version ) } diff --git a/src/block/columns/transforms.js b/src/block/columns/transforms.js index 54e1133bf..4a2b130d2 100644 --- a/src/block/columns/transforms.js +++ b/src/block/columns/transforms.js @@ -8,7 +8,6 @@ import { createUniqueClass } from '~stackable/util' * WordPress dependencies */ import { createBlock } from '@wordpress/blocks' -import { select } from '@wordpress/data' const MAXIMUM_SELECTED_BLOCKS = 10 @@ -50,12 +49,6 @@ const transforms = { case 'backgroundColor': { if ( value ) { newColumnsAttributes.hasBackground = true - const colorObject = select( 'core/block-editor' ).getSettings().colors.find( ( { slug } ) => slug === value ) - if ( value.startsWith( 'stk-global-color' ) ) { - newColumnsAttributes.blockBackgroundColor = `var(--${ value }, ${ colorObject.color })` - } else { - newColumnsAttributes.blockBackgroundColor = colorObject.color - } } break diff --git a/src/block/divider/editor.scss b/src/block/divider/editor.scss new file mode 100644 index 000000000..e2d94a913 --- /dev/null +++ b/src/block/divider/editor.scss @@ -0,0 +1,109 @@ +@import "common"; + +@include desktop { + :where(.has-text-align-left) .stk-block-divider { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + + :where(.has-text-align-right) .stk-block-divider { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + :where(.has-text-align-center) .stk-block-divider { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } +} + +@include tablet { + :where(.has-text-align-left-tablet) .stk-block-divider { + + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + + :where(.has-text-align-right-tablet) .stk-block-divider { + + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + :where(.has-text-align-center-tablet) .stk-block-divider { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } +} + +@include mobile { + :where(.has-text-align-left-mobile) .stk-block-divider { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + + :where(.has-text-align-right-mobile) .stk-block-divider { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + :where(.has-text-align-center-mobile) .stk-block-divider { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } +} + +.stk-block.stk-block-divider { + + @include desktop { + &.has-text-align-center { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } + + &.has-text-align-right { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + &.has-text-align-left { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + } + + @include tablet-mobile { + &.has-text-align-center-tablet { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } + + &.has-text-align-right-tablet { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + &.has-text-align-left-tablet { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + } + + @include mobile { + &.has-text-align-center-mobile { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } + + &.has-text-align-right-mobile { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + &.has-text-align-left-mobile { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + } + +} diff --git a/src/block/divider/style.scss b/src/block/divider/style.scss index feb50f57b..b0e7c67de 100644 --- a/src/block/divider/style.scss +++ b/src/block/divider/style.scss @@ -1,3 +1,5 @@ +@import "common"; + .stk-block.stk-block-divider { hr.stk-block-divider__hr, .stk-block-divider__dot { @@ -5,24 +7,114 @@ } } -:where(.has-text-align-left) .stk-block-divider, -.stk-block.stk-block-divider.has-text-align-left { - --stk-dots-margin-left: 0; - --stk-dots-margin-right: auto; +@include desktop { + :where(.has-text-align-left) .stk-block-divider { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + + :where(.has-text-align-right) .stk-block-divider { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + :where(.has-text-align-center) .stk-block-divider { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } } -:where(.has-text-align-right) .stk-block-divider, -.stk-block.stk-block-divider.has-text-align-right { - --stk-dots-margin-right: 0; - --stk-dots-margin-left: auto; +@include tablet { + :where(.has-text-align-left-tablet) .stk-block-divider { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + + :where(.has-text-align-right-tablet) .stk-block-divider { + + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + :where(.has-text-align-center-tablet) .stk-block-divider { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } } -:where(.has-text-align-center) .stk-block-divider, -.stk-block.stk-block-divider.has-text-align-center { - --stk-dots-margin-right: auto; - --stk-dots-margin-left: auto; +@include mobile { + :where(.has-text-align-left-mobile) .stk-block-divider { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + + :where(.has-text-align-right-mobile) .stk-block-divider { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + :where(.has-text-align-center-mobile) .stk-block-divider { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } } +.stk-block.stk-block-divider { + + @include desktop { + &.has-text-align-center { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } + + &.has-text-align-right { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + &.has-text-align-left { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + } + + @include tablet-mobile { + &.has-text-align-center-tablet { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } + + &.has-text-align-right-tablet { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + &.has-text-align-left-tablet { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + } + + @include mobile { + &.has-text-align-center-mobile { + --stk-dots-margin-right: auto; + --stk-dots-margin-left: auto; + } + + &.has-text-align-right-mobile { + --stk-dots-margin-right: 0; + --stk-dots-margin-left: auto; + } + + &.has-text-align-left-mobile { + --stk-dots-margin-left: 0; + --stk-dots-margin-right: auto; + } + } + +} + + .stk-block.stk-block-divider { hr.stk-block-divider__hr { margin-left: var(--stk-dots-margin-left, auto); diff --git a/src/block/heading/edit.js b/src/block/heading/edit.js index bbe047440..3512f9460 100644 --- a/src/block/heading/edit.js +++ b/src/block/heading/edit.js @@ -163,7 +163,7 @@ const Edit = props => { { { label={ __( 'Item Width', i18n ) } attribute="horizontalScrollerColumnWidth" responsive="all" - units={ [ 'px', 'em', '%' ] } + units={ [ 'px', 'em', '%', 'vw' ] } min={ [ 0, 0, 0 ] } sliderMax={ [ 500, 40, 100 ] } step={ [ 1, 0.1, 1 ] } @@ -132,7 +132,7 @@ const Edit = props => { label={ __( 'Inner Column Spacing', i18n ) } attribute="columnSpacing" responsive="all" - units={ [ 'px', 'em' ] } + units={ [ 'px', 'em', 'vw' ] } defaultLocked={ true } min={ [ 0, 0 ] } sliderMax={ [ 200, 30 ] } diff --git a/src/block/map/frontend-map.js b/src/block/map/frontend-map.js index e401e865f..15321baed 100644 --- a/src/block/map/frontend-map.js +++ b/src/block/map/frontend-map.js @@ -26,7 +26,8 @@ class StackableMap { return new Promise( resolve => { const script = document.createElement( 'script' ) script.id = 'stackable-google-map' - script.src = `https://maps.googleapis.com/maps/api/js?key=${ apiKey }&libraries=places` + // Add callback to prevent warnings. + script.src = `https://maps.googleapis.com/maps/api/js?key=${ apiKey }&libraries=places&callback=Function.prototype` script.type = 'text/javascript' script.async = true script.onload = resolve diff --git a/src/block/map/util.js b/src/block/map/util.js index cb6cf4252..9d9435ea5 100644 --- a/src/block/map/util.js +++ b/src/block/map/util.js @@ -106,7 +106,8 @@ const loadScriptAsync = apiKey => { } const script = document.createElement( 'script' ) script.id = 'stackable-google-map' - script.src = `https://maps.googleapis.com/maps/api/js?key=${ apiKey }&libraries=places` + // Add callback to prevent warnings. + script.src = `https://maps.googleapis.com/maps/api/js?key=${ apiKey }&libraries=places&callback=Function.prototype` script.type = 'text/javascript' script.async = true script.onload = resolve diff --git a/src/block/progress-bar/edit.js b/src/block/progress-bar/edit.js index ef8235c91..c2a4d4b30 100644 --- a/src/block/progress-bar/edit.js +++ b/src/block/progress-bar/edit.js @@ -69,8 +69,10 @@ const Edit = props => { 'stk--has-background-overlay': attributes.progressColorType === 'gradient' && attributes.progressColor2, } ) + const progressValue = attributes.progressValue || '' + // parsing string to number since progress value is of a string type to support dynamic content - const parsedProgressValue = parseFloat( useDynamicContent( attributes.progressValue ) ) + const parsedProgressValue = parseFloat( useDynamicContent( progressValue ).replace( /,/g, '' ) ) const derivedProgressValue = isNaN( parsedProgressValue ) ? DEFAULT_PROGRESS : parsedProgressValue const derivedValue = `${ attributes.progressValuePrefix }${ derivedProgressValue }${ attributes.progressValueSuffix }`.trim() @@ -137,6 +139,10 @@ const Edit = props => {
+ { /* Add our progress style here because we're adjusting the value using a hook */ } + { props.isHovered && } diff --git a/src/block/progress-circle/edit.js b/src/block/progress-circle/edit.js index ce21b9500..fb02d9f23 100644 --- a/src/block/progress-circle/edit.js +++ b/src/block/progress-circle/edit.js @@ -65,8 +65,10 @@ const Edit = props => { textClasses, ] ) + const progressValue = attributes.progressValue || '' + // this is to handle dynamic content; only show valid value - const parsedProgressValue = parseFloat( useDynamicContent( attributes.progressValue ) ) + const parsedProgressValue = parseFloat( useDynamicContent( progressValue ).replace( /,/g, '' ) ) const derivedProgressValue = isNaN( parsedProgressValue ) ? DEFAULT_PROGRESS : parsedProgressValue const derivedValue = `${ attributes.progressValuePrefix }${ derivedProgressValue }${ attributes.progressValueSuffix }`.trim() @@ -150,6 +152,10 @@ const Edit = props => { ) } + { /* Add our progress style here because we're adjusting the value using a hook */ } + { props.isHovered && } diff --git a/src/block/tab-labels/edit.js b/src/block/tab-labels/edit.js index 828931523..af21c64ba 100644 --- a/src/block/tab-labels/edit.js +++ b/src/block/tab-labels/edit.js @@ -376,6 +376,15 @@ const Edit = props => { /> } + { ( ( props.attributes.iconPosition === '' || props.attributes.iconPosition === 'right' ) && props.attributes.showIcon ) && // Check if icon position is left or right + ( ( context[ 'stackable/tabOrientation' ] !== 'vertical' && props.attributes.fullWidth ) || context[ 'stackable/tabOrientation' ] === 'vertical' ) && // Show if its in horizontal position and fullWidth OR show on vertical position + + } + { props.attributes.showIcon && { default: '', stkHover: true, }, + fixedIconPosition: { + type: 'boolean', + default: '', + }, }, versionAdded: '3.0.0', versionDeprecated: '', diff --git a/src/block/tab-labels/style.js b/src/block/tab-labels/style.js index dbbd15028..4f5050fe2 100644 --- a/src/block/tab-labels/style.js +++ b/src/block/tab-labels/style.js @@ -57,6 +57,10 @@ const Styles = props => { versionDeprecated: '', } + const { + dependencies = [], + } = props + return ( <> { /> { } } attrName="contentAlign" key="iconAlignment-iconPosition" - enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) || getAttribute( 'iconPosition' ) === 'top' || getAttribute( 'iconPosition' ) === 'bottom' } + enabledCallback={ getAttribute => getAttribute( 'fullWidth' ) !== undefined || getAttribute( 'iconPosition' ) === 'top' || getAttribute( 'iconPosition' ) === 'bottom' } valueCallback={ ( value, getAttribute ) => { let newValue = value if ( value === '' || value === 'left' ) { @@ -148,7 +152,11 @@ const Styles = props => { return newValue } } responsive="all" - dependencies={ [ 'fullWidth', 'iconPosition' ] } + dependencies={ [ + 'fullWidth', + 'iconPosition', + ...dependencies, + ] } /> { hover="all" /> + { /* Enable labels layout to more customizable */ } + getAttribute( 'iconPosition' ) === '' || getAttribute( 'iconPosition' ) === 'right' } + selector=".stk-block-tab-labels__wrapper .stk-block-tab-labels__text" + styleRule="width" + attrName="fixedIconPosition" + valueCallback={ value => { + return value ? '100%' : undefined + } } + key="fixedIconPosition" + responsive="all" + dependencies={ [ + 'iconPosition', + ...dependencies, + ] } + /> ) } diff --git a/src/components/block-css/index.js b/src/components/block-css/index.js index 4e89fa40d..977d9207f 100644 --- a/src/components/block-css/index.js +++ b/src/components/block-css/index.js @@ -292,9 +292,9 @@ const BlockCss = props => { // TODO: why do we have this condition for the collapsedSelector, but they just do the same prepending?? if ( hasCollapsed ) { if ( blockState === 'collapsed' ) { - collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s, .%s.stk--is-open' ) + collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s' ) } else { - collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s, .%s.stk--is-open' ) + collapsedSelector = prependClass( selector, ':where(.stk-block-accordion.stk--is-open) .%s' ) } } diff --git a/src/components/button-icon-popover-control/index.js b/src/components/button-icon-popover-control/index.js index 639757c51..6b051c84a 100644 --- a/src/components/button-icon-popover-control/index.js +++ b/src/components/button-icon-popover-control/index.js @@ -1,14 +1,14 @@ /** * Internal dependencies */ -import { Button, BaseControl } from '~stackable/components' +import { + Button, BaseControl, Popover, +} from '~stackable/components' /** * WordPress dependencies */ -import { - Popover, ToggleControl, PanelBody, -} from '@wordpress/components' +import { ToggleControl, PanelBody } from '@wordpress/components' import { useEffect, useState, memo, useRef, } from '@wordpress/element' @@ -84,6 +84,7 @@ const ButtonIconPopoverControl = memo( props => { setIsOpen( false ) } > { ( typeof props.popoverLabel !== 'undefined' ? props.popoverLabel : props.label ) && diff --git a/src/components/color-palette-control/color-palette-popup.js b/src/components/color-palette-control/color-palette-popup.js new file mode 100644 index 000000000..79e058d34 --- /dev/null +++ b/src/components/color-palette-control/color-palette-popup.js @@ -0,0 +1,4 @@ +/** + * A popup of a color palette. + */ +// TODO: split off the color picker to here. diff --git a/src/components/color-palette-control/editor.scss b/src/components/color-palette-control/editor.scss index 1efa8ba20..f24cbf81e 100644 --- a/src/components/color-palette-control/editor.scss +++ b/src/components/color-palette-control/editor.scss @@ -1,3 +1,9 @@ +// Some themes and plugins can warp our color indicator. +.stk-color-indicator { + height: 20px !important; + width: 20px !important; +} + // Style transparent circular color option. .stk-color-palette-control { .components-circular-option-picker__option[style*="color:transparent"], @@ -39,4 +45,20 @@ .stk-color-palette-control__popover-content { width: 260px; padding: 8px; + .components-color-picker, + .react-colorful, + .react-colorful__hue, + .react-colorful__alpha { + width: 100% !important; + } + .react-colorful { + overflow: visible !important; + } + .react-colorful__saturation { + height: 150px !important; + } + // These are the side paddings of the hex input. + .react-colorful + * > * { + padding-inline: 0 !important; + } } diff --git a/src/components/color-palette-control/index.js b/src/components/color-palette-control/index.js index 3eaf010a8..bdb20de3b 100644 --- a/src/components/color-palette-control/index.js +++ b/src/components/color-palette-control/index.js @@ -2,34 +2,37 @@ * Internal dependencies */ import AdvancedControl, { extractControlProps } from '../base-control2' +import { ResetButton } from '../base-control2/reset-button' import { useControlHandlers } from '../base-control2/hooks' /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n' +import { __, _x } from '@wordpress/i18n' import { getColorObjectByColorValue, - useSetting, + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, } from '@wordpress/block-editor' -import { memo, useMemo } from '@wordpress/element' +import { memo } from '@wordpress/element' import { applyFilters } from '@wordpress/hooks' import { Button, ColorIndicator, ColorPalette, + ColorPicker, Dropdown, FlexItem, __experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis } from '@wordpress/components' +import { useSelect } from '@wordpress/data' /** * External dependencies */ +import { cloneDeep } from 'lodash' import { i18n } from 'stackable' import classnames from 'classnames' -import { isPlainObject, compact } from 'lodash' -import { ResetButton } from '../base-control2/reset-button' const popoverProps = { placement: 'left-start', @@ -39,48 +42,79 @@ const popoverProps = { const ColorPaletteControl = memo( props => { const { - disableCustomColors, label, className = '', } = props - const [ _value, _onChange ] = useControlHandlers( props.attribute, props.responsive, props.hover, props.valueCallback, props.changeCallback ) const [ _propsToPass, controlProps ] = extractControlProps( props ) - const themeColors = useSetting( 'color.palette.theme' ) || [] // This can be undefined. - const colors = useMemo( () => { - const colors = compact( themeColors.map( color => { - // Make sure to only get color objects. If null, also return null. - // This will be removed by lodash's `compact` function. - if ( ! isPlainObject( color ) ) { - return null - } + const { + stackableColors, + hideThemeColors, + hideDefaultColors, + hideSiteEditorColors, + } = useSelect( 'stackable/global-colors' ).getSettings() + + const { colors: groupedColors } = useMultipleOriginColorsAndGradients() + let colors = cloneDeep( groupedColors ) + + if ( stackableColors && stackableColors.length ) { + colors = [ + { + name: __( 'Global Colors', i18n ), + colors: cloneDeep( stackableColors ), + id: 'stk-global-colors', + }, + ...colors, + ] + } - return { - ...color, - name: color.name || color.fallback || color.color || __( 'Untitled Color', i18n ), - } - } ) ) - - if ( props.hasTransparent ) { - colors.push( { - name: __( 'Transparent', i18n ), - slug: '_stk-transparent', // Make it unique to prevent conflict. - color: 'transparent', - } ) + // Filter the colors. + colors = colors.filter( group => { + // Since there are no identifying properties for the groups, we'll just use the same names used in Gutenberg. + if ( hideThemeColors && group.name === _x( 'Theme', 'Indicates this palette comes from the theme.' ) ) { + return false + } + + if ( hideDefaultColors && group.name === _x( 'Default', 'Indicates this palette comes from WordPress.' ) ) { + return false + } + + if ( hideSiteEditorColors && group.name === _x( 'Custom', 'Indicates this palette comes from the theme.' ) ) { + return false } - return colors - }, [ themeColors, props.hasTransparent ] ) + return true + } ) + + // Support for hasTransparent. + if ( props.hasTransparent && colors.length ) { + let i = 0 + if ( colors[ i ].id === 'stk-global-colors' && colors.length > 1 ) { + i++ + } + colors[ i ].colors.push( { + name: __( 'Transparent', i18n ), + slug: '_stk-transparent', // Make it unique to prevent conflict. + color: 'transparent', + } ) + } + + const allColors = colors.reduce( ( colors, group ) => { + return [ + ...colors, + ...group.colors, + ] + }, [] ) let value = typeof props.value === 'undefined' ? _value : props.value const onChange = typeof props.onChange === 'undefined' ? _onChange : props.onChange - if ( typeof value === 'string' && value.includes( '--stk-global-color' ) && value.match( /#[\d\w]{6}/ ) ) { - value = value.match( /#[\d\w]{6}/ )[ 0 ] + if ( typeof value === 'string' && value.includes( '--stk-global-color' ) && value.match( /#[\d\w]{6,}/ ) ) { + value = value.match( /#[\d\w]{6,}/ )[ 0 ] } - const colorObject = getColorObjectByColorValue( colors, value ) + const colorObject = getColorObjectByColorValue( allColors, value ) const colorName = colorObject && colorObject.name const colorLabel = colorName || ( value === 'transparent' ? 'Transparent' : value ) @@ -90,17 +124,32 @@ const ColorPaletteControl = memo( props => { } const colorPalette = ( - { - // Allow the selected color to be overridden. - const colorObject = getColorObjectByColorValue( colors, value ) - onChange( applyFilters( 'stackable.color-palette-control.change', value, colorObject ) ) - } } - label={ colorLabel } - clearable={ false } - { ...{ colors, disableCustomColors } } - /> + <> + + { + // Allow the selected color to be overridden. + const allColors = colors.reduce( ( colors, group ) => { + return [ + ...colors, + ...group.colors, + ] + }, [] ) + + const colorObject = getColorObjectByColorValue( allColors, value ) + onChange( applyFilters( 'stackable.color-palette-control.change', value, colorObject ) ) + } } + disableCustomColors={ true } + label={ colorLabel } + clearable={ false } + colors={ colors } + /> + ) return ( @@ -172,11 +221,11 @@ const renderToggle = const LabeledColorIndicator = ( { colorValue, label } ) => ( { label } diff --git a/src/components/dynamic-content-control/index.js b/src/components/dynamic-content-control/index.js index 10ae9501e..24532b32a 100644 --- a/src/components/dynamic-content-control/index.js +++ b/src/components/dynamic-content-control/index.js @@ -387,6 +387,7 @@ export const DynamicContentButton = memo( props => { { ! isPro && } diff --git a/src/components/font-family-control/google-fonts.json b/src/components/font-family-control/google-fonts.json index b8265d7e2..681a41bc6 100644 --- a/src/components/font-family-control/google-fonts.json +++ b/src/components/font-family-control/google-fonts.json @@ -2868,6 +2868,16 @@ "latin" ] }, + { + "family": "Borel", + "variants": [ + "regular" + ], + "subsets": [ + "latin", + "latin-ext" + ] + }, { "family": "Bowlby One", "variants": [ @@ -4416,12 +4426,24 @@ { "family": "DM Sans", "variants": [ + "100", + "200", + "300", "regular", - "italic", "500", - "500italic", + "600", "700", - "700italic" + "800", + "900", + "100italic", + "200italic", + "300italic", + "italic", + "500italic", + "600italic", + "700italic", + "800italic", + "900italic" ], "subsets": [ "latin", @@ -4450,6 +4472,26 @@ "latin-ext" ] }, + { + "family": "Dai Banna SIL", + "variants": [ + "300", + "300italic", + "regular", + "italic", + "500", + "500italic", + "600", + "600italic", + "700", + "700italic" + ], + "subsets": [ + "latin", + "latin-ext", + "new-tai-lue" + ] + }, { "family": "Damion", "variants": [ @@ -7000,6 +7042,31 @@ "latin-ext" ] }, + { + "family": "Handjet", + "variants": [ + "100", + "200", + "300", + "regular", + "500", + "600", + "700", + "800", + "900" + ], + "subsets": [ + "arabic", + "armenian", + "cyrillic", + "cyrillic-ext", + "greek", + "hebrew", + "latin", + "latin-ext", + "vietnamese" + ] + }, { "family": "Handlee", "variants": [ @@ -9569,6 +9636,32 @@ "latin" ] }, + { + "family": "Lisu Bosa", + "variants": [ + "200", + "200italic", + "300", + "300italic", + "regular", + "italic", + "500", + "500italic", + "600", + "600italic", + "700", + "700italic", + "800", + "800italic", + "900", + "900italic" + ], + "subsets": [ + "latin", + "latin-ext", + "lisu" + ] + }, { "family": "Literata", "variants": [ @@ -9778,6 +9871,43 @@ "latin" ] }, + { + "family": "Lugrasimo", + "variants": [ + "regular" + ], + "subsets": [ + "latin", + "latin-ext" + ] + }, + { + "family": "Lumanosimo", + "variants": [ + "regular" + ], + "subsets": [ + "latin", + "latin-ext" + ] + }, + { + "family": "Lunasima", + "variants": [ + "regular", + "700" + ], + "subsets": [ + "cyrillic", + "cyrillic-ext", + "greek", + "greek-ext", + "hebrew", + "latin", + "latin-ext", + "vietnamese" + ] + }, { "family": "Lusitana", "variants": [ @@ -11801,7 +11931,9 @@ "regular" ], "subsets": [ - "anatolian-hieroglyphs" + "anatolian-hieroglyphs", + "latin", + "latin-ext" ] }, { @@ -11938,7 +12070,9 @@ "regular" ], "subsets": [ - "brahmi" + "brahmi", + "latin", + "latin-ext" ] }, { @@ -11988,7 +12122,9 @@ "regular" ], "subsets": [ - "carian" + "carian", + "latin", + "latin-ext" ] }, { @@ -12077,7 +12213,9 @@ "regular" ], "subsets": [ - "cuneiform" + "cuneiform", + "latin", + "latin-ext" ] }, { @@ -12089,13 +12227,26 @@ "cypriot" ] }, + { + "family": "Noto Sans Cypro Minoan", + "variants": [ + "regular" + ], + "subsets": [ + "cypro-minoan", + "latin", + "latin-ext" + ] + }, { "family": "Noto Sans Deseret", "variants": [ "regular" ], "subsets": [ - "deseret" + "deseret", + "latin", + "latin-ext" ] }, { @@ -12167,7 +12318,9 @@ "regular" ], "subsets": [ - "egyptian-hieroglyphs" + "egyptian-hieroglyphs", + "latin", + "latin-ext" ] }, { @@ -12234,7 +12387,10 @@ "regular" ], "subsets": [ - "glagolitic" + "cyrillic-ext", + "glagolitic", + "latin", + "latin-ext" ] }, { @@ -12243,7 +12399,9 @@ "regular" ], "subsets": [ - "gothic" + "gothic", + "latin", + "latin-ext" ] }, { @@ -12350,7 +12508,9 @@ "regular" ], "subsets": [ - "hatran" + "hatran", + "latin", + "latin-ext" ] }, { @@ -12466,7 +12626,9 @@ "regular" ], "subsets": [ - "kaithi" + "kaithi", + "latin", + "latin-ext" ] }, { @@ -12549,7 +12711,9 @@ "regular" ], "subsets": [ - "khudawadi" + "khudawadi", + "latin", + "latin-ext" ] }, { @@ -12618,6 +12782,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "linear-a" ] }, @@ -12627,6 +12793,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "linear-b" ] }, @@ -12659,6 +12827,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "lydian" ] }, @@ -12668,6 +12838,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "mahajani" ] }, @@ -12705,6 +12877,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "manichaean" ] }, @@ -12714,6 +12888,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "marchen" ] }, @@ -12985,6 +13161,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "ogham" ] }, @@ -13017,6 +13195,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "old-italic" ] }, @@ -13026,6 +13206,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "old-north-arabian" ] }, @@ -13035,6 +13217,9 @@ "regular" ], "subsets": [ + "cyrillic-ext", + "latin", + "latin-ext", "old-permic" ] }, @@ -13044,6 +13229,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "old-persian" ] }, @@ -13064,6 +13251,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "old-south-arabian" ] }, @@ -13165,6 +13354,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "phoenician" ] }, @@ -13196,6 +13387,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "runic" ] }, @@ -13253,6 +13446,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "shavian" ] }, @@ -13328,6 +13523,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "soyombo" ] }, @@ -13405,6 +13602,25 @@ "syriac" ] }, + { + "family": "Noto Sans Syriac Eastern", + "variants": [ + "100", + "200", + "300", + "regular", + "500", + "600", + "700", + "800", + "900" + ], + "subsets": [ + "latin", + "latin-ext", + "syriac" + ] + }, { "family": "Noto Sans TC", "variants": [ @@ -13626,6 +13842,8 @@ "regular" ], "subsets": [ + "latin", + "latin-ext", "tirhuta" ] }, @@ -13651,6 +13869,20 @@ "vai" ] }, + { + "family": "Noto Sans Vithkuqi", + "variants": [ + "regular", + "500", + "600", + "700" + ], + "subsets": [ + "latin", + "latin-ext", + "vithkuqi" + ] + }, { "family": "Noto Sans Wancho", "variants": [ @@ -14024,6 +14256,17 @@ "latin-ext" ] }, + { + "family": "Noto Serif Khitan Small Script", + "variants": [ + "regular" + ], + "subsets": [ + "khitan-small-script", + "latin", + "latin-ext" + ] + }, { "family": "Noto Serif Khmer", "variants": [ @@ -14322,6 +14565,20 @@ "toto" ] }, + { + "family": "Noto Serif Vithkuqi", + "variants": [ + "regular", + "500", + "600", + "700" + ], + "subsets": [ + "latin", + "latin-ext", + "vithkuqi" + ] + }, { "family": "Noto Serif Yezidi", "variants": [ @@ -14331,6 +14588,8 @@ "700" ], "subsets": [ + "latin", + "latin-ext", "yezidi" ] }, @@ -15995,6 +16254,34 @@ "vietnamese" ] }, + { + "family": "REM", + "variants": [ + "100", + "200", + "300", + "regular", + "500", + "600", + "700", + "800", + "900", + "100italic", + "200italic", + "300italic", + "italic", + "500italic", + "600italic", + "700italic", + "800italic", + "900italic" + ], + "subsets": [ + "latin", + "latin-ext", + "vietnamese" + ] + }, { "family": "Racing Sans One", "variants": [ @@ -17623,6 +17910,8 @@ "family": "Sen", "variants": [ "regular", + "500", + "600", "700", "800" ], @@ -19052,6 +19341,25 @@ "latin-ext" ] }, + { + "family": "Tektur", + "variants": [ + "regular", + "500", + "600", + "700", + "800", + "900" + ], + "subsets": [ + "cyrillic", + "cyrillic-ext", + "greek", + "latin", + "latin-ext", + "vietnamese" + ] + }, { "family": "Telex", "variants": [ @@ -19937,6 +20245,33 @@ "latin" ] }, + { + "family": "Victor Mono", + "variants": [ + "100", + "200", + "300", + "regular", + "500", + "600", + "700", + "100italic", + "200italic", + "300italic", + "italic", + "500italic", + "600italic", + "700italic" + ], + "subsets": [ + "cyrillic", + "cyrillic-ext", + "greek", + "latin", + "latin-ext", + "vietnamese" + ] + }, { "family": "Vidaloka", "variants": [ diff --git a/src/components/help-tooltip/index.js b/src/components/help-tooltip/index.js index 7d46f42d1..a40239d12 100644 --- a/src/components/help-tooltip/index.js +++ b/src/components/help-tooltip/index.js @@ -12,9 +12,10 @@ import { i18n } from 'stackable' * WordPress dependencies */ import { - CheckboxControl, Dashicon, PanelBody, Popover, + CheckboxControl, Dashicon, PanelBody, } from '@wordpress/components' import { __ } from '@wordpress/i18n' +import Popover from '../popover' const NOOP = () => {} @@ -22,11 +23,11 @@ const HelpTooltip = props => { return - { isDeletePopoverOpen && ( - setIsDeletePopoverOpen( false ) } - position="bottom center" - > -

- { sprintf( __( 'Delete "%s"', i18n ), props.name ) } -

-

- { __( 'Any blocks that use this color will become unlinked with this global color. Delete this color?', i18n ) } -

- - - - - - ) } - - ) -} - -// Component used to add am add icon button. -const AddButton = props => ( - - { isResetPopoverOpen && ( - setIsResetPopoverOpen( false ) } - position="middle left" - > -

- { __( 'Reset Color Palette', i18n ) } -

-

- { __( 'Resetting the global colors will revert all colors to its original color palette. Any added colors will be deleted and will become unlinked. Proceed?', i18n ) } -

- - - - - - ) } - - ) -} - -const ColorOption = props => { - const { - color, - name, - } = props - - if ( props.locked ) { - return ( -
-
- -
-
- ) - } - - return ( - -
-
- - ) -} - -ColorOption.defaultProps = { - color: '#222222', - name: __( 'Untitled Color', i18n ), - locked: false, - onClick: () => {}, +// We need to define these because 13 (return key) is not included in the +// default keyCodes to initiate a drag. +const DRAG_KEYCODES = { + lift: [ 32, 13 ], + drop: [ 32, 13 ], + cancel: [ 27 ], + up: [ 38, 37 ], + down: [ 40, 39 ], } let saveTimeout = null const ColorPickers = props => { - // State used to determine the clicked index in the color picker. - const [ selectedIndex, setSelectedIndex ] = useState( null ) - - const _colors = useSelect( select => select( 'core/block-editor' ).getSettings().colors ) || [] - const colors = Array.isArray( _colors ) ? _colors : [] + const [ isSorting, setIsSorting ] = useState( false ) + const ref = useRef() - // Enable reset if there are Stackable global colors. - const disableReset = useMemo( () => ! colors.some( color => { - if ( ! isPlainObject( color ) ) { - return false - } - - if ( typeof color.slug === 'string' && color.slug.includes( 'stk-global-color' ) ) { - return true + const { + colors, + } = useSelect( select => { + const stkSettings = select( 'stackable/global-colors' ).getSettings() + return { + colors: cloneDeep( stkSettings.stackableColors ), } - - return false - }, [ JSON.stringify( colors ) ] ) ) + } ) /** * Function used to update the colors in @wordpress/data, @@ -244,50 +75,43 @@ const ColorPickers = props => { * @param {Array} newColors colors passed. */ const updateColors = newColors => { - const updatedColors = newColors.filter( color => color.slug.match( /^stk-global-color/ ) ) - // Update the blocks in our page. - updateFallbackBlockAttributes( updatedColors ) + updateFallbackBlockAttributes( newColors ) // Save settings. - // const stackableColors = updatedColors.filter( color => color.slug.match( /^stk-global-color/ ) ) clearTimeout( saveTimeout ) saveTimeout = setTimeout( () => { - const settings = new models.Settings( { stackable_global_colors: [ updatedColors ] } ) // eslint-disable-line camelcase + const settings = new models.Settings( { stackable_global_colors: [ newColors ] } ) // eslint-disable-line camelcase settings.save() }, 300 ) // Update our store. dispatch( 'stackable/global-colors' ).updateSettings( { - stackableColors: updatedColors, + stackableColors: newColors, } ) } // Called when updating a color. - const onChangeColor = data => { + const onChangeColor = color => { const updatedColors = cloneDeep( colors ) - // Overwrite the selected color to a new color. - updatedColors[ selectedIndex ].color = data.hex - updatedColors[ selectedIndex ].rgb = getRgb( data.hex ) - - // Update the colors. - updateColors( updatedColors ) - } - - // Called when updating a style name. - const onChangeStyleName = value => { - const updatedColors = cloneDeep( colors ) - - // Overwrite the selected style name and slug to a new style name and slug. - updatedColors[ selectedIndex ].name = value + const selectedIndex = colors.findIndex( c => c.slug === color.slug ) + updatedColors[ selectedIndex ] = { ...color } // Update the colors. updateColors( updatedColors ) } // Called when deleting a color. - const onColorDelete = () => { + const onColorDelete = color => { + // Open a confirm box + // eslint-disable-next-line no-alert + const confirmDelete = window.confirm( __( 'Any blocks that use this color will become unlinked with this global color. Delete this color?', i18n ) ) + if ( ! confirmDelete ) { + return + } + + const selectedIndex = colors.findIndex( c => c.slug === color.slug ) const updatedColors = cloneDeep( colors ) // Delete the specific color based on the selected index. @@ -298,19 +122,6 @@ const ColorPickers = props => { // Update the colors. updateColors( updatedColors ) - setSelectedIndex( null ) - } - - // Called when the user decided to reset the color palette. - const onColorPaletteReset = () => { - // Revert the global color attributes to hex color. - convertGlobalColorBlockAttributesToStatic( colors ) - - // Update the colors - updateColors( [] ) - setSelectedIndex( null ) - - props.onReset() } // Called when adding a new color. @@ -320,7 +131,7 @@ const ColorPickers = props => { const color = createColor() const updatedColors = [ - ...select( 'core/block-editor' ).getSettings().colors, + ...select( 'stackable/global-colors' ).getSettings().stackableColors, { name: sprintf( __( 'Custom Color %s', i18n ), newIndex ), slug: `stk-global-color-${ slugId }`, @@ -332,9 +143,21 @@ const ColorPickers = props => { // Update the colors. updateColors( updatedColors ) - setSelectedIndex( newIndex - 1 ) + // Open the new color picker. + setTimeout( () => { + ref.current?.querySelector( '.stk-global-settings-color-picker__color-indicator-wrapper:last-child .block-editor-panel-color-gradient-settings__dropdown' )?.click() + }, 1 ) } + const onSortEnd = ( { oldIndex, newIndex } ) => { + const updatedColors = cloneDeep( colors ) + // Move the color to the new index. + updatedColors.splice( newIndex, 0, updatedColors.splice( oldIndex, 1 )[ 0 ] ) + + updateColors( updatedColors ) + setIsSorting( false ) + } + const classNames = classnames( 'ugb-global-settings-color-picker', 'components-circular-option-picker', @@ -343,56 +166,145 @@ const ColorPickers = props => { ) return ( - - - { colors.map( ( color, index ) => { - if ( ! isPlainObject( color ) ) { - return null - } - - return ( - setSelectedIndex( selectedIndex !== index ? index : null ) } - > - { selectedIndex === index && - setSelectedIndex( null ) } - > - - -
-
- -
-
- - } - - ) - } ) } - + + + ) + } } + renderContent={ () => ( +
+ onChange( { + ...color, + color: value, + } ) } + color={ color.color } + enableAlpha={ true } + /> +
+ ) } + /> +