├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ └── feature_request.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .nvmrc ├── .prettierrc.json ├── .release-it.json ├── .stylelintignore ├── .stylelintrc ├── .travis.yml ├── .version ├── LICENSE ├── README.md ├── assets ├── banner-1544x500.jpg ├── banner-772x250.jpg ├── icon-128x128.png ├── icon-256x256.png ├── screenshot-1.jpg ├── screenshot-10.jpg ├── screenshot-11.jpg ├── screenshot-12.jpg ├── screenshot-2.jpg ├── screenshot-3.jpg ├── screenshot-4.jpg ├── screenshot-5.jpg ├── screenshot-6.jpg ├── screenshot-7.jpg ├── screenshot-8.jpg └── screenshot-9.jpg ├── cloudinary.php ├── composer.json ├── composer.lock ├── css ├── cloudinary.css ├── fonts │ ├── cloudinary.3b839e5145ad58edde0191367a5a96f0.woff │ ├── cloudinary.d1a91c7f695026fd20974570349bc540.eot │ └── cloudinary.d8de6736f15e12f71ac22a2d374002e5.ttf ├── front-overlay.css ├── gallery-block-rtl.css ├── gallery-block.css ├── gallery-ui.css ├── images │ ├── academy-icon.svg │ ├── academy.jpg │ ├── arrow.svg │ ├── bandwidth.svg │ ├── circular-loader.svg │ ├── cloud.svg │ ├── cloudinary.svg │ ├── confetti.png │ ├── connection-string.png │ ├── crop.svg │ ├── dam-icon.svg │ ├── document.svg │ ├── documentation.jpg │ ├── gallery.svg │ ├── image.svg │ ├── learn.svg │ ├── loading.svg │ ├── logo-icon.svg │ ├── logo.svg │ ├── report.jpg │ ├── request.jpg │ ├── requests.svg │ ├── responsive.svg │ ├── sample.webp │ ├── star.svg │ ├── transformation.svg │ ├── units-plus.svg │ ├── units.svg │ ├── upload.svg │ ├── video.svg │ └── wizard-welcome.jpg ├── syntax-highlight.css └── video.css ├── gruntfile.js ├── instance.php ├── js ├── asset-edit.js ├── asset-manager.js ├── block-editor.asset.php ├── block-editor.js ├── breakpoints-preview.js ├── cloudinary.js ├── deactivate.asset.php ├── deactivate.js ├── front-overlay.js ├── gallery-block-rtl.css ├── gallery-block.asset.php ├── gallery-block.css ├── gallery-block.js ├── gallery-init.asset.php ├── gallery-init.js ├── gallery-ui.js ├── gallery.asset.php ├── gallery.js ├── inline-loader.asset.php ├── inline-loader.js ├── lazy-load.asset.php ├── lazy-load.js ├── lazyload-preview.js ├── media-modal.asset.php ├── media-modal.js ├── syntax-highlight.js ├── terms-order.asset.php ├── terms-order.js ├── video-init.asset.php ├── video-init.js ├── video.js └── wp-color-picker-alpha.js ├── languages └── cloudinary.pot ├── package-lock.json ├── package.json ├── package ├── package.php └── package.sh ├── php ├── assets │ └── class-rest-assets.php ├── cache │ ├── class-cache-point.php │ └── class-file-system.php ├── class-admin.php ├── class-assets.php ├── class-cache.php ├── class-cli-vip.php ├── class-cli.php ├── class-connect.php ├── class-cron.php ├── class-dashboard.php ├── class-deactivation.php ├── class-delivery-feature.php ├── class-delivery.php ├── class-exception.php ├── class-extension.php ├── class-extensions.php ├── class-media-library.php ├── class-media.php ├── class-meta-box.php ├── class-plugin.php ├── class-relate.php ├── class-report.php ├── class-rest-api.php ├── class-settings-component.php ├── class-settings.php ├── class-special-offer.php ├── class-string-replace.php ├── class-svg.php ├── class-sync.php ├── class-url.php ├── class-utils.php ├── component │ ├── class-assets.php │ ├── class-config.php │ ├── class-notice.php │ ├── class-settings.php │ └── class-setup.php ├── connect │ └── class-api.php ├── cron │ ├── class-lock-file.php │ └── class-lock-object.php ├── delivery │ ├── class-bypass.php │ ├── class-lazy-load.php │ └── class-responsive-breakpoints.php ├── integrations │ ├── class-integrations.php │ └── class-wpml.php ├── media │ ├── class-filter.php │ ├── class-gallery.php │ ├── class-global-transformations.php │ ├── class-upgrade.php │ ├── class-video.php │ └── class-woocommercegallery.php ├── misc │ └── class-image-sizes-no-textdomain.php ├── relate │ └── class-relationship.php ├── settings │ ├── class-setting.php │ └── storage │ │ ├── class-options.php │ │ ├── class-post-meta.php │ │ ├── class-storage.php │ │ └── class-transient.php ├── sync │ ├── class-delete-sync.php │ ├── class-download-sync.php │ ├── class-push-sync.php │ ├── class-storage.php │ ├── class-sync-queue.php │ ├── class-unsync.php │ └── class-upload-sync.php ├── templates │ ├── blank-template.php │ ├── connection-string.php │ ├── settings-footer.php │ ├── settings-header.php │ ├── settings-section.php │ ├── settings-tabs.php │ ├── special-offer.php │ ├── taxonomy-term-transformation-fields.php │ ├── taxonomy-transformation-fields.php │ ├── transformation-preview-video.php │ └── transformation-preview.php ├── traits │ ├── trait-cli.php │ ├── trait-params.php │ ├── trait-relation.php │ └── trait-singleton.php ├── ui │ ├── class-branch.php │ ├── class-component.php │ ├── class-state.php │ └── component │ │ ├── class-asset-preview.php │ │ ├── class-asset.php │ │ ├── class-breakpoints-preview.php │ │ ├── class-button.php │ │ ├── class-cache-status.php │ │ ├── class-chart-stat.php │ │ ├── class-checkbox.php │ │ ├── class-color.php │ │ ├── class-column.php │ │ ├── class-connect.php │ │ ├── class-cron.php │ │ ├── class-crops.php │ │ ├── class-data.php │ │ ├── class-debug.php │ │ ├── class-file-folder.php │ │ ├── class-folder-table.php │ │ ├── class-frame.php │ │ ├── class-group.php │ │ ├── class-html.php │ │ ├── class-icon-toggle.php │ │ ├── class-image-preview.php │ │ ├── class-info-box.php │ │ ├── class-lazyload-preview.php │ │ ├── class-line-stat.php │ │ ├── class-link.php │ │ ├── class-media-status.php │ │ ├── class-meta-box.php │ │ ├── class-notice.php │ │ ├── class-number.php │ │ ├── class-on-off.php │ │ ├── class-opt-level.php │ │ ├── class-page-header.php │ │ ├── class-page.php │ │ ├── class-panel-short.php │ │ ├── class-panel.php │ │ ├── class-plan-details.php │ │ ├── class-plan-status.php │ │ ├── class-plan.php │ │ ├── class-progress-bar.php │ │ ├── class-progress-ring.php │ │ ├── class-progress-sync.php │ │ ├── class-radio.php │ │ ├── class-react.php │ │ ├── class-referrer-link.php │ │ ├── class-row.php │ │ ├── class-select.php │ │ ├── class-submit.php │ │ ├── class-switch-cloud.php │ │ ├── class-sync.php │ │ ├── class-system.php │ │ ├── class-table.php │ │ ├── class-tabs.php │ │ ├── class-tag.php │ │ ├── class-tags-input.php │ │ ├── class-text.php │ │ ├── class-textarea.php │ │ └── class-video-preview.php └── url │ ├── class-cloudinary.php │ ├── class-url-object.php │ └── class-wordpress.php ├── phpcs.xml.dist ├── postcss.config.js ├── readme.txt ├── src ├── css │ ├── _variables.scss │ ├── components │ │ ├── _brand.scss │ │ ├── _global_transformations.scss │ │ ├── _media_library.scss │ │ ├── _settings.scss │ │ ├── _sync.scss │ │ ├── _terms_order.scss │ │ ├── _ui.scss │ │ ├── _widget.scss │ │ └── ui │ │ │ ├── _asset-table.scss │ │ │ ├── _charts.scss │ │ │ ├── _cron.scss │ │ │ ├── _gallery.scss │ │ │ ├── _grid.scss │ │ │ ├── _group.scss │ │ │ ├── _import.scss │ │ │ ├── _input.scss │ │ │ ├── _links.scss │ │ │ ├── _loading.scss │ │ │ ├── _media.scss │ │ │ ├── _modal.scss │ │ │ ├── _notice.scss │ │ │ ├── _page.scss │ │ │ ├── _panel.scss │ │ │ ├── _plan.scss │ │ │ ├── _sidebar.scss │ │ │ ├── _sizes-preview.scss │ │ │ ├── _tables.scss │ │ │ ├── _tabs.scss │ │ │ ├── _tooltips.scss │ │ │ ├── _ui-components.scss │ │ │ ├── _wizard.scss │ │ │ ├── controls │ │ │ ├── _excluded_types.scss │ │ │ ├── _icon-toggle.scss │ │ │ ├── _input-tags.scss │ │ │ ├── _on-off.scss │ │ │ ├── _radio-checkbox.scss │ │ │ ├── _select.scss │ │ │ └── _text.scss │ │ │ ├── panels │ │ │ ├── _infobox.scss │ │ │ ├── _legacy.scss │ │ │ ├── _optimize.scss │ │ │ ├── _panel-short.scss │ │ │ └── _submit-switch-cloud.scss │ │ │ └── wizard │ │ │ ├── _complete.scss │ │ │ ├── _connect.scss │ │ │ ├── _intro.scss │ │ │ ├── _optimize.scss │ │ │ └── _tabs.scss │ ├── fonts │ │ ├── cloudinary.eot │ │ ├── cloudinary.svg │ │ ├── cloudinary.ttf │ │ └── cloudinary.woff │ ├── front-overlay.scss │ ├── gallery-ui.scss │ ├── gallery.scss │ ├── images │ │ ├── academy-icon.svg │ │ ├── academy.jpg │ │ ├── arrow.svg │ │ ├── bandwidth.svg │ │ ├── chart-placeholder.svg │ │ ├── circle.svg │ │ ├── circular-loader.svg │ │ ├── cloud.svg │ │ ├── cloudinary.svg │ │ ├── confetti.png │ │ ├── connection-string.png │ │ ├── crop.svg │ │ ├── dam-icon.svg │ │ ├── document.svg │ │ ├── documentation.jpg │ │ ├── gallery.svg │ │ ├── image.svg │ │ ├── learn.svg │ │ ├── loading.svg │ │ ├── logo-icon.svg │ │ ├── logo.svg │ │ ├── report.jpg │ │ ├── request.jpg │ │ ├── requests.svg │ │ ├── responsive.svg │ │ ├── sample.webp │ │ ├── star.svg │ │ ├── transformation.svg │ │ ├── units-plus.svg │ │ ├── units.svg │ │ ├── upload.svg │ │ ├── video.svg │ │ ├── warning.svg │ │ └── wizard-welcome.jpg │ ├── main.scss │ └── video.scss └── js │ ├── asset-edit.js │ ├── asset-manager.js │ ├── blocks.js │ ├── breakpoints-preview.js │ ├── components │ ├── asset-editor.js │ ├── asset-preview.js │ ├── crops-sizes.js │ ├── extensions.js │ ├── featured-image.js │ ├── gallery-init.js │ ├── global-transformations.js │ ├── media-library.js │ ├── media-modal.js │ ├── modal.js │ ├── notices.js │ ├── onoff.js │ ├── progress.js │ ├── restricted-types.js │ ├── settings-gallery.js │ ├── settings-page.js │ ├── states.js │ ├── storage.js │ ├── suffix-value.js │ ├── tabs.js │ ├── tags-input.js │ ├── taxonomies.js │ ├── terms-inspector.js │ ├── ui.js │ ├── video.js │ └── wizard.js │ ├── deactivate.js │ ├── front-overlay.js │ ├── gallery-block │ ├── attributes.json │ ├── controls.js │ ├── deprecated.js │ ├── edit.js │ ├── icons.js │ ├── index.js │ ├── options.js │ ├── radio.js │ ├── save.js │ └── utils.js │ ├── inline-loader.js │ ├── lazy-load.js │ ├── lazyload-preview.js │ ├── main.js │ ├── syntax-highlight.js │ ├── terms-order.js │ ├── video-init.js │ └── wp-color-picker-alpha.js ├── ui-definitions ├── components │ ├── header.php │ ├── media-library.php │ ├── page.php │ ├── settings.php │ └── wizard.php ├── settings-image.php ├── settings-metaboxes.php ├── settings-pages.php ├── settings-sidebar.php └── settings-video.php └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # See https://make.wordpress.org/core/handbook/coding-standards/ 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | indent_style = tab 10 | indent_size = 4 11 | 12 | [*.{yml,json}] 13 | indent_style = space 14 | indent_size = 2 15 | 16 | [*.md] 17 | trim_trailing_whitespace = false 18 | 19 | [{.version,.editorconfig}] 20 | insert_final_newline = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.min.js 2 | **/node_modules/** 3 | **/vendor/** 4 | **/js/*.js 5 | build/* 6 | built/* -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "globals": { 6 | "cloudinary": "readonly", 7 | "jQuery": "readonly", 8 | "$": "readonly", 9 | "CLDN": "readonly", 10 | "CLDLB": "readonly", 11 | "CLD_GLOBAL_TRANSFORMATIONS": "readonly", 12 | "samplePlayer": "readonly", 13 | "CLDCACHE": "readonly", 14 | "cldData": "readonly", 15 | "CLD_METADATA": "readonly" 16 | }, 17 | "extends": [ 18 | "plugin:@wordpress/eslint-plugin/recommended" 19 | ], 20 | "rules": { 21 | "no-alert": "off", 22 | "no-console": "off", 23 | "no-unused-vars": "off", 24 | "no-nested-ternary": "off", 25 | "jsx-a11y/click-events-have-key-events": "off", 26 | "react-hooks/rules-of-hooks": "error", 27 | "react-hooks/exhaustive-deps": "warn" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Report an issue with the plugin 4 | 5 | --- 6 | 7 | ## Bug Description 8 | 9 | 10 | 11 | ## Expected Behaviour 12 | 13 | 14 | 15 | ## Steps to reproduce 16 | 17 | 18 | 19 | 1. Go to '...' 20 | 2. Click on '....' 21 | 3. Scroll down to '....' 22 | 4. See error 23 | 24 | ## Screenshots 25 | 26 | 27 | 28 | ## Additional context 29 | 30 | 31 | 32 | - WordPress version: 33 | - Plugin version: 34 | - Gutenberg plugin version (if applicable): 35 | - PHP version: 36 | - Plugin settings: 37 | 38 | 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | 3 | contact_links: 4 | 5 | - name: Cloudinary Support 6 | url: https://support.cloudinary.com/hc/en-us/requests/new 7 | about: If you’re encountering an issue or struggling to get the plugin to work, open a ticket to contact our support team. 8 | 9 | - name: WordPress Plugin Support 10 | url: https://wordpress.org/support/plugin/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/ 11 | about: Please ask and answer questions here. 12 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for the plugin 4 | 5 | --- 6 | 7 | ## Feature description 8 | 9 | 10 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | Fixes #123 3 | 4 | 5 | ## Approach 6 | 7 | - Describe the approach and the suggested implementation. 8 | 9 | 10 | ## QA notes 11 | 12 | - Detail the steps needed to verify the PR. 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | wp-config.php 3 | wp-content/advanced-cache.php 4 | wp-content/backup-db/ 5 | wp-content/backups/ 6 | wp-content/blogs.dir/ 7 | wp-content/cache/ 8 | wp-content/upgrade/ 9 | wp-content/uploads/ 10 | wp-content/mu-plugins/ 11 | wp-content/wp-cache-config.php 12 | wp-content/plugins/hello.php 13 | 14 | /.htaccess 15 | /license.txt 16 | /readme.html 17 | /sitemap.xml 18 | /sitemap.xml.gz 19 | 20 | .DS_Store 21 | 22 | # Grunt 23 | /build/ 24 | /node_modules/ 25 | npm-debug.log 26 | 27 | # Dev 28 | /vendor/ 29 | /dev-lib/ 30 | phpcs.xml 31 | css/*.map 32 | js/*.map 33 | /bin 34 | 35 | # Tests 36 | tests/data/ 37 | tests/includes/ 38 | coverage/html/ 39 | 40 | # ENV files 41 | .env 42 | 43 | # wp-env 44 | .wp-env.json 45 | 46 | # IDE 47 | .vscode 48 | 49 | # Testing packages 50 | cloudinary-image-management-and-manipulation-in-the-cloud-cdn 51 | cloudinary-image-management-and-manipulation-in-the-cloud-cdn.zip 52 | cloudinary-wordpress-v2.zip 53 | cloudinary-wordpress-v3.zip 54 | package/dist 55 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16 2 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "_comment": "workaround for deprecated jsxBracketSameLine set on @wordpress/prettier-config", 3 | "bracketSameLine": false 4 | } 5 | -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "@release-it/bumper": { 4 | "in": ".version" 5 | } 6 | }, 7 | "git": { 8 | "requireBranch": "master", 9 | "commitMessage": "Version ${version}", 10 | "tagName": "${version}", 11 | "tagAnnotation": "Version ${version}" 12 | }, 13 | "github": { 14 | "release": true, 15 | "releaseName": "Version ${version}", 16 | "draft": true, 17 | "tokenRef": "GITHUB_TOKEN" 18 | }, 19 | "npm": { 20 | "publish": false 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | **/css/*.css 2 | **/vendor/** 3 | **/node_modules/** 4 | **/js/*.css 5 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "customSyntax": "postcss-scss", 3 | "rules": { 4 | "selector-class-pattern": null 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | dist: xenial 2 | 3 | language: php 4 | 5 | before_install: 6 | - nvm install 7 | - nvm use 8 | 9 | install: 10 | - npm ci 11 | 12 | jobs: 13 | 14 | include: 15 | 16 | - php: "5.6" 17 | script: 18 | - npm run lint 19 | - npm run build 20 | 21 | - php: "7.4" 22 | script: 23 | - npm run lint 24 | - npm run build 25 | 26 | notifications: 27 | email: false 28 | 29 | cache: 30 | npm: true 31 | directories: 32 | - "$HOME/.composer/cache" 33 | -------------------------------------------------------------------------------- /.version: -------------------------------------------------------------------------------- 1 | 3.2.8 -------------------------------------------------------------------------------- /assets/banner-1544x500.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/banner-1544x500.jpg -------------------------------------------------------------------------------- /assets/banner-772x250.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/banner-772x250.jpg -------------------------------------------------------------------------------- /assets/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/icon-128x128.png -------------------------------------------------------------------------------- /assets/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/icon-256x256.png -------------------------------------------------------------------------------- /assets/screenshot-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-1.jpg -------------------------------------------------------------------------------- /assets/screenshot-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-10.jpg -------------------------------------------------------------------------------- /assets/screenshot-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-11.jpg -------------------------------------------------------------------------------- /assets/screenshot-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-12.jpg -------------------------------------------------------------------------------- /assets/screenshot-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-2.jpg -------------------------------------------------------------------------------- /assets/screenshot-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-3.jpg -------------------------------------------------------------------------------- /assets/screenshot-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-4.jpg -------------------------------------------------------------------------------- /assets/screenshot-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-5.jpg -------------------------------------------------------------------------------- /assets/screenshot-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-6.jpg -------------------------------------------------------------------------------- /assets/screenshot-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-7.jpg -------------------------------------------------------------------------------- /assets/screenshot-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-8.jpg -------------------------------------------------------------------------------- /assets/screenshot-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/assets/screenshot-9.jpg -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cloudinary/cloudinary-image-management-and-manipulation-in-the-cloud-cdn", 3 | "homepage": "https://wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/", 4 | "type": "wordpress-plugin", 5 | "license": "GPL-2.0-or-later", 6 | "require": { 7 | "ext-json": "*" 8 | }, 9 | "require-dev": { 10 | "dealerdirect/phpcodesniffer-composer-installer": "^0.7.0", 11 | "phpcompatibility/phpcompatibility-wp": "dev-master", 12 | "phpcompatibility/php-compatibility": "dev-develop as 9.99.99", 13 | "automattic/vipwpcs": "^3.0", 14 | "wp-coding-standards/wpcs": "^3.0" 15 | }, 16 | "config": { 17 | "platform": { 18 | "php": "5.6.20" 19 | }, 20 | "allow-plugins": { 21 | "dealerdirect/phpcodesniffer-composer-installer": true 22 | } 23 | }, 24 | "scripts": { 25 | "lint": [ 26 | "phpcs" 27 | ], 28 | "fix": [ 29 | "phpcbf" 30 | ] 31 | }, 32 | "minimum-stability": "dev" 33 | } 34 | -------------------------------------------------------------------------------- /css/fonts/cloudinary.3b839e5145ad58edde0191367a5a96f0.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/fonts/cloudinary.3b839e5145ad58edde0191367a5a96f0.woff -------------------------------------------------------------------------------- /css/fonts/cloudinary.d1a91c7f695026fd20974570349bc540.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/fonts/cloudinary.d1a91c7f695026fd20974570349bc540.eot -------------------------------------------------------------------------------- /css/fonts/cloudinary.d8de6736f15e12f71ac22a2d374002e5.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/fonts/cloudinary.d8de6736f15e12f71ac22a2d374002e5.ttf -------------------------------------------------------------------------------- /css/front-overlay.css: -------------------------------------------------------------------------------- 1 | .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{background-color:#333;border-radius:4px;color:#fff;font-size:14px;line-height:1.4;outline:0;position:relative;transition-property:transform,visibility,opacity;white-space:normal}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{border-top-color:initial;border-width:8px 8px 0;bottom:-7px;left:0;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:initial;border-width:0 8px 8px;left:0;top:-7px;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-left-color:initial;border-width:8px 0 8px 8px;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{border-right-color:initial;border-width:8px 8px 8px 0;left:-7px;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{color:#333;height:16px;width:16px}.tippy-arrow:before{border-color:transparent;border-style:solid;content:"";position:absolute}.tippy-content{padding:5px 9px;position:relative;z-index:1}.overlay-tag{border-radius:0 0 4px 0;color:#fff;font-size:.8rem;padding:10px;position:absolute;text-align:right;z-index:9999}.overlay-tag.wp-tag{background-color:#dd2c00}.overlay-tag.cld-tag{background-color:#3448c5}[data-tippy-root] .tippy-box{max-width:none!important}[data-tippy-root] .tippy-content{background-color:#333;min-width:250px;width:auto}[data-tippy-root] .tippy-content div{border-bottom:1px solid #555;display:flex;justify-content:space-between;margin-bottom:4px;padding:4px 0}[data-tippy-root] .tippy-content .title{margin-right:50px}[data-tippy-root] .tippy-content .edit-link{color:#fff;text-align:right;width:100%} -------------------------------------------------------------------------------- /css/gallery-block-rtl.css: -------------------------------------------------------------------------------- 1 | .radio-select{align-items:center;background:none;border:none;cursor:pointer;display:flex;margin:12px 0}.radio-select:focus{color:#007cba;outline:none}.radio-select--active{color:#007cba}.radio-select--active g{fill:#007cba!important}.radio-select__label{font-size:14px;margin-left:7px}.loading-spinner-container{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.components-placeholder__fieldset{justify-content:start}.colorpalette-color-label{align-items:center;display:flex;margin:8px 0}.wp-block-cloudinary-gallery .block-editor-media-placeholder .components-placeholder__label .dashicon{margin-right:8px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label{display:none}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender{margin-bottom:11px;margin-top:11px;min-height:auto;padding:11px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-button{margin-bottom:0} -------------------------------------------------------------------------------- /css/gallery-block.css: -------------------------------------------------------------------------------- 1 | .radio-select{align-items:center;background:none;border:none;cursor:pointer;display:flex;margin:12px 0}.radio-select:focus{color:#007cba;outline:none}.radio-select--active{color:#007cba}.radio-select--active g{fill:#007cba!important}.radio-select__label{font-size:14px;margin-left:7px}.loading-spinner-container{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.components-placeholder__fieldset{justify-content:start}.colorpalette-color-label{align-items:center;display:flex;margin:8px 0}.wp-block-cloudinary-gallery .block-editor-media-placeholder .components-placeholder__label .dashicon{margin-right:8px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label{display:none}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender{margin-bottom:11px;margin-top:11px;min-height:auto;padding:11px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-button{margin-bottom:0} -------------------------------------------------------------------------------- /css/images/academy-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /css/images/academy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/images/academy.jpg -------------------------------------------------------------------------------- /css/images/arrow.svg: -------------------------------------------------------------------------------- 1 | 5 | 7 | -------------------------------------------------------------------------------- /css/images/bandwidth.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Shape 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /css/images/circular-loader.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /css/images/cloud.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | crop 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /css/images/confetti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/images/confetti.png -------------------------------------------------------------------------------- /css/images/connection-string.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/images/connection-string.png -------------------------------------------------------------------------------- /css/images/crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /css/images/dam-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/images/document.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /css/images/documentation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/images/documentation.jpg -------------------------------------------------------------------------------- /css/images/gallery.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | crop 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /css/images/image.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /css/images/learn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Shape 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /css/images/logo-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/images/report.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/images/report.jpg -------------------------------------------------------------------------------- /css/images/request.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/images/request.jpg -------------------------------------------------------------------------------- /css/images/requests.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /css/images/sample.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/images/sample.webp -------------------------------------------------------------------------------- /css/images/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /css/images/units-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /css/images/units.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /css/images/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | crop copy 2 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /css/images/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /css/images/wizard-welcome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/css/images/wizard-welcome.jpg -------------------------------------------------------------------------------- /css/video.css: -------------------------------------------------------------------------------- 1 | .cld-video-player{max-width:100%} -------------------------------------------------------------------------------- /instance.php: -------------------------------------------------------------------------------- 1 | setup_cloudinary( $plugin_instance ); 42 | \WP_CLI::add_command( 'cloudinary', $cli ); 43 | } 44 | -------------------------------------------------------------------------------- /js/block-editor.asset.php: -------------------------------------------------------------------------------- 1 | array('react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => 'acdb83aa5cf9c0e8d936'); 2 | -------------------------------------------------------------------------------- /js/deactivate.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => '9b53a10d854ad5c7f5db'); 2 | -------------------------------------------------------------------------------- /js/gallery-block-rtl.css: -------------------------------------------------------------------------------- 1 | .radio-select{align-items:center;background:none;border:none;cursor:pointer;display:flex;margin:12px 0}.radio-select:focus{color:#007cba;outline:none}.radio-select--active{color:#007cba}.radio-select--active g{fill:#007cba!important}.radio-select__label{font-size:14px;margin-right:7px}.loading-spinner-container{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:100%}.components-placeholder__fieldset{justify-content:start}.colorpalette-color-label{align-items:center;display:flex;margin:8px 0}.wp-block-cloudinary-gallery .block-editor-media-placeholder .components-placeholder__label .dashicon{margin-left:8px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label{display:none}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender{margin-bottom:11px;margin-top:11px;min-height:auto;padding:11px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-button{margin-bottom:0} -------------------------------------------------------------------------------- /js/gallery-block.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'ea4c3028b39e34cf467e'); 2 | -------------------------------------------------------------------------------- /js/gallery-block.css: -------------------------------------------------------------------------------- 1 | .radio-select{align-items:center;background:none;border:none;cursor:pointer;display:flex;margin:12px 0}.radio-select:focus{color:#007cba;outline:none}.radio-select--active{color:#007cba}.radio-select--active g{fill:#007cba!important}.radio-select__label{font-size:14px;margin-left:7px}.loading-spinner-container{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.components-placeholder__fieldset{justify-content:start}.colorpalette-color-label{align-items:center;display:flex;margin:8px 0}.wp-block-cloudinary-gallery .block-editor-media-placeholder .components-placeholder__label .dashicon{margin-right:8px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label{display:none}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender{margin-bottom:11px;margin-top:11px;min-height:auto;padding:11px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-button{margin-bottom:0} -------------------------------------------------------------------------------- /js/gallery-init.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => '9059e1b247b2da07446d'); 2 | -------------------------------------------------------------------------------- /js/gallery-init.js: -------------------------------------------------------------------------------- 1 | (()=>{const{galleryWidget:e}=cloudinary;window.addEventListener("load",(function(){document.querySelector(".woocommerce-page")&&CLD_GALLERY_CONFIG&&CLD_GALLERY_CONFIG?.mediaAssets?.length&&e(CLD_GALLERY_CONFIG).render()}))})(); -------------------------------------------------------------------------------- /js/gallery-ui.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/js/gallery-ui.js -------------------------------------------------------------------------------- /js/gallery.asset.php: -------------------------------------------------------------------------------- 1 | array('react', 'react-dom', 'react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'e75fb83a26e8f73a40ea'); 2 | -------------------------------------------------------------------------------- /js/inline-loader.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => 'e82dd225edea94edf605'); 2 | -------------------------------------------------------------------------------- /js/lazy-load.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => 'f89102869f47abf4e354'); 2 | -------------------------------------------------------------------------------- /js/media-modal.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => 'a833cdbcaab9d93c37cf'); 2 | -------------------------------------------------------------------------------- /js/terms-order.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => 'e790e76b04c6884f87d1'); 2 | -------------------------------------------------------------------------------- /js/video-init.asset.php: -------------------------------------------------------------------------------- 1 | array(), 'version' => 'aefe496c15539471a301'); 2 | -------------------------------------------------------------------------------- /js/video-init.js: -------------------------------------------------------------------------------- 1 | !function(){if("undefined"!=typeof cldVideos){cldVideos=JSON.parse(cldVideos);for(const e in cldVideos){const d=cldVideos[e],o="cloudinary-video-"+e;cld.videoPlayer(o,d)}window.addEventListener("load",(function(){for(const e in cldVideos){const d="cloudinary-video-"+e;let o=document.getElementById(d).getElementsByTagName("video");1===o.length&&(o=o[0],o.style.width="100%",videoFreeForm&&-1===o.src.indexOf(videoFreeForm)&&!cldVideos[e].overwrite_transformations&&(o.src=o.src.replace("upload/","upload/"+videoFreeForm+"/")))}}))}}(); -------------------------------------------------------------------------------- /js/video.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/js/video.js -------------------------------------------------------------------------------- /package/package.php: -------------------------------------------------------------------------------- 1 | no_update ) ) { 39 | if ( ! empty( $data->no_update[ $slug ] ) ) { 40 | $data->no_update[ $slug ]->package = $file; 41 | $data->no_update[ $slug ]->new_version = $version; 42 | $data->response[ $slug ] = $data->no_update[ $slug ]; 43 | unset( $data->no_update[ $slug ] ); 44 | deactivate_plugins( $this_plugin ); 45 | } 46 | } 47 | // Add if available. 48 | if ( ! empty( $data->response ) ) { 49 | $slug = 'cloudinary-image-management-and-manipulation-in-the-cloud-cdn/cloudinary.php'; 50 | if ( ! empty( $data->response[ $slug ] ) ) { 51 | $data->response[ $slug ]->package = $file; 52 | $data->response[ $slug ]->new_version = $version; 53 | $data->response[ $slug ] = $data->response[ $slug ]; 54 | deactivate_plugins( $this_plugin ); 55 | } 56 | } 57 | 58 | return $data; 59 | } 60 | 61 | add_filter( 'pre_set_site_transient_update_plugins', 'cld_test_check_update', 100 ); 62 | 63 | /** 64 | * Delete the update transient on activation. 65 | */ 66 | function cld_test_init_update() { 67 | delete_site_transient( 'update_plugins' ); 68 | } 69 | 70 | register_activation_hook( __FILE__, 'cld_test_init_update' ); 71 | -------------------------------------------------------------------------------- /package/package.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Set the working directory to the repository root. 4 | PROJECT_ROOT_DIR="$(git rev-parse --show-toplevel)" 5 | 6 | # Set the working directory to the package root. 7 | PACKAGE_DIR="$PROJECT_ROOT_DIR/package" 8 | 9 | # Set the working directory to dist root. 10 | DIST_DIR="$PACKAGE_DIR/dist" 11 | 12 | # Set the working directory to the update tester. 13 | TESTER_DIR="$DIST_DIR/cloudinary-update-tester" 14 | 15 | # Get started. 16 | echo -e "\033[1;32m>> Start new build package.\033[0m" 17 | 18 | # Ensure we start from scratch. 19 | rm -rf "$DIST_DIR" 20 | mkdir -p "$TESTER_DIR" 21 | 22 | # Prepare the update tester plugin. 23 | cp "$PACKAGE_DIR/package.php" "$TESTER_DIR/cloudinary-update-tester.php" 24 | 25 | # Change to project root directory. 26 | cd "$PROJECT_ROOT_DIR" || exit 27 | 28 | # Build the release. 29 | npm install 30 | npm run package:build 31 | 32 | # All good. 33 | echo -e "☁️ \033[1;32mNew build package files is complete.\033[0m ☀️" 34 | -------------------------------------------------------------------------------- /php/class-cli-vip.php: -------------------------------------------------------------------------------- 1 | queries = array(); 30 | if ( is_object( $wp_object_cache ) ) { 31 | $wp_object_cache->group_ops = array(); 32 | $wp_object_cache->stats = array(); 33 | $wp_object_cache->memcache_debug = array(); 34 | $wp_object_cache->cache = array(); 35 | if ( method_exists( $wp_object_cache, '__remoteset' ) ) { 36 | $wp_object_cache->__remoteset(); 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /php/class-exception.php: -------------------------------------------------------------------------------- 1 | plugin = $plugin; 34 | } 35 | 36 | /** 37 | * Register assets to be used for the class. 38 | */ 39 | public function register_assets() { 40 | } 41 | 42 | /** 43 | * Enqueue Assets 44 | */ 45 | public function enqueue_assets() { 46 | } 47 | 48 | /** 49 | * Check if the extension is active on the page (for assets to be loaded). 50 | * 51 | * @return bool|void 52 | */ 53 | public function is_active() { 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /php/class-media-library.php: -------------------------------------------------------------------------------- 1 | handle = add_menu_page( 42 | __( 'Cloudinary Media Library', 'cloudinary' ), 43 | __( 'Cloudinary DAM', 'cloudinary' ), 44 | Utils::user_can( 'manage_dam' ) ? 'exist' : false, 45 | self::MEDIA_LIBRARY_SLUG, 46 | array( $this, 'render' ), 47 | 'dashicons-cloudinary-dam', 48 | '81.6' 49 | ); 50 | } 51 | 52 | /** 53 | * Render the page template. 54 | */ 55 | public function render() { 56 | require CLDN_PATH . 'ui-definitions/components/media-library.php'; 57 | } 58 | 59 | /** 60 | * Check if this class is active. 61 | * 62 | * @return bool True if active False if not. 63 | */ 64 | public function is_active() { 65 | $screen = get_current_screen(); 66 | 67 | return $screen instanceof WP_Screen && $screen->base === $this->handle; 68 | } 69 | 70 | /** 71 | * Register assets to be used for the class. 72 | */ 73 | public function register_assets() { 74 | } 75 | 76 | /** 77 | * Enqueue Assets 78 | */ 79 | public function enqueue_assets() { 80 | $media = $this->plugin->get_component( 'media' ); 81 | wp_enqueue_script( 'cloudinary' ); 82 | 83 | $params = array( 84 | 'fetch_url' => Utils::rest_url( REST_API::BASE . '/asset' ), 85 | 'nonce' => wp_create_nonce( 'wp_rest' ), 86 | ); 87 | 88 | $this->plugin->add_script_data( 'dam', $params ); 89 | $media->editor_assets(); 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /php/component/class-assets.php: -------------------------------------------------------------------------------- 1 | get_lock_file_name( $file ) ); 32 | } 33 | 34 | /** 35 | * Get the lock name. 36 | * 37 | * @param string|null $file_name The name of the transient. 38 | * 39 | * @return mixed|string|null 40 | */ 41 | public function get_lock_file_name( $file_name = null ) { 42 | if ( null === $file_name ) { 43 | $file_name = 'cron-run'; 44 | } 45 | 46 | return $file_name; 47 | } 48 | 49 | /** 50 | * Check if a lock is in place. 51 | * 52 | * @param string|null $file The lock name. 53 | * 54 | * @return bool 55 | */ 56 | public function has_lock_file( $file = null ) { 57 | return ! empty( $this->get_lock_file( $file ) ); 58 | } 59 | 60 | /** 61 | * Set a lock. 62 | * 63 | * @param string|null $file The name to set. 64 | * @param mixed $data The data to set. 65 | * 66 | * @return mixed|string 67 | */ 68 | public function set_lock_file( $file = null, $data = null ) { 69 | $time = time(); 70 | $bits = $data ? json_decode( $data, true ) : uniqid( $time ); 71 | if ( ! $this->has_lock_file( $file ) ) { 72 | set_transient( self::PREFIX . $this->get_lock_file_name( $file ), $bits, Cron::$daemon_watcher_interval ); 73 | } 74 | 75 | return $bits; 76 | } 77 | 78 | /** 79 | * Delete a lock. 80 | * 81 | * @param string|null $file The name to set. 82 | */ 83 | public function delete_lock_file( $file = null ) { 84 | delete_transient( self::PREFIX . $this->get_lock_file_name( $file ) ); 85 | } 86 | 87 | } 88 | -------------------------------------------------------------------------------- /php/integrations/class-integrations.php: -------------------------------------------------------------------------------- 1 | can_enable() ) { 30 | return; 31 | } 32 | 33 | $this->plugin = $plugin; 34 | $this->register_hooks(); 35 | } 36 | 37 | /** 38 | * Check if the integration can be enabled. 39 | * 40 | * @return bool 41 | */ 42 | abstract public function can_enable(); 43 | 44 | /** 45 | * Register hooks for the integration. 46 | */ 47 | abstract public function register_hooks(); 48 | } 49 | -------------------------------------------------------------------------------- /php/misc/class-image-sizes-no-textdomain.php: -------------------------------------------------------------------------------- 1 | __( 'Thumbnail' ), 29 | 'medium' => __( 'Medium' ), 30 | 'medium_large' => __( 'Medium Large' ), 31 | 'large' => __( 'Large' ), 32 | 'full' => __( 'Full Size' ), 33 | // phpcs:enable WordPress.WP.I18n.MissingArgDomain 34 | ); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /php/settings/storage/class-options.php: -------------------------------------------------------------------------------- 1 | prefix( $slug ), $this->get( $slug ), false ); 39 | } 40 | 41 | /** 42 | * Delete the data from storage source. 43 | * 44 | * @param string $slug The slug of the setting storage to delete. 45 | * 46 | * @return bool 47 | */ 48 | public function delete( $slug ) { 49 | return delete_option( $this->prefix( $slug ) ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /php/settings/storage/class-post-meta.php: -------------------------------------------------------------------------------- 1 | media = $plugin->get_component( 'media' ); 37 | } 38 | 39 | /** 40 | * Load the data from storage source. 41 | * 42 | * @param string $prefixed_slug The slug to load. 43 | * 44 | * @return mixed 45 | */ 46 | protected function load( $prefixed_slug ) { 47 | $post = get_post(); 48 | $data = null; 49 | 50 | if ( $post instanceof WP_Post ) { 51 | $data = $this->media->get_post_meta( $post->ID, $prefixed_slug, true ); 52 | } 53 | 54 | return $data; 55 | } 56 | 57 | /** 58 | * Save the data to storage source. 59 | * 60 | * @param string $slug The slug of the setting storage to save. 61 | * 62 | * @return bool 63 | */ 64 | public function save( $slug ) { 65 | $save = false; 66 | $post = get_post(); 67 | 68 | if ( $post instanceof WP_Post ) { 69 | $save = $this->media->update_post_meta( $post->ID, $this->prefix( $slug ), $this->get( $slug ) ); 70 | } 71 | 72 | return $save; 73 | } 74 | 75 | /** 76 | * Delete the data from storage source. 77 | * 78 | * @param string $slug The slug of the setting storage to delete. 79 | * 80 | * @return bool 81 | */ 82 | public function delete( $slug ) { 83 | $delete = false; 84 | $post = get_post(); 85 | 86 | if ( $post instanceof WP_Post ) { 87 | $delete = $this->media->delete_post_meta( $post->ID, $this->prefix( $slug ) ); 88 | } 89 | 90 | return $delete; 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /php/settings/storage/class-transient.php: -------------------------------------------------------------------------------- 1 | prefix( $slug ); 39 | if ( empty( $this->data[ $prefixed_slug ] ) ) { 40 | return $this->delete( $prefixed_slug ); 41 | } 42 | 43 | return set_transient( $prefixed_slug, $this->get( $slug ) ); 44 | } 45 | 46 | /** 47 | * Delete the data from storage source. 48 | * 49 | * @param string $slug The slug of the setting storage to delete. 50 | * 51 | * @return bool 52 | */ 53 | public function delete( $slug ) { 54 | return delete_transient( $this->prefix( $slug ) ); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /php/templates/blank-template.php: -------------------------------------------------------------------------------- 1 | dir_url; 9 | ?> 10 | 11 |
12 |
13 |

14 |

15 | ', 23 | esc_attr__( 'Create here a free Cloudinary account', 'cloudinary' ) 24 | ), 25 | '' 26 | ) 27 | ); 28 | ?> 29 |

30 |
    31 |
    2. 32 |
  2. 33 | ', 38 | '' 39 | ); 40 | ?> 41 |
    3. 42 |
  3. 43 | %2$s and %1$s%2$s with your actual values.%3$sYour cloud name is already correctly included in the format.', 'cloudinary' ), 47 | '', 48 | '', 49 | '
    ' 50 | ); 51 | ?> 52 |
    4. 53 |
54 |
55 |
56 | <?php esc_attr_e( 'Where the connection string can be found on the cloudinary.com console.', 'cloudinary' ); ?> 57 |
58 |
59 | -------------------------------------------------------------------------------- /php/templates/settings-footer.php: -------------------------------------------------------------------------------- 1 | get_tab(); // phpcs:ignore 9 | $save_button_label = ! empty( $tab['save_button_label'] ) ? $tab['save_button_label'] : $this->ui['save_button_label']; 10 | ?> 11 | 12 |

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /php/templates/settings-header.php: -------------------------------------------------------------------------------- 1 | active_tab(); 9 | 10 | $setting_slug = $this->setting_slug(); 11 | 12 | // Push notices if found. ye I know, errors.. sigh. 13 | settings_errors( $setting_slug ); 14 | ?> 15 |
16 |

ui['page_title'] ); ?>

17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /php/templates/settings-section.php: -------------------------------------------------------------------------------- 1 | get_tab(); // phpcs:ignore 9 | $section = $this->setting_slug(); 10 | $classes = array( 11 | 'settings-tab-section', 12 | ); 13 | if ( ! empty( $tab['classes'] ) ) { 14 | $classes = array_merge( $classes, $tab['classes'] ); 15 | } 16 | ?> 17 |
18 |
19 | 20 |
21 |
22 | -------------------------------------------------------------------------------- /php/templates/settings-tabs.php: -------------------------------------------------------------------------------- 1 | get_page(); 9 | if ( empty( $current_page['tabs'] ) ) { 10 | return; 11 | } 12 | $nav_tabs = $current_page['tabs']; 13 | $config = $this->plugin->config; 14 | $connect = $this->plugin->components['connect']; 15 | $active_tabs = array_filter( 16 | $nav_tabs, 17 | function ( $tab ) use ( $config, $connect ) { 18 | // If this tab has "require_config" set, ensure we're fully connected to cloudinary. 19 | if ( ! empty( $tab['requires_config'] ) && 20 | ( empty( $config['connect'] ) || empty( $connect ) || empty( $connect->is_connected() ) ) 21 | ) { 22 | return false; 23 | } 24 | 25 | return true; 26 | } 27 | ); 28 | 29 | ?> 30 | 31 |

32 | $tab_definition ) : ?> 33 | build_tab_attributes( $tab_slug ); ?>> 34 | 35 |

36 | 37 | -------------------------------------------------------------------------------- /php/templates/special-offer.php: -------------------------------------------------------------------------------- 1 | 9 | 10 |

11 | 12 |

13 | 14 |
15 | 16 |

17 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /php/templates/taxonomy-term-transformation-fields.php: -------------------------------------------------------------------------------- 1 | labels->singular_name; 19 | ?> 20 | taxonomy_fields as $context => $set ) : ?> 21 | 22 | 23 |

24 | 34 |

35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | set_param( 'title', null ); ?> 44 | set_param( 'tooltip_text', null ); ?> 45 | get_component()->render( true ); ?> 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /php/templates/taxonomy-transformation-fields.php: -------------------------------------------------------------------------------- 1 | 20 |
21 |
22 |

23 | singular_name ) ); 26 | ?> 27 |

28 | 29 |
30 | 49 |
50 | -------------------------------------------------------------------------------- /php/templates/transformation-preview-video.php: -------------------------------------------------------------------------------- 1 | $url, 14 | 'preview_url' => $preview_src, 15 | 'file' => $sample, 16 | 'error' => esc_html__( 'Invalid transformations or error loading preview.', 'cloudinary' ), 17 | 'valid_types' => \Cloudinary\Connect\Api::$transformation_index['video'], 18 | ); 19 | 20 | wp_add_inline_script( 'cloudinary', 'CLD_GLOBAL_TRANSFORMATIONS.video = ' . wp_json_encode( $script_data ), 'before' ); 21 | 22 | $player = array(); 23 | $player[] = 'var cld = cloudinary.Cloudinary.new({ cloud_name: \'demo\' });'; 24 | $player[] = 'var samplePlayer = cld.videoPlayer(\'sample-video\', { fluid : true } );'; 25 | wp_add_inline_script( 'cld-player', implode( $player ) ); 26 | ?> 27 | 28 | 39 | -------------------------------------------------------------------------------- /php/templates/transformation-preview.php: -------------------------------------------------------------------------------- 1 | $url, 14 | 'preview_url' => $preview_src, 15 | 'file' => $sample, 16 | 'error' => esc_html__( 'Invalid transformations or error loading preview.', 'cloudinary' ), 17 | /* translators: %s is the transformation that breaks the preview. */ 18 | 'warning' => esc_html__( 'Preview cannot be generated because %s transformation was used.', 'cloudinary' ), 19 | 'valid_types' => \Cloudinary\Connect\Api::$transformation_index['image'], 20 | ); 21 | 22 | wp_add_inline_script( 'cloudinary', 'CLD_GLOBAL_TRANSFORMATIONS.image = ' . wp_json_encode( $script_data ), 'before' ); 23 | 24 | ?> 25 | 26 |
27 | 28 | 29 |
30 | 31 | 32 | 33 |
34 | 35 |
36 | ../image/upload 37 |
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /php/traits/trait-relation.php: -------------------------------------------------------------------------------- 1 | query_relations ) { 35 | $delivery = get_plugin_instance()->get_component( 'delivery' ); 36 | $this->query_relations = array( $delivery, 'query_relations' ); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /php/traits/trait-singleton.php: -------------------------------------------------------------------------------- 1 | setting->get_param( 'label', __( 'Save Changes', 'cloudinary' ) ); 37 | $struct['attributes']['type'] = $this->type; 38 | $struct['attributes']['name'] = 'submitted_setting'; 39 | $struct['attributes']['value'] = $this->setting->get_slug(); 40 | $struct['attributes']['id'] = $this->setting->get_slug(); 41 | $classes = array( 42 | 'button', 43 | ); 44 | $struct['attributes']['class'] = array_merge( $classes, (array) $this->setting->get_param( 'style', array( 'button-primary' ) ) ); 45 | 46 | return $struct; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /php/ui/component/class-cache-status.php: -------------------------------------------------------------------------------- 1 | plugin->get_component( 'cache' ); 37 | $this->cache = $cache->cache_point; 38 | $cache_points = $this->cache->get_active_cache_points(); 39 | 40 | $title = $this->get_part( 'h3' ); 41 | $title['content'] = __( 'Assets cached to Cloudinary', 'cloudinary' ); 42 | 43 | $struct['element'] = 'div'; 44 | $table = array( 45 | 'type' => 'table', 46 | 'columns' => array( 47 | 'cache_point' => __( 'Cache Point', 'cloudinary' ), 48 | 'cached_items' => array( 49 | 'content' => __( 'Cached items', 'cloudinary' ), 50 | 'attributes' => array( 51 | 'style' => 'text-align:center;', 52 | ), 53 | ), 54 | ), 55 | 'rows' => array(), 56 | ); 57 | foreach ( $cache_points as $cache_point ) { 58 | $items = $this->cache->get_cache_point_cache( $cache_point->ID ); 59 | $table['rows'][ $cache_point->ID ] = array( 60 | 'cache_point' => array( 61 | 'content' => wp_basename( untrailingslashit( $cache_point->post_title ) ), 62 | ), 63 | 'cached_items' => array( 64 | 'content' => ' ' . $items['total'] . ' ', 65 | 'attributes' => array( 66 | 'style' => 'text-align:center;', 67 | ), 68 | ), 69 | ); 70 | } 71 | $table_obj = $this->setting->create_setting( 'cached_status', $table, $this->setting ); 72 | $struct['content'] = $table_obj->render_component(); 73 | 74 | return $struct; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /php/ui/component/class-checkbox.php: -------------------------------------------------------------------------------- 1 | $value_item ) { 37 | $sanitized_items[ $value_key ] = parent::sanitize_value( $value_item ); 38 | } 39 | 40 | return $sanitized_items; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /php/ui/component/class-column.php: -------------------------------------------------------------------------------- 1 | setting->has_param( 'width' ) ) { 28 | if ( ! isset( $struct['attributes']['style'] ) ) { 29 | $struct['attributes']['style'] = ''; 30 | } 31 | $struct['attributes']['style'] .= 'width:' . $this->setting->get_param( 'width' ) . ';'; 32 | } 33 | 34 | if ( $this->setting->has_param( 'class' ) ) { 35 | $struct['attributes']['class'] = array_merge( $struct['attributes']['class'], $this->setting->get_param( 'class' ) ); 36 | } 37 | 38 | if ( $this->setting->has_param( 'tab_id' ) ) { 39 | $struct['attributes']['id'] = $this->setting->get_param( 'tab_id' ); 40 | $struct['attributes']['class'][] = 'tabbed-content'; 41 | } 42 | 43 | return $struct; 44 | } 45 | 46 | } 47 | -------------------------------------------------------------------------------- /php/ui/component/class-data.php: -------------------------------------------------------------------------------- 1 | $message ) { 42 | if ( is_array( $message ) ) { 43 | $list[] = $key . ':'; 44 | $list[] = implode( "\n", $message ); 45 | $list[] = '----------'; 46 | 47 | } else { 48 | $list[] = $message; 49 | } 50 | } 51 | $struct['content'] = implode( "\n", $list ); 52 | 53 | return $struct; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /php/ui/component/class-frame.php: -------------------------------------------------------------------------------- 1 | setting->get_param( 'content' ); 37 | $struct['attributes']['href'] = $this->setting->get_param( 'url' ); 38 | $struct['attributes']['target'] = $this->setting->get_param( 'target', '_blank' ); 39 | $struct['render'] = true; 40 | $struct['attributes']['class'] = $this->setting->get_param( 41 | 'attributes:class', 42 | array( 43 | 'button', 44 | 'button-primary', 45 | ) 46 | ); 47 | 48 | return $struct; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /php/ui/component/class-meta-box.php: -------------------------------------------------------------------------------- 1 | page_actions(); 50 | 51 | return $struct; 52 | } 53 | 54 | /** 55 | * Creates the options page and action inputs. 56 | * 57 | * @return array 58 | */ 59 | protected function page_actions() { 60 | 61 | $option_name = $this->get_option_name(); 62 | 63 | // Set the attributes for the field. 64 | $option_atts = array( 65 | 'type' => 'hidden', 66 | 'name' => 'cloudinary-active-metabox', 67 | 'value' => $option_name, 68 | ); 69 | $inputs = array( 70 | 'active' => $this->get_part( 'input' ), 71 | 'no_redirect' => $this->get_part( 'input' ), 72 | ); 73 | $inputs['active']['attributes'] = $option_atts; 74 | $inputs['active']['content'] = true; 75 | 76 | $option_atts['name'] = '_cld_no_redirect'; 77 | $option_atts['value'] = 'true'; 78 | 79 | $inputs['no_redirect']['attributes'] = $option_atts; 80 | $inputs['no_redirect']['content'] = true; 81 | 82 | return $inputs; 83 | } 84 | } 85 | 86 | -------------------------------------------------------------------------------- /php/ui/component/class-number.php: -------------------------------------------------------------------------------- 1 | setting->get_param( 'content' ); 37 | $struct['attributes']['class'][] = 'cld-page-header'; 38 | 39 | return $struct; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /php/ui/component/class-panel-short.php: -------------------------------------------------------------------------------- 1 | setting->get_param( 'value', 100 ); 38 | $struct['attributes']['data-text'] = $this->setting->get_param( 'text' ); 39 | $struct['attributes']['data-color'] = $this->setting->get_param( 'color', '#304ec4' ); 40 | $struct['attributes']['data-progress'] = 'circle'; 41 | 42 | return $struct; 43 | } 44 | 45 | } 46 | -------------------------------------------------------------------------------- /php/ui/component/class-progress-sync.php: -------------------------------------------------------------------------------- 1 | setting->get_param( 'poll' ) ) { 37 | $struct['attributes']['data-url'] = Utils::rest_url( REST_API::BASE . '/stats' ); 38 | $struct['attributes']['data-poll'] = true; 39 | } 40 | 41 | return $struct; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /php/ui/component/class-referrer-link.php: -------------------------------------------------------------------------------- 1 | get_part( 'span' ); 45 | $icon['render'] = true; 46 | $icon['attributes']['class'] = array( 47 | 'dashicons', 48 | 'dashicons-arrow-left-alt', 49 | ); 50 | $struct['children']['icon'] = $icon; 51 | 52 | // Link Text. 53 | $link = $this->get_part( 'span' ); 54 | $link['element'] = 'span'; 55 | $link['content'] = $referrer; 56 | $struct['children']['link'] = $link; 57 | 58 | } 59 | 60 | return $struct; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /php/ui/component/class-row.php: -------------------------------------------------------------------------------- 1 | setting->has_param( 'align' ) ) { 37 | $struct['attributes']['class'][] = 'align-' . $this->setting->get_param( 'align' ); 38 | } 39 | 40 | return $struct; 41 | } 42 | 43 | } 44 | -------------------------------------------------------------------------------- /php/ui/component/class-select.php: -------------------------------------------------------------------------------- 1 | get_name(); 36 | $struct['attributes']['id'] = $this->setting->get_slug(); 37 | $struct['attributes']['class'][] = 'regular-' . $this->type; 38 | if ( $this->setting->has_param( 'required' ) ) { 39 | $struct['attributes']['required'] = 'required'; 40 | } 41 | 42 | return $struct; 43 | } 44 | 45 | /** 46 | * Filter the option parts structure. 47 | * 48 | * @param array $struct The array structure. 49 | * 50 | * @return array 51 | */ 52 | protected function option( $struct ) { 53 | 54 | $select_options = array(); 55 | $options = $this->setting->get_param( 'options', array() ); 56 | $struct['attributes']['type'] = $this->type; 57 | $struct['attributes']['name'] = $this->get_name(); 58 | foreach ( $options as $key => $value ) { 59 | $option = $struct; 60 | if ( is_int( $key ) ) { 61 | // Set to value if a non keyed array. 62 | $key = $value; 63 | } 64 | if ( $key === $this->setting->get_value() ) { 65 | $option['attributes']['selected'] = 'selected'; 66 | } 67 | $option['attributes']['value'] = $key; 68 | $option['content'] = $value; 69 | $select_options[] = $option; 70 | } 71 | 72 | return $select_options; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /php/ui/component/class-submit.php: -------------------------------------------------------------------------------- 1 | $this->setting->get_root_setting()->get_slug(), 33 | 'section' => 'wizard', 34 | ), 35 | 'admin.php' 36 | ); 37 | 38 | $struct['element'] = 'a'; 39 | $struct['content'] = __( 'Launch wizard', 'cloudinary' ); 40 | $struct['attributes']['href'] = $url; 41 | $struct['attributes']['class'] = array( 42 | 'button', 43 | 'button-primary', 44 | ); 45 | 46 | if ( $plugin->get_component( 'connect' )->has_connection_string_constant() ) { 47 | unset( $struct['attributes']['href'] ); 48 | $struct['element'] = 'button'; 49 | $struct['attributes']['disabled'] = 'disabled'; 50 | $struct['attributes']['title'] = __( 'Connection string defined by constant.', 'cloudinary' ); 51 | } 52 | 53 | return $struct; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /php/ui/component/class-tabs.php: -------------------------------------------------------------------------------- 1 | get_tabs(); 38 | 39 | return $struct; 40 | } 41 | 42 | /** 43 | * Get the tab parts structure. 44 | * 45 | * @return array 46 | */ 47 | protected function get_tabs() { 48 | 49 | $tabs = array(); 50 | foreach ( $this->setting->get_param( 'tabs', array() ) as $index => $tab_conf ) { 51 | 52 | // Create the tab wrapper. 53 | $tab = $this->get_part( 'li' ); 54 | $tab['attributes']['class'] = array( 55 | 'cld-page-tabs-tab', 56 | ); 57 | 58 | // Create the link. 59 | $link = $this->get_part( 'button' ); 60 | $link['content'] = $tab_conf['text']; 61 | $link['attributes']['data-tab'] = $tab_conf['id']; 62 | 63 | if ( empty( $tabs ) ) { 64 | $link['attributes']['class'][] = 'is-active'; 65 | } 66 | 67 | // Add tab to list. 68 | $tab['children'][ $index ] = $link; 69 | $tabs[ $index ] = $tab; 70 | } 71 | 72 | return $tabs; 73 | } 74 | 75 | } 76 | -------------------------------------------------------------------------------- /php/ui/component/class-tag.php: -------------------------------------------------------------------------------- 1 | setting->get_param( 'element', null ); 36 | $struct['attributes'] = $this->setting->get_param( 'attributes', array() ); 37 | $struct['render'] = true; 38 | if ( $this->setting->has_param( 'content' ) ) { 39 | $struct['content'] = $this->setting->get_param( 'content' ); 40 | } 41 | 42 | return $struct; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /php/ui/component/class-textarea.php: -------------------------------------------------------------------------------- 1 | setting->get_value(); 29 | $struct['attributes']['class'] = array( 30 | 'large-text', 31 | 'code', 32 | ); 33 | $struct['attributes']['rows'] = $this->setting->get_param( 'rows', 5 ); 34 | unset( $struct['attributes']['type'] ); 35 | unset( $struct['attributes']['value'] ); 36 | 37 | return $struct; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /php/url/class-wordpress.php: -------------------------------------------------------------------------------- 1 | relation['post_id']; 29 | } 30 | 31 | /** 32 | * Cloudinary URL 33 | * 34 | * @param string|array $size The size or array of width and height. 35 | * 36 | * @return string 37 | */ 38 | public function cloudinary_url( $size = null ) { 39 | if ( ! $this->cloudinary_url ) { 40 | $this->cloudinary_url = new Cloudinary(); 41 | $this->cloudinary_url->set_relation( $this->relation ); 42 | } 43 | 44 | return $this->cloudinary_url->url( $size ); 45 | } 46 | 47 | /** 48 | * Get the raw URL. 49 | * 50 | * @param string|array $size The size or array of width and height. 51 | * 52 | * @return string 53 | */ 54 | public function url( $size = null ) { 55 | $return = ''; 56 | if ( empty( $size ) ) { 57 | $return = wp_get_attachment_url( $this->get_id() ); 58 | } else { 59 | $return = wp_get_attachment_image_url( $this->get_id(), $size ); 60 | } 61 | 62 | return $return; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /phpcs.xml.dist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | . 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | php/class-cli.php 33 | php/traits/trait-cli.php 34 | 35 | 36 | 37 | 38 | 39 | /build/ 40 | /js/ 41 | /node_modules/ 42 | /vendor/ 43 | 44 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /src/css/_variables.scss: -------------------------------------------------------------------------------- 1 | $color-green: #558b2f; 2 | $color-success: #2a0; 3 | $color-red: #dd2c00; 4 | $color-light-grey: #e5e5e5; 5 | $color-white: #fff; 6 | $color-blue: #0071ba; 7 | $color-orange: #fd9d2c; 8 | $color-wp-blue: #3273ab; 9 | $color-disabled-grey: #90a0b3; 10 | $color-blue-grey: #e9ecf9; 11 | $color-notification-success: #20b832; 12 | $color-cld-blue: #3448c5; 13 | $color-cld-blue-faded: rgba(52, 72, 197, 0.15); 14 | $color-cld-dark-blue: #1e337f; 15 | $color-cld-grey-blue: #c6d1db; 16 | $color-cld-light-grey: #eaecfa; 17 | $color-cld-description: rgba(0, 0, 1, 0.5); 18 | $color-cld-dark-description: rgba(0, 0, 1, 0.75); 19 | $color-cld-coral: #ff5050; 20 | $color-grey-background: #f1f1f1; 21 | 22 | /** Sizes */ 23 | $content-width: 870px; 24 | $size-small: 783px; 25 | $size-medium: 960px; 26 | $size-large: 1200px; 27 | 28 | /** Font Sizes */ 29 | $size-panel-title: 15px; 30 | $size-panel-subtitle: 12px; 31 | $size-sidebar-title: 14px; 32 | $size-line-chart-value: 14px; 33 | $size-panel-content: 12px; 34 | $size-panel-description: 12px; 35 | $size-panel-small: 10px; 36 | $size-button: 11px; 37 | $size-setting-label: 14px; 38 | $size-setting-field: 13px; 39 | 40 | /** Padding and margins */ 41 | $size-padding-column: 13px; 42 | $size-padding-panel-title: 19px 23px; 43 | $size-padding-sidebar-title: 6px 14px; 44 | $size-padding-panel: 23px 24px; 45 | $size-padding-sidebar: 14px 18px; 46 | 47 | $size-settings-max-width: 800px; 48 | -------------------------------------------------------------------------------- /src/css/components/_global_transformations.scss: -------------------------------------------------------------------------------- 1 | .global { 2 | 3 | &-transformations { 4 | 5 | &-preview { 6 | position: relative; 7 | max-width: 600px; 8 | } 9 | 10 | &-spinner { 11 | display: none; 12 | } 13 | 14 | &-button.button-primary { 15 | display: none; 16 | position: absolute; 17 | z-index: 100; 18 | } 19 | 20 | &-url { 21 | margin-bottom: 5px; 22 | margin-top: 5px; 23 | 24 | 25 | &-transformation { 26 | max-width: 100px; 27 | overflow: hidden; 28 | text-overflow: ellipsis; 29 | color: #51a3ff; 30 | } 31 | 32 | &-file { 33 | color: #f2d864; 34 | } 35 | 36 | &-link { 37 | display: block; 38 | padding: 16px; 39 | background-color: #262c35; 40 | text-decoration: none; 41 | color: #fff; 42 | border-radius: 6px; 43 | overflow: hidden; 44 | text-overflow: ellipsis; 45 | 46 | &:hover { 47 | color: #888; 48 | text-decoration: underline; 49 | } 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/css/components/_media_library.scss: -------------------------------------------------------------------------------- 1 | .cloudinary { 2 | 3 | &-media { 4 | 5 | &-library { 6 | position: relative; 7 | margin-left: -20px; 8 | 9 | @media screen and (max-width: 782px) { 10 | margin-left: -10px; 11 | } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/css/components/_sync.scss: -------------------------------------------------------------------------------- 1 | .sync { 2 | 3 | .spinner { 4 | display: inline-block; 5 | visibility: visible; 6 | float: none; 7 | margin: 0 5px 0 0; 8 | } 9 | 10 | &-media { 11 | 12 | display: none; 13 | 14 | &-progress { 15 | display: none; 16 | 17 | &-outer { 18 | height: 20px; 19 | margin: 20px 0 10px; 20 | width: 500px; 21 | background-color: $color-light-grey; 22 | position: relative; 23 | 24 | .progress-bar { 25 | width: 0; 26 | height: 20px; 27 | background-color: $color-green; 28 | transition: width 250ms; 29 | } 30 | } 31 | 32 | &-notice { 33 | color: $color-red; 34 | } 35 | } 36 | 37 | &-resource { 38 | width: 100px; 39 | display: inline-block; 40 | } 41 | 42 | &-error { 43 | color: $color-red; 44 | } 45 | } 46 | 47 | &-count { 48 | font-weight: 700; 49 | } 50 | 51 | &-details { 52 | margin-top: 10px; 53 | } 54 | 55 | .button.stop-sync, 56 | .button.start-sync { 57 | display: none; 58 | padding: 0 16px; 59 | 60 | .dashicons { 61 | line-height: 2.2; 62 | } 63 | } 64 | 65 | .progress-text { 66 | padding: 12px 4px 12px 12px; 67 | display: inline-block; 68 | font-weight: 700; 69 | } 70 | 71 | .completed { 72 | max-width: 300px; 73 | display: none; 74 | } 75 | 76 | &-status { 77 | 78 | &-disabled { 79 | color: $color-red; 80 | } 81 | 82 | &-enabled { 83 | color: $color-green; 84 | } 85 | 86 | &-button.button { 87 | vertical-align: baseline; 88 | } 89 | } 90 | } 91 | 92 | -------------------------------------------------------------------------------- /src/css/components/_terms_order.scss: -------------------------------------------------------------------------------- 1 | .cld { 2 | 3 | &-tax { 4 | 5 | &-order { 6 | 7 | 8 | &-list { 9 | 10 | &-item { 11 | border: 1px solid #efefef; 12 | padding: 4px; 13 | margin: 0 0 -1px; 14 | background-color: $color-white; 15 | 16 | &.no-items { 17 | color: #888; 18 | text-align: center; 19 | display: none; 20 | 21 | &:last-child { 22 | display: block; 23 | } 24 | } 25 | 26 | &.ui-sortable-helper { 27 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 28 | } 29 | 30 | &-placeholder { 31 | background-color: #efefef; 32 | height: 45px; 33 | margin: 0; 34 | } 35 | 36 | &-handle { 37 | cursor: grab; 38 | margin-right: 4px; 39 | color: #999; 40 | } 41 | 42 | } 43 | 44 | &-type { 45 | display: inline-block; 46 | margin-right: 8px; 47 | 48 | input { 49 | margin-right: 4px !important; 50 | } 51 | } 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/css/components/_ui.scss: -------------------------------------------------------------------------------- 1 | .cld { 2 | @import "ui/ui-components"; 3 | @import "ui/grid"; 4 | @import "ui/page"; 5 | @import "ui/panel"; 6 | @import "ui/loading"; 7 | @import "ui/sidebar"; 8 | @import "ui/charts"; 9 | @import "ui/asset-table"; 10 | @import "ui/links"; 11 | @import "ui/tooltips"; 12 | @import "ui/notice"; 13 | @import "ui/grid"; 14 | @import "ui/media"; 15 | @import "ui/group"; 16 | @import "ui/input"; 17 | @import "ui/gallery"; 18 | @import "ui/tables"; 19 | @import "ui/modal"; 20 | @import "ui/sidebar"; 21 | @import "ui/plan"; 22 | @import "ui/wizard"; 23 | @import "ui/import"; 24 | @import "ui/sizes-preview"; 25 | @import "ui/cron"; 26 | } 27 | 28 | 29 | // Extras. 30 | .tippy-box[data-theme~="cloudinary"] { 31 | background-color: rgba(0, 0, 0, 0.8); 32 | color: $color-white; 33 | font-size: 0.8em; 34 | } 35 | 36 | #poststuff .cld-info-box h2 { 37 | padding: 0; 38 | margin: 0 0 6px; 39 | font-weight: 700; 40 | } 41 | 42 | .cloudinary-overwrite-transformations { 43 | padding: 6px 0; 44 | } 45 | -------------------------------------------------------------------------------- /src/css/components/ui/_asset-table.scss: -------------------------------------------------------------------------------- 1 | // Non-media library assets. 2 | 3 | &-pagenav { 4 | margin-top: 5px; 5 | line-height: 2.4em; 6 | color: #555; 7 | 8 | &-text { 9 | margin: 0 2em; 10 | } 11 | } 12 | 13 | &-delete { 14 | color: $color-red; 15 | cursor: pointer; 16 | float: right; 17 | } 18 | 19 | &-apply { 20 | &-action { 21 | float: right; 22 | } 23 | } 24 | 25 | &-table { 26 | thead { 27 | tr { 28 | th.cld-table-th { 29 | line-height: 1.8em; 30 | } 31 | } 32 | } 33 | 34 | } 35 | 36 | &-asset { 37 | .cld-input-on-off { 38 | display: inline-block; 39 | } 40 | 41 | .cld-input-label { 42 | display: inline-block; 43 | margin-bottom: 0; 44 | } 45 | 46 | &-edit { 47 | display: flex; 48 | align-items: flex-end; 49 | 50 | &-button.button.button-primary { 51 | padding: 3px 14px 4px; 52 | } 53 | } 54 | 55 | &-preview { 56 | &-label { 57 | font-weight: bolder; 58 | width: 100%; 59 | margin-right: 10px; 60 | } 61 | 62 | &-input { 63 | width: 100%; 64 | margin-top: 6px; 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/css/components/ui/_charts.scss: -------------------------------------------------------------------------------- 1 | // Chart & Lines styles. 2 | 3 | &-chart { 4 | &-stat { 5 | padding-bottom: 2em; 6 | 7 | canvas { 8 | max-width: 100%; 9 | max-height: 100%; 10 | } 11 | } 12 | } 13 | 14 | &-progress { 15 | &-circular { 16 | display: block; 17 | width: 160px; 18 | height: 160px; 19 | margin: 2em .5em 2em 0; 20 | position: relative; 21 | 22 | .progressbar-text { 23 | position: absolute; 24 | left: 50%; 25 | top: 50%; 26 | padding: 0; 27 | margin: 0; 28 | width: 100%; 29 | transform: translate(-50%, -50%); 30 | text-align: center; 31 | color: #222222; 32 | font-weight: bolder; 33 | text-transform: capitalize; 34 | font-size: 1em; 35 | h2 { 36 | margin: 0 0 0.15em; 37 | line-height: 1; 38 | font-size: 48px; 39 | } 40 | } 41 | } 42 | 43 | &-box { 44 | display: flex; 45 | align-items: center; 46 | justify-content: flex-start; 47 | margin: 0 0 16px; 48 | width: 100%; 49 | 50 | &-title { 51 | font-size: 15px; 52 | margin: 12px 0 16px 0; 53 | line-height: 1.4; 54 | } 55 | 56 | &-line { 57 | display: block; 58 | width: 0%; 59 | min-width: 1px; 60 | height: 5px; 61 | transition: width 2s; 62 | 63 | &-value { 64 | padding: 0 0 0 8px; 65 | font-weight: bold; 66 | width: 100px; 67 | } 68 | } 69 | } 70 | 71 | &-line { 72 | display: block; 73 | width: 100%; 74 | height: 3px; 75 | position: relative; 76 | background-color: $color-cld-grey-blue; 77 | } 78 | 79 | &-header { 80 | font-weight: bolder; 81 | 82 | &-titles { 83 | display: flex; 84 | justify-content: space-between; 85 | font-size: $size-panel-content; 86 | margin-top: 5px; 87 | 88 | &-left { 89 | color: $color-cld-blue; 90 | } 91 | 92 | &-right { 93 | color: $color-cld-grey-blue; 94 | font-weight: normal; 95 | } 96 | } 97 | } 98 | } 99 | 100 | &-line { 101 | &-stat { 102 | margin-bottom: 15px; 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/css/components/ui/_cron.scss: -------------------------------------------------------------------------------- 1 | // Cron. 2 | &-cron { 3 | @extend .cld-panel; 4 | 5 | padding-inline: 16px; 6 | padding-block: 13px; 7 | 8 | h2, h4{ 9 | margin: 0; 10 | } 11 | 12 | hr{ 13 | margin-block: 6px; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/css/components/ui/_gallery.scss: -------------------------------------------------------------------------------- 1 | // Gallery styles. 2 | &-gallery-settings { 3 | width: 100%; 4 | display: flex; 5 | flex-wrap: wrap; 6 | padding: 1rem 0; 7 | box-sizing: border-box; 8 | 9 | @media only screen and (min-width: $size-medium) { 10 | margin-left: -1rem; 11 | margin-right: -1rem; 12 | } 13 | 14 | &__column { 15 | box-sizing: border-box; 16 | width: 100%; 17 | 18 | @media only screen and (min-width: $size-medium) { 19 | padding-left: 1rem; 20 | padding-right: 1rem; 21 | width: 50%; 22 | } 23 | } 24 | 25 | .components-color-palette__custom-color-button { 26 | border: none; 27 | border-radius: 2px 2px 0 0; 28 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); 29 | box-sizing: border-box; 30 | cursor: pointer; 31 | height: 64px; 32 | outline: 1px solid transparent; 33 | position: relative; 34 | width: 100%; 35 | } 36 | 37 | .components-color-palette__custom-color-text-wrapper { 38 | border-radius: 0 0 2px 2px; 39 | box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .2), inset 1px 0 0 0 rgba(0, 0, 0, .2), inset -1px 0 0 0 rgba(0, 0, 0, .2); 40 | font-size: 13px; 41 | padding: 12px 16px; 42 | position: relative; 43 | } 44 | } 45 | 46 | @at-root { 47 | .components-base-control__field select { 48 | display: block; 49 | margin: 1rem 0; 50 | } 51 | 52 | .components-range-control__wrapper { 53 | margin: 0 !important; 54 | } 55 | 56 | .components-range-control__root { 57 | flex-direction: row-reverse; 58 | margin: 1rem 0; 59 | } 60 | 61 | .components-input-control.components-number-control.components-range-control__number { 62 | margin-left: 0 !important; 63 | margin-right: 16px; 64 | } 65 | 66 | .components-panel { 67 | border: 0 !important; 68 | } 69 | 70 | .components-panel__body:first-child { 71 | border-top: 0 !important; 72 | } 73 | 74 | .components-panel__body:last-child { 75 | border-bottom: 0 !important; 76 | } 77 | 78 | .components-textarea-control__input { 79 | display: block; 80 | width: 100%; 81 | margin: 0.5rem 0; 82 | } 83 | 84 | .components-popover:not(.is-without-arrow):after, 85 | .components-popover:not(.is-without-arrow):before { 86 | content: none; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/css/components/ui/_grid.scss: -------------------------------------------------------------------------------- 1 | // Grid : rows and columns. 2 | &-row { 3 | margin: 0; 4 | clear: both; 5 | display: flex; 6 | 7 | &.align { 8 | &-center { 9 | align-items: center; 10 | } 11 | } 12 | 13 | @media only screen and (max-width: $size-small) { 14 | flex-direction: column-reverse; 15 | } 16 | } 17 | 18 | &-column { 19 | width: 100%; 20 | box-sizing: border-box; 21 | padding: 0 0 0 $size-padding-column; 22 | 23 | &.column-min-w-50, 24 | &.column-video_settings { 25 | min-width: 50%; 26 | } 27 | 28 | @media only screen and (min-width: $size-small) { 29 | 30 | &.column-45 { 31 | width: 45%; 32 | } 33 | 34 | &.column-55 { 35 | width: 55%; 36 | } 37 | 38 | &:last-child{ 39 | padding-right: $size-padding-column; 40 | } 41 | } 42 | @media only screen and (max-width: $size-small) { 43 | min-width: 100%; 44 | .cld-info-text { 45 | text-align: center; 46 | } 47 | } 48 | @media only screen and (max-width: $size-large) { 49 | &.tabbed-content { 50 | display: none; 51 | 52 | &.is-active { 53 | display: block; 54 | } 55 | } 56 | 57 | } 58 | & &{ 59 | padding: 0; 60 | margin-right: 16px; 61 | &:last-child{ 62 | margin-left: auto; 63 | margin-right: 0; 64 | } 65 | } 66 | } 67 | 68 | &-center { 69 | &-column { 70 | &.cld-info-text { 71 | padding-left: 2em; 72 | font-weight: bolder; 73 | font-size: $size-panel-title; 74 | 75 | .description { 76 | font-size: $size-panel-subtitle; 77 | padding-top: 8px; 78 | } 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/css/components/ui/_group.scss: -------------------------------------------------------------------------------- 1 | // Group component. 2 | &-group { 3 | 4 | .cld-group .cld-group { 5 | padding-left: 4px; 6 | } 7 | 8 | .cld-group .cld-group hr { 9 | display: none; 10 | } 11 | 12 | &-heading { 13 | display: flex; 14 | justify-content: space-between; 15 | 16 | h3 { 17 | font-size: 0.9rem; 18 | 19 | .description { 20 | font-size: 0.7rem; 21 | margin-left: 0.7em; 22 | font-weight: normal; 23 | } 24 | } 25 | } 26 | 27 | .cld-ui-title-head { 28 | margin-bottom: 1em; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/css/components/ui/_import.scss: -------------------------------------------------------------------------------- 1 | &-import { 2 | width: 200px; 3 | height: 100%; 4 | position: absolute; 5 | display: none; 6 | right: 0; 7 | padding: 0 10px; 8 | 9 | &-item { 10 | 11 | margin-top: 10px; 12 | opacity: 0; 13 | transition: opacity 0.5s; 14 | white-space: nowrap; 15 | min-height: 20px; 16 | display: flex; 17 | align-items: center; 18 | 19 | .spinner { 20 | visibility: visible; 21 | margin: 0 6px 0 0; 22 | width: 24px; 23 | } 24 | 25 | &-id { 26 | text-overflow: ellipsis; 27 | overflow: hidden; 28 | display: block; 29 | } 30 | } 31 | 32 | &-process { 33 | visibility: visible; 34 | background-color: #fff; 35 | padding: 5px; 36 | float: none; 37 | opacity: 1; 38 | background-position: center; 39 | border-radius: 40px; 40 | } 41 | } 42 | 43 | @at-root .media-library { 44 | transition: margin-right 0.2s; 45 | margin-right: 0px; 46 | } 47 | -------------------------------------------------------------------------------- /src/css/components/ui/_input.scss: -------------------------------------------------------------------------------- 1 | // Inputs for forms etc. 2 | @mixin input { 3 | margin: 0 0 23px; 4 | display: block; 5 | max-width: $size-settings-max-width; 6 | &-label { 7 | .cld-ui-title { 8 | font-size: $size-setting-label; 9 | font-weight: 700; 10 | } 11 | 12 | display: block; 13 | margin-bottom: 8px; 14 | 15 | &-link { 16 | font-size: $size-panel-description; 17 | margin-left: 8px; 18 | color: $color-cld-blue; 19 | 20 | &:hover { 21 | color: $color-cld-dark-blue; 22 | } 23 | } 24 | } 25 | &-radio-label{ 26 | display: block; 27 | 28 | &:not(:first-of-type) { 29 | padding-top: 8px; 30 | } 31 | } 32 | } 33 | 34 | &-input { 35 | @include input; 36 | 37 | @import "controls/text"; 38 | @import "controls/select"; 39 | @import "controls/on-off"; 40 | @import "controls/icon-toggle"; 41 | @import "controls/excluded_types"; 42 | @import "controls/input-tags"; 43 | 44 | .prefixed { 45 | width: 40%; 46 | margin-left: 6px; 47 | } 48 | 49 | .suffixed { 50 | width: 40%; 51 | margin-right: 6px; 52 | } 53 | 54 | input::placeholder{ 55 | color: $color-disabled-grey; 56 | } 57 | 58 | .hidden{ 59 | visibility: hidden; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/css/components/ui/_links.scss: -------------------------------------------------------------------------------- 1 | // Links - button styled. 2 | 3 | &-link { 4 | &-button { 5 | background-color: $color-cld-blue; 6 | color: #fff; 7 | text-decoration: none; 8 | padding: 5px 14px; 9 | border-radius: 4px; 10 | font-weight: bold; 11 | font-size: $size-button; 12 | margin: 0; 13 | display: inline-block; 14 | 15 | &:hover, &:focus { 16 | color: #fff; 17 | text-decoration: none; 18 | } 19 | 20 | &.hidden { 21 | display: none; 22 | } 23 | 24 | &-secondary { 25 | background-color: $color-cld-grey-blue; 26 | color: $color-cld-dark-description; 27 | border: 1px solid $color-cld-blue; 28 | 29 | &:hover, &:focus { 30 | background-color: $color-cld-blue; 31 | } 32 | 33 | &-error { 34 | border-color: $color-red; 35 | 36 | &:hover, &:focus { 37 | background-color: $color-red; 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/css/components/ui/_media.scss: -------------------------------------------------------------------------------- 1 | // Media styles : Images, breakpoints ,and videos previews 2 | &-image, 3 | &-video, 4 | &-breakpoints, 5 | &-lazyload{ 6 | 7 | 8 | &-preview { 9 | padding: 9px; 10 | border-radius: 4px; 11 | border: 1px solid $color-cld-grey-blue; 12 | 13 | &-wrapper { 14 | position: relative; 15 | } 16 | 17 | .cld-ui-title { 18 | margin: 5px 0 12px 0; 19 | font-weight: bold; 20 | } 21 | 22 | img { 23 | width: 100%; 24 | height: 100%; 25 | border-radius: 4px; 26 | } 27 | } 28 | } 29 | 30 | &.cld-ui-preview { 31 | max-width: 322px; 32 | } 33 | 34 | &-breakpoints, &-lazyload { 35 | &-preview { 36 | .cld-image-preview-wrapper:hover{ 37 | .preview-image { 38 | opacity: 0; 39 | } 40 | .main-image{ 41 | opacity: 1; 42 | img, span{ 43 | opacity: 0.4; 44 | } 45 | 46 | } 47 | } 48 | .preview-image { 49 | display: flex; 50 | border-radius: 4px; 51 | position: absolute; 52 | left: 0; 53 | bottom: 0; 54 | background-color: #222222; 55 | box-shadow: 2px -2px 3px rgb(0 0 0 / 90%); 56 | &:hover{ 57 | opacity: 1 !important; 58 | img, span{ 59 | opacity: 1 !important; 60 | } 61 | } 62 | &.main-image{ 63 | position: relative; 64 | box-shadow: none; 65 | } 66 | } 67 | 68 | .preview-text { 69 | color: $color-white; 70 | text-shadow: 0 0 3px black; 71 | background-color: $color-cld-blue; 72 | position: absolute; 73 | top: 0; 74 | right: 0; 75 | padding: 3px; 76 | } 77 | 78 | .global-transformations-url-link:hover{ 79 | text-decoration: none; 80 | color: $color-white; 81 | } 82 | } 83 | } 84 | &-lazyload{ 85 | &-preview { 86 | .progress-bar{ 87 | height: 2px; 88 | width: 0%; 89 | background-color: $color-cld-blue; 90 | transition: width 1s; 91 | } 92 | .preview-image { 93 | background-color: $color-white; 94 | } 95 | img{ 96 | transition: opacity 1s; 97 | } 98 | .global-transformations-url-link { 99 | background-color: transparent; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/css/components/ui/_notice.scss: -------------------------------------------------------------------------------- 1 | // Notices and alerts. 2 | &-notice-box { 3 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); 4 | position: relative; 5 | margin-right: 20px; 6 | margin-bottom: 12px; 7 | 8 | .cld-notice { 9 | padding: 1rem 2.2rem 0.75rem 1.2rem; 10 | 11 | img.cld-ui-icon { 12 | height: 100%; 13 | } 14 | } 15 | 16 | &.is-dismissible { 17 | padding-right: 38px; 18 | } 19 | 20 | &.has-icon { 21 | padding-left: 38px; 22 | } 23 | 24 | &.is-success, 25 | &.is-updated, 26 | &.is-created { 27 | background-color: #ebf5ec; 28 | border-left: 4px solid #42ad4f; 29 | 30 | .dashicons { 31 | color: $color-success; 32 | } 33 | } 34 | 35 | &.is-error { 36 | background-color: #f8e8e7; 37 | border-left: 4px solid #cb3435; 38 | 39 | .dashicons { 40 | color: $color-red; 41 | } 42 | } 43 | 44 | &.is-warning { 45 | background-color: #fff7e5; 46 | border-left: 4px solid #f2ad4c; 47 | 48 | .dashicons { 49 | color: $color-orange; 50 | } 51 | } 52 | 53 | &.is-info { 54 | background-color: #e4f4f8; 55 | border-left: 4px solid #2a95c3; 56 | 57 | .dashicons { 58 | color: $color-wp-blue; 59 | } 60 | } 61 | 62 | &.is-neutral { 63 | background-color: $color-white; 64 | border-left: 4px solid #ccd0d4; 65 | 66 | .dashicons { 67 | color: $color-disabled-grey; 68 | } 69 | } 70 | 71 | &.dismissed { 72 | overflow: hidden; 73 | transition: height 0.3s ease-out; 74 | } 75 | 76 | .dashicons, 77 | .cld-ui-icon { 78 | position: absolute; 79 | top: 14px; 80 | left: 19px; 81 | } 82 | } 83 | 84 | &-connection { 85 | &-box { 86 | display: flex; 87 | max-width: 500px; 88 | background-color: #303a47; 89 | color: $color-white; 90 | padding: 20px 17px; 91 | border-radius: 4px; 92 | align-items: center; 93 | justify-content: space-around; 94 | 95 | h3 { 96 | color: $color-white; 97 | margin: 0 0 5px; 98 | } 99 | 100 | span { 101 | padding: 0 12px 0 0; 102 | display: inline-block; 103 | } 104 | 105 | .dashicons{ 106 | width: 30px; 107 | height: 30px; 108 | font-size: 30px; 109 | margin: 0; 110 | padding: 0; 111 | } 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /src/css/components/ui/_page.scss: -------------------------------------------------------------------------------- 1 | // Main page. Headers/Footers. 2 | &-settings { 3 | margin-left: -20px; 4 | } 5 | 6 | &-page { 7 | @import "tabs"; 8 | 9 | &-header { 10 | background-color: $color-cld-blue; 11 | display: flex; 12 | padding: 16px; 13 | align-items: center; 14 | margin-bottom: 0; 15 | justify-content: space-between; 16 | flex-direction: column; 17 | 18 | @media only screen and (min-width: $size-small) { 19 | flex-direction: initial; 20 | } 21 | 22 | img { 23 | width: 150px; 24 | } 25 | 26 | &-button { 27 | background-color: $color-cld-dark-blue; 28 | color: #fff; 29 | text-decoration: none; 30 | padding: 5px 14px; 31 | border-radius: 4px; 32 | font-weight: bold; 33 | margin: 1em 0 0 9px; 34 | display: inline-block; 35 | 36 | @media only screen and (min-width: $size-small) { 37 | margin-top: 0; 38 | } 39 | 40 | &:hover, &:focus { 41 | color: #fff; 42 | text-decoration: none; 43 | } 44 | } 45 | 46 | &-logo { 47 | display: flex; 48 | align-items: center; 49 | .version{ 50 | margin-left: 12px; 51 | color: $color-white; 52 | font-size: 10px; 53 | } 54 | } 55 | 56 | p { 57 | font-size: $size-button; 58 | margin: 0; 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/css/components/ui/_plan.scss: -------------------------------------------------------------------------------- 1 | // Plan. 2 | &-plan { 3 | display: flex; 4 | flex-wrap: wrap; 5 | &-item{ 6 | display: flex; 7 | width: 33%; 8 | margin-bottom: 25px; 9 | img{ 10 | width: 24px; 11 | margin-right: 12px; 12 | } 13 | 14 | .description{ 15 | font-size: $size-panel-description; 16 | } 17 | .cld-title{ 18 | font-size: $size-sidebar-title; 19 | font-weight: bold; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/css/components/ui/_sidebar.scss: -------------------------------------------------------------------------------- 1 | // Sidebar. 2 | &-optimisation { 3 | &:first-child { 4 | margin-top: 7px; 5 | } 6 | 7 | font-size: $size-panel-description; 8 | line-height: 2; 9 | display: flex; 10 | justify-content: space-between; 11 | 12 | &-item { 13 | color: $color-cld-blue; 14 | font-weight: 600; 15 | 16 | &:hover { 17 | color: $color-cld-dark-blue; 18 | } 19 | 20 | &-active, 21 | &-not-active { 22 | font-size: $size-panel-small; 23 | font-weight: bold; 24 | 25 | .dashicons { 26 | line-height: 2; 27 | font-size: $size-panel-content; 28 | } 29 | } 30 | 31 | &-active { 32 | color: $color-success; 33 | } 34 | 35 | &-not-active { 36 | color: $color-cld-grey-blue; 37 | } 38 | } 39 | } 40 | 41 | &-ui-sidebar { 42 | width: 100%; 43 | 44 | @media only screen and (min-width: $size-small) { 45 | width: auto; 46 | min-width: 400px; 47 | max-width: 500px; 48 | } 49 | 50 | .cld-panel { 51 | padding: $size-padding-sidebar; 52 | } 53 | 54 | .cld-ui-header { 55 | margin-top: -1px; 56 | padding: $size-padding-sidebar-title; 57 | } 58 | 59 | .cld-ui-header:first-child { 60 | margin-top: 13px; 61 | } 62 | 63 | .cld-ui-title { 64 | h2 { 65 | font-size: $size-sidebar-title; 66 | } 67 | } 68 | 69 | .cld-info-box { 70 | border: 0; 71 | margin: 0; 72 | padding: 0; 73 | align-items: flex-start; 74 | 75 | .cld-ui-body { 76 | padding-top: 0; 77 | } 78 | 79 | .button { 80 | align-self: flex-start; 81 | line-height: inherit; 82 | opacity: 0.5; 83 | cursor: default; 84 | } 85 | } 86 | 87 | .cld-info-icon { 88 | background-color: transparent; 89 | 90 | img { 91 | width: 40px; 92 | } 93 | } 94 | 95 | .extension-item { 96 | border-radius: 0; 97 | margin-bottom: 18px; 98 | border-bottom: 1px solid $color-light-grey; 99 | &:last-of-type{ 100 | border-bottom: none; 101 | margin-bottom: 0; 102 | } 103 | } 104 | 105 | .cld-ui-wrap { 106 | .closed { 107 | visibility: hidden; 108 | max-height: 0; 109 | padding: 0 !important; 110 | border: none; 111 | display: flex; 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/css/components/ui/_sizes-preview.scss: -------------------------------------------------------------------------------- 1 | &-sizes-preview { 2 | display: flex; 3 | 4 | .image-item { 5 | width: 100%; 6 | display: none; 7 | 8 | img { 9 | max-width: 100%; 10 | } 11 | 12 | &.show { 13 | display: flex; 14 | align-content: space-between; 15 | flex-direction: column; 16 | justify-content: space-around; 17 | } 18 | } 19 | 20 | .image-items { 21 | width: 100%; 22 | background-color: $color-light-grey; 23 | display: flex; 24 | padding: 18px; 25 | } 26 | 27 | .image-preview-box { 28 | height: 100%; 29 | width: 100%; 30 | background-position: center center; 31 | background-repeat: no-repeat; 32 | background-size: contain; 33 | border-radius: 6px; 34 | background-color: $color-disabled-grey; 35 | } 36 | 37 | input { 38 | margin-top: 6px; 39 | color: $color-green; 40 | 41 | &.invalid { 42 | border-color: $color-red; 43 | color: $color-red; 44 | } 45 | } 46 | } 47 | 48 | &-crops { 49 | border-bottom: 1px solid $color-light-grey; 50 | padding-bottom: 6px; 51 | margin-bottom: 6px; 52 | } 53 | 54 | &-size-items { 55 | 56 | &-item { 57 | display: flex; 58 | flex-direction: column; 59 | padding: 8px; 60 | border: 1px solid $color-light-grey; 61 | margin-bottom: -1px; 62 | 63 | .cld-ui-suffix { 64 | width: 50%; 65 | text-overflow: ellipsis; 66 | overflow: hidden; 67 | } 68 | 69 | img { 70 | max-width: 100%; 71 | object-fit: scale-down; 72 | margin-bottom: 8px; 73 | } 74 | } 75 | 76 | .crop-size-inputs{ 77 | display: flex; 78 | align-items: center; 79 | gap: 10px; 80 | } 81 | 82 | .cld-ui-input.regular-text[disabled]{ 83 | background-color: $color-light-grey; 84 | opacity: 0.5; 85 | } 86 | 87 | } 88 | 89 | &-image-selector { 90 | display: flex; 91 | 92 | &-item { 93 | border: 1px solid $color-light-grey; 94 | padding: 3px 6px; 95 | margin: 0 3px -1px 0; 96 | cursor: pointer; 97 | 98 | &[data-selected] { 99 | background-color: $color-light-grey; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/css/components/ui/_tabs.scss: -------------------------------------------------------------------------------- 1 | // Tabs. 2 | &-tabs { 3 | background-color: #fff; 4 | display: none; 5 | border-bottom: 1px solid #e5e5e5; 6 | padding: 0 !important; 7 | margin: -20px -18px 20px; 8 | justify-content: center; 9 | flex-wrap: nowrap; 10 | @media only screen and (max-width: $size-large) { 11 | display: flex; 12 | } 13 | 14 | &-tab { 15 | 16 | list-style: none; 17 | text-indent: 0; 18 | margin-bottom: 0; 19 | width: 100%; 20 | 21 | button { 22 | display: block; 23 | padding: 1rem 2rem; 24 | font-weight: 500; 25 | color: #000001; 26 | text-align: center; 27 | white-space: nowrap; 28 | width: 100%; 29 | background: transparent; 30 | border: 0; 31 | cursor: pointer; 32 | 33 | &.is-active { 34 | color: $color-cld-blue; 35 | border-bottom: 2px solid $color-cld-blue; 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/css/components/ui/_tooltips.scss: -------------------------------------------------------------------------------- 1 | // Tooltips. 2 | &-tooltip { 3 | color: #999; 4 | font-size: $size-panel-content; 5 | line-height: 1.3em; 6 | margin: 8px 0; 7 | 8 | .selected { 9 | color: $color-cld-dark-description; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/css/components/ui/_wizard.scss: -------------------------------------------------------------------------------- 1 | // Wizard. 2 | 3 | &-wizard { 4 | @import "wizard/tabs"; 5 | @import "wizard/intro"; 6 | @import "wizard/connect"; 7 | @import "wizard/optimize"; 8 | @import "wizard/complete"; 9 | 10 | max-width: 1100px; 11 | margin-right: auto; 12 | margin-left: auto; 13 | 14 | // overrides. 15 | .cld-panel-heading { 16 | align-items: center; 17 | } 18 | .cld-ui-title{ 19 | text-transform: initial; 20 | } 21 | .cld-submit { 22 | 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | 27 | .button { 28 | margin-left: 10px; 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/css/components/ui/controls/_excluded_types.scss: -------------------------------------------------------------------------------- 1 | // excluded types. 2 | &-excluded-types { 3 | div{ 4 | display: flex; 5 | } 6 | .type{ 7 | display: flex; 8 | border: 1px solid $color-cld-grey-blue; 9 | padding: 3px 6px; 10 | border-radius: 20px; 11 | min-width: 50px; 12 | margin-right: 8px; 13 | justify-content: space-between; 14 | } 15 | .dashicons{ 16 | cursor: pointer; 17 | &:hover{ 18 | color: $color-red; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/css/components/ui/controls/_icon-toggle.scss: -------------------------------------------------------------------------------- 1 | // Icon toggle. 2 | &-icon-toggle { 3 | display: inline-flex; 4 | align-items: center; 5 | 6 | .description { 7 | margin: 0; 8 | margin-left: 0.4rem; 9 | 10 | &.left { 11 | margin-left: 0; 12 | margin-right: 0.4rem; 13 | } 14 | } 15 | 16 | &-control { 17 | position: relative; 18 | display: inline-block; 19 | 20 | input { 21 | position: absolute; 22 | opacity: 0; 23 | width: 0; 24 | height: 0; 25 | } 26 | 27 | &-slider { 28 | .icon-on { 29 | display: none; 30 | visibility: hidden; 31 | 32 | input:checked + & { 33 | display: inline-block; 34 | visibility: visible; 35 | } 36 | } 37 | 38 | .icon-off { 39 | 40 | display: inline-block; 41 | visibility: visible; 42 | 43 | input:checked + & { 44 | display: none; 45 | visibility: hidden; 46 | } 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/css/components/ui/controls/_input-tags.scss: -------------------------------------------------------------------------------- 1 | // Input tags 2 | &-tags { 3 | 4 | align-items: center; 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: flex-start; 8 | margin: 5px 0 0 0; 9 | border: 1px solid #d0d0d0; 10 | padding: 2px 6px; 11 | border-radius: 3px; 12 | 13 | &-item { 14 | border: 1px solid $color-cld-grey-blue; 15 | padding: 3px 4px 3px 8px; 16 | border-radius: 14px; 17 | margin: 5px 6px 5px 0; 18 | display: inline-flex; 19 | justify-content: space-between; 20 | box-shadow: -25px 0px 0px $color-cld-grey-blue inset; 21 | opacity: 1; 22 | transition: opacity 0.25s, width 0.5s, margin 0.25s, padding 0.25s; 23 | overflow: hidden; 24 | 25 | &-text { 26 | margin-right: 8px; 27 | } 28 | 29 | &-delete { 30 | cursor: pointer; 31 | color: $color-disabled-grey; 32 | 33 | &:hover { 34 | color: $color-cld-blue; 35 | } 36 | } 37 | 38 | @keyframes pulse-animation { 39 | 0% { 40 | box-shadow: -25px 0px 0px $color-cld-grey-blue inset, 0 0 0 0px rgba(255, 0, 0, 0); 41 | } 42 | 60% { 43 | box-shadow: -25px 0px 0px $color-cld-grey-blue inset, 0 0 0 3px rgba(255, 0, 0, 1); 44 | } 45 | 100% { 46 | box-shadow: -25px 0px 0px $color-cld-grey-blue inset, 0 0 0 3px rgba(255, 0, 0, 0); 47 | } 48 | } 49 | 50 | &.pulse { 51 | animation: pulse-animation 0.5s infinite; 52 | } 53 | 54 | 55 | } 56 | 57 | &-input { 58 | opacity: 0.4; 59 | overflow: visible; 60 | white-space: nowrap; 61 | min-width: 100px; 62 | padding: 10px 0; 63 | display: inline-block; 64 | 65 | &:focus-visible { 66 | outline: none; 67 | padding: 10px; 68 | opacity: 1; 69 | } 70 | 71 | @keyframes pulse-animation { 72 | 0% { 73 | color: rgba(255, 0, 0, 0); 74 | } 75 | 50% { 76 | color: rgba(255, 0, 0, 1); 77 | } 78 | 100% { 79 | color: rgba(255, 0, 0, 0); 80 | } 81 | } 82 | 83 | &.pulse { 84 | animation: pulse-animation 0.5s infinite; 85 | } 86 | } 87 | 88 | } 89 | 90 | -------------------------------------------------------------------------------- /src/css/components/ui/controls/_radio-checkbox.scss: -------------------------------------------------------------------------------- 1 | // Radio and Checkboxes. 2 | 3 | &-radio, 4 | &-checkbox { 5 | 6 | &-label { 7 | display: block; 8 | margin-bottom: 0.4rem; 9 | 10 | &.list-inline { 11 | display: inline-block; 12 | margin-right: 0.4rem; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/css/components/ui/controls/_select.scss: -------------------------------------------------------------------------------- 1 | // Selects. 2 | .regular-select { 3 | display: inline; 4 | appearance: none; 5 | min-width: 150px; 6 | border: 1px solid #d0d0d0; 7 | border-radius: 3px; 8 | padding: 2px 30px 2px 6px; 9 | font-size: $size-setting-field; 10 | font-weight: 600; 11 | } 12 | -------------------------------------------------------------------------------- /src/css/components/ui/controls/_text.scss: -------------------------------------------------------------------------------- 1 | // Text : Number : Textarea. 2 | .regular-text, 3 | .regular-number { 4 | border: 1px solid #d0d0d0; 5 | border-radius: 3px; 6 | padding: 0.1rem 0.5rem; 7 | width: 100%; 8 | font-size: $size-setting-field; 9 | 10 | } 11 | 12 | .regular-text-small, 13 | .regular-number-small { 14 | width: 40%; 15 | } 16 | 17 | .regular-number { 18 | width: 100px; 19 | } 20 | -------------------------------------------------------------------------------- /src/css/components/ui/panels/_infobox.scss: -------------------------------------------------------------------------------- 1 | // Infobox. 2 | 3 | &-info-box { 4 | @extend .cld-panel; 5 | display: flex; 6 | padding: 0; 7 | margin: 0 0 19px; 8 | border-radius: 4px; 9 | align-items: stretch; 10 | max-width: 500px; 11 | 12 | @media only screen and (min-width: $size-small) { 13 | flex-direction: row; 14 | } 15 | 16 | .cld-ui-title { 17 | h2 { 18 | margin: 0 0 6px; 19 | font-size: $size-panel-title; 20 | } 21 | } 22 | 23 | .cld-info-icon { 24 | background-color: $color-cld-light-grey; 25 | display: flex; 26 | width: 49px; 27 | text-align: center; 28 | vertical-align: center; 29 | justify-content: center; 30 | border-radius: 4px 0 0 4px; 31 | 32 | img{ 33 | width: 24px; 34 | } 35 | } 36 | 37 | img, 38 | a.button { 39 | align-self: center; 40 | } 41 | 42 | .cld-ui-body { 43 | line-height: normal; 44 | margin: 0 auto; 45 | padding: 12px 9px; 46 | display: inline-block; 47 | width: 100%; 48 | font-size: $size-panel-content; 49 | } 50 | 51 | &-text{ 52 | color: $color-cld-description; 53 | font-size: $size-panel-description; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/css/components/ui/panels/_optimize.scss: -------------------------------------------------------------------------------- 1 | &-stat { 2 | &-percent { 3 | display: flex; 4 | align-items: center; 5 | justify-content: flex-start; 6 | line-height: 1; 7 | 8 | h2 { 9 | font-size: 48px; 10 | margin: 0 12px 0 0; 11 | color: #54c8db; 12 | } 13 | 14 | &-text { 15 | font-weight: bold; 16 | } 17 | } 18 | 19 | &-legend { 20 | display: flex; 21 | min-width: 200px; 22 | margin: 0 0 16px 12px; 23 | font-weight: bold; 24 | &-dot { 25 | display: inline-block; 26 | width: 20px; 27 | height: 20px; 28 | border-radius: 50%; 29 | margin-right: 6px; 30 | &.blue-dot{ 31 | background-color: #2e49cd; 32 | } 33 | &.aqua-dot{ 34 | background-color: #54c8db; 35 | } 36 | &.red-dot{ 37 | background-color: #e12600; 38 | } 39 | } 40 | } 41 | 42 | &-text { 43 | font-weight: bold; 44 | margin: .75em 0; 45 | 46 | &.cld-link-button { 47 | margin: .75em 0; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/css/components/ui/panels/_panel-short.scss: -------------------------------------------------------------------------------- 1 | // Panel short 2 | 3 | &-panel-short { 4 | @extend .cld-panel; 5 | min-width: 270px; 6 | width: auto; 7 | display: inline-block; 8 | } 9 | -------------------------------------------------------------------------------- /src/css/components/ui/panels/_submit-switch-cloud.scss: -------------------------------------------------------------------------------- 1 | // Submit panel & Switch Cloud. 2 | 3 | &-submit, 4 | &-switch-cloud { 5 | background-color: #fff; 6 | border: 1px solid $color-cld-grey-blue; 7 | border-top: 0; 8 | padding: 1.2rem 1.75rem; 9 | } 10 | 11 | &-panel.closed + &-submit, 12 | &-panel.closed + &-switch-cloud{ 13 | display: none; 14 | } 15 | 16 | &-panel.closed + &-submit, 17 | &-panel.closed + &-switch-cloud{ 18 | display: none; 19 | } 20 | -------------------------------------------------------------------------------- /src/css/components/ui/wizard/_complete.scss: -------------------------------------------------------------------------------- 1 | 2 | &-complete { 3 | 4 | background-image: url("images/confetti.png"); 5 | background-position: 50%; 6 | background-repeat: no-repeat; 7 | background-size: cover; 8 | padding: 98px; 9 | text-align: center; 10 | margin: -23px; 11 | 12 | &.hidden { 13 | display: none; 14 | } 15 | 16 | &.active { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | flex-direction: column; 21 | margin: -23px -24px; 22 | text-align: center; 23 | 24 | * { 25 | max-width: 450px; 26 | } 27 | } 28 | 29 | &-icons { 30 | display: flex; 31 | justify-content: center; 32 | 33 | img { 34 | width: 70px; 35 | margin: 30px 10px;; 36 | } 37 | 38 | .dashicons { 39 | font-size: 50px; 40 | line-height: 1.4; 41 | width: 70px; 42 | height: 70px; 43 | border: 4px solid $color-white; 44 | border-radius: 6px; 45 | background-color: $color-grey-background; 46 | box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3); 47 | 48 | } 49 | 50 | .dashicons-cloudinary { 51 | font-size: 65px; 52 | line-height: 0.9; 53 | color: $color-cld-blue; 54 | } 55 | } 56 | 57 | .cld-ui-title { 58 | margin-top: 30px; 59 | 60 | h3 { 61 | font-size: $size-sidebar-title; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/css/components/ui/wizard/_connect.scss: -------------------------------------------------------------------------------- 1 | 2 | &-connect { 3 | &-connection { 4 | display: flex; 5 | flex-direction: row; 6 | justify-content: flex-start; 7 | align-items: flex-end; 8 | 9 | &-input { 10 | width: 725px; 11 | margin-right: 10px; 12 | margin-top: 20px; 13 | 14 | input { 15 | max-width: 100%; 16 | width: 100%; 17 | } 18 | } 19 | } 20 | 21 | &-status { 22 | display: none; 23 | align-items: center; 24 | justify-content: space-between; 25 | padding: 5px 11px; 26 | border-radius: 14px; 27 | font-weight: bold; 28 | margin-inline-start: 1em; 29 | 30 | &.active { 31 | display: inline-flex; 32 | } 33 | 34 | &.success { 35 | background-color: #ccefc9; 36 | color: $color-success; 37 | } 38 | 39 | &.error { 40 | background-color: #f9cecd; 41 | color: $color-red; 42 | } 43 | 44 | &.working { 45 | background-color: $color-cld-light-grey; 46 | color: $color-cld-dark-blue; 47 | padding: 5px; 48 | .spinner{ 49 | visibility: visible; 50 | margin: 0; 51 | } 52 | } 53 | } 54 | 55 | &-help { 56 | margin-top: 50px; 57 | } 58 | 59 | &-help-image { 60 | border: 1px solid $color-cld-grey-blue; 61 | box-shadow: 0 0 1em 1em rgba(0, 0, 0, .05); 62 | margin: 2em; 63 | padding: 1em; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/css/components/ui/wizard/_intro.scss: -------------------------------------------------------------------------------- 1 | &-intro { 2 | text-align: center; 3 | 4 | &-welcome { 5 | width: 645px; 6 | border: 2px solid #c6d1db; 7 | margin: 27px auto; 8 | border-radius: 4px; 9 | padding: 19px; 10 | box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3); 11 | 12 | img { 13 | width: 100%; 14 | } 15 | 16 | &-info { 17 | display: flex; 18 | text-align: left; 19 | background-color: #323a45; 20 | color: $color-white; 21 | font-size: $size-panel-content; 22 | padding: 15px; 23 | margin: 0 -19px -19px; 24 | border-radius: 0 0 4px 4px; 25 | 26 | img { 27 | width: 25px; 28 | margin-right: 12px; 29 | } 30 | 31 | h2 { 32 | font-size: $size-sidebar-title; 33 | color: $color-white; 34 | } 35 | } 36 | } 37 | 38 | } 39 | -------------------------------------------------------------------------------- /src/css/components/ui/wizard/_optimize.scss: -------------------------------------------------------------------------------- 1 | &-lock { 2 | display: flex; 3 | cursor: pointer; 4 | &.hidden{ 5 | display: none; 6 | width:0; 7 | height: 0; 8 | } 9 | .dashicons { 10 | font-size: 25px; 11 | line-height: 0.7; 12 | margin-right: 10px; 13 | color: $color-cld-blue; 14 | } 15 | } 16 | &-optimize { 17 | &-settings { 18 | &.disabled { 19 | opacity: 0.4; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/css/components/ui/wizard/_tabs.scss: -------------------------------------------------------------------------------- 1 | &-tabs { 2 | width: 50%; 3 | display: flex; 4 | flex-direction: row; 5 | font-size: $size-panel-title; 6 | font-weight: 600; 7 | 8 | &-tab { 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | position: relative; 13 | width: 33%; 14 | 15 | &-count { 16 | width: 32px; 17 | height: 32px; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | background-color: $color-cld-blue-faded; 22 | border-radius: 50%; 23 | border: 2px solid transparent; 24 | 25 | .active & { 26 | border: 2px solid $color-cld-blue; 27 | } 28 | 29 | .complete & { 30 | background-color: $color-success; 31 | color: $color-success; 32 | 33 | &:before { 34 | content: "\f147"; 35 | font-family: dashicons; 36 | font-size: 30px; 37 | color: $color-white; 38 | width: 25px; 39 | } 40 | } 41 | } 42 | 43 | &.active { 44 | color: $color-cld-blue; 45 | } 46 | 47 | &:after { 48 | position: absolute; 49 | content: ""; 50 | border: 1px solid $color-cld-blue-faded; 51 | top: 16px; 52 | left: 75%; 53 | width: 50%; 54 | } 55 | 56 | &.complete { 57 | &:after { 58 | border-color: $color-success; 59 | } 60 | } 61 | 62 | &:last-child:after { 63 | display: none; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/css/fonts/cloudinary.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/fonts/cloudinary.eot -------------------------------------------------------------------------------- /src/css/fonts/cloudinary.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/fonts/cloudinary.ttf -------------------------------------------------------------------------------- /src/css/fonts/cloudinary.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/fonts/cloudinary.woff -------------------------------------------------------------------------------- /src/css/front-overlay.scss: -------------------------------------------------------------------------------- 1 | // Vars 2 | @import "variables"; 3 | 4 | .overlay-tag { 5 | font-size: 0.8rem; 6 | position: absolute; 7 | padding: 10px; 8 | border-radius: 0 0 4px 0; 9 | color: #fff; 10 | text-align: right; 11 | z-index: 9999; 12 | 13 | &.wp-tag { 14 | background-color: $color-red; 15 | } 16 | 17 | &.cld-tag { 18 | background-color: $color-cld-blue; 19 | } 20 | } 21 | 22 | [data-tippy-root]{ 23 | .tippy-box{ 24 | max-width: initial !important; 25 | } 26 | .tippy-content{ 27 | background-color: #333; 28 | min-width: 250px; 29 | width: auto; 30 | div{ 31 | display: flex; 32 | justify-content: space-between; 33 | border-bottom: 1px solid #555; 34 | padding: 4px 0; 35 | margin-bottom: 4px; 36 | } 37 | .title{ 38 | margin-right: 50px; 39 | } 40 | .edit-link{ 41 | color: $color-white; 42 | width: 100%; 43 | text-align: right; 44 | } 45 | } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /src/css/gallery-ui.scss: -------------------------------------------------------------------------------- 1 | @import "../../node_modules/@wordpress/components/build-style/style.css"; 2 | -------------------------------------------------------------------------------- /src/css/gallery.scss: -------------------------------------------------------------------------------- 1 | .radio-select { 2 | display: flex; 3 | align-items: center; 4 | cursor: pointer; 5 | margin: 12px 0; 6 | border: none; 7 | background: none; 8 | 9 | &:focus { 10 | outline: none; 11 | color: #007cba; 12 | } 13 | 14 | &--active { 15 | color: #007cba; 16 | 17 | g { 18 | fill: #007cba !important; 19 | } 20 | } 21 | 22 | &__label { 23 | margin-left: 7px; 24 | font-size: 14px; 25 | } 26 | } 27 | 28 | .loading-spinner-container { 29 | position: absolute; 30 | width: 100%; 31 | height: 100%; 32 | background-color: rgba(255,255,255,0.8); 33 | top: 0; 34 | left: 0; 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | } 39 | 40 | /* stylelint-disable selector-class-pattern */ 41 | .components-placeholder__fieldset { 42 | justify-content: start; 43 | } 44 | /* stylelint-enable selector-class-pattern */ 45 | 46 | .colorpalette-color-label { 47 | display: flex; 48 | margin: 8px 0; 49 | align-items: center; 50 | } 51 | 52 | .wp-block-cloudinary-gallery .block-editor-media-placeholder .components-placeholder__label .dashicon { 53 | margin-right: 8px; 54 | } 55 | 56 | /* stylelint-disable */ 57 | .wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label { 58 | display: none; 59 | } 60 | /* stylelint-enable */ 61 | 62 | .wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender { 63 | margin-top: 11px; 64 | margin-bottom: 11px; 65 | padding: 11px; 66 | min-height: auto; 67 | } 68 | 69 | .wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-button { 70 | margin-bottom: 0; 71 | } 72 | -------------------------------------------------------------------------------- /src/css/images/academy-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/css/images/academy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/images/academy.jpg -------------------------------------------------------------------------------- /src/css/images/arrow.svg: -------------------------------------------------------------------------------- 1 | 5 | 7 | -------------------------------------------------------------------------------- /src/css/images/bandwidth.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Shape 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/css/images/chart-placeholder.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/css/images/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/css/images/circular-loader.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/css/images/cloud.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | crop 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/css/images/confetti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/images/confetti.png -------------------------------------------------------------------------------- /src/css/images/connection-string.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/images/connection-string.png -------------------------------------------------------------------------------- /src/css/images/crop.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/css/images/dam-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/images/document.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /src/css/images/documentation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/images/documentation.jpg -------------------------------------------------------------------------------- /src/css/images/gallery.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | crop 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/css/images/image.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/css/images/learn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | Shape 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/css/images/logo-icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/images/report.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/images/report.jpg -------------------------------------------------------------------------------- /src/css/images/request.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/images/request.jpg -------------------------------------------------------------------------------- /src/css/images/requests.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/css/images/sample.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/images/sample.webp -------------------------------------------------------------------------------- /src/css/images/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /src/css/images/units-plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/css/images/units.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/css/images/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | crop copy 2 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/css/images/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/css/images/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /src/css/images/wizard-welcome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary_wordpress/5cc3d20aef81e6cf155ebe1c7ff786500a42c956/src/css/images/wizard-welcome.jpg -------------------------------------------------------------------------------- /src/css/main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Vars 4 | @import "variables"; 5 | // Components 6 | @import "components/brand"; 7 | @import "components/settings"; 8 | @import "components/sync"; 9 | @import "components/widget"; 10 | @import "components/global_transformations"; 11 | @import "components/terms_order"; 12 | @import "components/media_library"; 13 | @import "components/ui"; 14 | -------------------------------------------------------------------------------- /src/css/video.scss: -------------------------------------------------------------------------------- 1 | .cld { 2 | 3 | &-video { 4 | 5 | &-player { 6 | max-width: 100%; 7 | } 8 | } 9 | } 10 | 11 | -------------------------------------------------------------------------------- /src/js/asset-edit.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | import AssetPreview from './components/asset-preview'; 3 | import AssetEditor from './components/asset-editor'; 4 | 5 | const AssetEdit = { 6 | wrap: document.getElementById( 'cld-asset-edit' ), 7 | preview: null, 8 | id: null, 9 | editor: null, 10 | base: null, 11 | publicId: null, 12 | size: null, 13 | transformationsInput: document.getElementById( 'cld-asset-edit-transformations' ), 14 | saveButton: document.getElementById( 'cld-asset-edit-save' ), 15 | currentURL: null, 16 | init() { 17 | const item = JSON.parse( this.wrap.dataset.item ); 18 | this.id = item.ID; 19 | this.base = item.base + item.size + '/'; 20 | this.publicId = item.file; 21 | this.transformationsInput.value = item.transformations ? item.transformations : ''; 22 | 23 | // Init components. 24 | this.initPreview(); 25 | this.initEditor(); 26 | }, 27 | initPreview() { 28 | this.preview = AssetPreview.init(); 29 | this.wrap.appendChild( this.preview.createPreview( 900, 675 ) ); 30 | this.preview.setSrc( this.base + this.transformationsInput.value + this.publicId, true ); 31 | this.transformationsInput.addEventListener( 'input', ( ev ) => { 32 | this.preview.setSrc( this.base + this.transformationsInput.value + this.publicId ); 33 | } ); 34 | this.transformationsInput.addEventListener( 'keydown', ( ev ) => { 35 | if ( 'Enter' === ev.code ) { 36 | ev.preventDefault(); 37 | this.saveButton.dispatchEvent( new Event( 'click' ) ); 38 | } 39 | } ); 40 | }, 41 | initEditor() { 42 | this.editor = AssetEditor.init(); 43 | this.editor.onBefore( () => this.preview.reset() ); 44 | this.editor.onComplete( ( result ) => { 45 | this.transformationsInput.value = result.transformations; 46 | this.preview.setSrc( this.base + result.transformations + this.publicId, true ); 47 | if ( result.note ) { 48 | alert( result.note ); 49 | } 50 | } ); 51 | 52 | this.saveButton.addEventListener( 'click', () => { 53 | this.editor.save( { 54 | ID: this.id, 55 | transformations: this.transformationsInput.value, 56 | } ); 57 | } ); 58 | } 59 | }; 60 | 61 | window.addEventListener( 'load', () => AssetEdit.init() ); 62 | 63 | export default AssetEdit; 64 | -------------------------------------------------------------------------------- /src/js/blocks.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress dependencies 3 | */ 4 | import apiFetch from '@wordpress/api-fetch'; 5 | 6 | /** 7 | * Internal dependencies 8 | */ 9 | import Video from './components/video'; 10 | import Featured from './components/featured-image'; 11 | import Terms from './components/terms-inspector'; 12 | 13 | // jQuery, because reasons. 14 | window.$ = window.jQuery; 15 | 16 | // Register middleware for @wordpress/api-fetch to indicate the fetch is coming from the editor. 17 | // Taken from https://github.com/Automattic/jetpack/blob/trunk/projects/plugins/jetpack/extensions/editor.js. 18 | apiFetch.use( ( options, next ) => { 19 | // Skip explicit cors requests. 20 | if ( options.mode === 'cors' ) { 21 | return next( options ); 22 | } 23 | 24 | // If a URL is set, skip if it's not same-origin. 25 | // @see https://html.spec.whatwg.org/multipage/origin.html#same-origin 26 | if ( options.url ) { 27 | try { 28 | const url = new URL( options.url, location.href ); 29 | if ( 30 | url.protocol !== location.protocol || 31 | url.hostname !== location.hostname || 32 | url.port !== location.port 33 | ) { 34 | return next( options ); 35 | } 36 | } catch { 37 | // Huh? Skip it. 38 | return next( options ); 39 | } 40 | } 41 | 42 | // Ok, add header. 43 | if ( ! options.headers ) { 44 | options.headers = {}; 45 | } 46 | options.headers[ 'x-cld-fetch-from-editor' ] = 'true'; 47 | return next( options ); 48 | } ); 49 | 50 | // Global Constants 51 | export const cloudinaryBlocks = { 52 | Video, 53 | Featured, 54 | Terms, 55 | }; 56 | -------------------------------------------------------------------------------- /src/js/components/asset-editor.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | import apiFetch from '@wordpress/api-fetch'; 3 | 4 | const AssetEditor = { 5 | id: null, 6 | post_id: null, 7 | transformations: null, 8 | beforeCallbacks: [], 9 | completeCallbacks: [], 10 | init( callback ) { 11 | if ( typeof cldData.editor === 'undefined' ) { 12 | return; 13 | } 14 | apiFetch.use( apiFetch.createNonceMiddleware( cldData.editor.nonce ) ); 15 | this.callback = callback; 16 | return this; 17 | }, 18 | save( data ) { 19 | this.doBefore( data ); 20 | apiFetch( { 21 | path: cldData.editor.save_url, 22 | data, 23 | method: 'POST', 24 | } ).then( ( result ) => { 25 | this.doComplete( result, this ); 26 | } ); 27 | }, 28 | doBefore( data ) { 29 | this.beforeCallbacks.forEach( ( callback ) => callback( data, this ) ); 30 | }, 31 | doComplete( result ) { 32 | this.completeCallbacks.forEach( ( callback ) => 33 | callback( result, this ) 34 | ); 35 | }, 36 | onBefore( callback ) { 37 | this.beforeCallbacks.push( callback ); 38 | }, 39 | onComplete( callback ) { 40 | this.completeCallbacks.push( callback ); 41 | }, 42 | }; 43 | 44 | export default AssetEditor; 45 | -------------------------------------------------------------------------------- /src/js/components/extensions.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | import apiFetch from '@wordpress/api-fetch'; 3 | import OnOff from './onoff'; 4 | 5 | const Extensions = { 6 | pageReloader: document.getElementById( 'page-reloader' ), 7 | init() { 8 | if ( ! cldData.extensions ) { 9 | return; 10 | } 11 | apiFetch.use( 12 | apiFetch.createNonceMiddleware( cldData.extensions.nonce ) 13 | ); 14 | 15 | const toggles = document.querySelectorAll( '[data-extension]' ); 16 | [ ...toggles ].forEach( ( toggle ) => { 17 | toggle.addEventListener( 'change', ( ev ) => { 18 | if ( ! toggle.spinner ) { 19 | toggle.spinner = this.createSpinner(); 20 | toggle.parentNode.appendChild( toggle.spinner ); 21 | } 22 | if ( toggle.debounce ) { 23 | clearTimeout( toggle.debounce ); 24 | } 25 | toggle.debounce = setTimeout( () => { 26 | this.toggleExtension( toggle ); 27 | toggle.debounce = null; 28 | }, 1000 ); 29 | } ); 30 | } ); 31 | }, 32 | toggleExtension( toggle ) { 33 | const extension = toggle.dataset.extension; 34 | const enabled = toggle.checked; 35 | apiFetch( { 36 | path: cldData.extensions.url, 37 | data: { 38 | extension, 39 | enabled, 40 | }, 41 | method: 'POST', 42 | } ).then( ( result ) => { 43 | if ( toggle.spinner ) { 44 | toggle.parentNode.removeChild( toggle.spinner ); 45 | delete toggle.spinner; 46 | } 47 | Object.keys( result ).forEach( ( key ) => { 48 | document 49 | .querySelectorAll( `[data-text="${ key }"]` ) 50 | .forEach( ( item ) => { 51 | item.innerText = result[ key ]; 52 | } ); 53 | } ); 54 | this.pageReloader.style.display = 'block'; 55 | } ); 56 | }, 57 | createSpinner() { 58 | const spinner = document.createElement( 'span' ); 59 | spinner.classList.add( 'spinner' ); 60 | spinner.classList.add( 'cld-extension-spinner' ); 61 | return spinner; 62 | }, 63 | }; 64 | 65 | window.addEventListener( 'load', () => Extensions.init() ); 66 | 67 | export default Extensions; 68 | -------------------------------------------------------------------------------- /src/js/components/gallery-init.js: -------------------------------------------------------------------------------- 1 | /* global CLD_GALLERY_CONFIG */ 2 | 3 | ( () => { 4 | /** 5 | * A way to catch the galleryWidget function which comes from the `cloudinary` object. 6 | * The `cloudinary` object is later overwritten by the video player library by Cloudinary, 7 | * which effectively removes the gallery widget library from the page. 8 | */ 9 | const { galleryWidget } = cloudinary; 10 | 11 | window.addEventListener( 'load', function () { 12 | if ( 13 | document.querySelector( '.woocommerce-page' ) && 14 | CLD_GALLERY_CONFIG && 15 | CLD_GALLERY_CONFIG?.mediaAssets?.length 16 | ) { 17 | galleryWidget( CLD_GALLERY_CONFIG ).render(); 18 | } 19 | } ); 20 | } )(); 21 | -------------------------------------------------------------------------------- /src/js/components/modal.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | const CloudinaryModal = { 4 | modal: null, 5 | body: null, 6 | preview: null, 7 | editor: null, 8 | closeCallbacks: [], 9 | init( id ) { 10 | this._createModal( id ); 11 | return this; 12 | }, 13 | _createModal( id ) { 14 | // Make modal. 15 | this.modal = document.createElement( 'div' ); 16 | this.modal.id = id; 17 | this.modal.classList.add( 'cld-modal', 'modal-body' ); 18 | // Add modal to document body. 19 | document.body.appendChild( this.modal ); 20 | 21 | // Make Body. 22 | this.body = document.createElement( 'div' ); 23 | this.body.style.transition = 'opacity 0.5s'; 24 | this.body.style.opacity = 1; 25 | this.body.style.position = 'relative'; 26 | 27 | // Make internal box. 28 | const box = document.createElement( 'div' ); 29 | box.classList.add( 'cld-modal-box' ); 30 | box.appendChild( this.body ); 31 | // Add box to modal. 32 | this.modal.appendChild( box ); 33 | 34 | // Bind events. 35 | this._bindEvents(); 36 | }, 37 | _bindEvents( input ) { 38 | // Add escape button closing. 39 | document.addEventListener( 'keydown', ( ev ) => { 40 | if ( 'Escape' === ev.key ) { 41 | this.closeModal(); 42 | } 43 | } ); 44 | // Add backdrop click close. 45 | this.modal.addEventListener( 'click', ( e ) => { 46 | if ( e.target === this.modal ) { 47 | // Check direct target. 48 | this.closeModal(); 49 | } 50 | } ); 51 | }, 52 | appendContent( content ) { 53 | this.body.appendChild( content ); 54 | }, 55 | openModal() { 56 | this.modal.style.visibility = 'visible'; 57 | this.modal.style.opacity = 1; 58 | document.body.style.overflow = 'hidden'; 59 | }, 60 | closeModal() { 61 | this.modal.style.visibility = 'hidden'; 62 | this.modal.style.opacity = 0; 63 | document.body.style.overflow = 'initial'; 64 | this.closeCallbacks.forEach( ( callback ) => callback( this ) ); 65 | }, 66 | onClose( callback ) { 67 | this.closeCallbacks.push( callback ); 68 | }, 69 | }; 70 | 71 | export default CloudinaryModal; 72 | -------------------------------------------------------------------------------- /src/js/components/notices.js: -------------------------------------------------------------------------------- 1 | /* global CLDIS */ 2 | const Notices = { 3 | _init() { 4 | const self = this; 5 | if ( typeof CLDIS !== 'undefined' ) { 6 | const notices = document.getElementsByClassName( 'cld-notice-box' ); 7 | [ ...notices ].forEach( ( notice ) => { 8 | const dismiss = 9 | notice.getElementsByClassName( 'notice-dismiss' ); 10 | if ( dismiss.length ) { 11 | dismiss[ 0 ].addEventListener( 'click', ( ev ) => { 12 | notice.style.height = notice.offsetHeight + 'px'; 13 | ev.preventDefault(); 14 | // Give the event a slight delay to allow the height to 15 | // be set for the animation to trigger. 16 | setTimeout( function () { 17 | self._dismiss( notice ); 18 | }, 5 ); 19 | } ); 20 | } 21 | } ); 22 | } 23 | }, 24 | _dismiss( notice ) { 25 | const token = notice.dataset.dismiss; 26 | const duration = parseInt( notice.dataset.duration ); 27 | notice.classList.add( 'dismissed' ); 28 | notice.style.height = '0px'; 29 | setTimeout( function () { 30 | notice.remove(); 31 | }, 400 ); 32 | if ( 0 < duration ) { 33 | wp.ajax.send( { 34 | url: CLDIS.url, 35 | data: { 36 | token, 37 | duration, 38 | _wpnonce: CLDIS.nonce, 39 | }, 40 | } ); 41 | } 42 | }, 43 | }; 44 | 45 | // Init. 46 | window.addEventListener( 'load', Notices._init() ); 47 | 48 | export default Notices; 49 | -------------------------------------------------------------------------------- /src/js/components/restricted-types.js: -------------------------------------------------------------------------------- 1 | import { __ } from '@wordpress/i18n'; 2 | 3 | const RestrictedTypes = { 4 | init( context ) { 5 | const removers = context.querySelectorAll( '[data-remove]' ); 6 | 7 | [ ...removers ].forEach( ( tick ) => { 8 | tick.addEventListener( 'click', ( ev ) => { 9 | if ( 10 | tick.dataset.message && 11 | ! confirm( tick.dataset.message ) 12 | ) { 13 | return; 14 | } 15 | const remove = document.getElementById( tick.dataset.remove ); 16 | remove.parentNode.removeChild( remove ); 17 | } ); 18 | } ); 19 | }, 20 | }; 21 | 22 | export default RestrictedTypes; 23 | -------------------------------------------------------------------------------- /src/js/components/states.js: -------------------------------------------------------------------------------- 1 | const States = { 2 | key: '_cld_pending_state', 3 | data: null, 4 | pending: null, 5 | changed: false, 6 | previous: {}, 7 | init() { 8 | this.data = cldData.stateData ? cldData.stateData : {}; 9 | let prevState = localStorage.getItem( this.key ); 10 | if ( prevState ) { 11 | prevState = JSON.parse( prevState ); 12 | this.data = { ...this.data, ...prevState }; 13 | this.sendStates(); 14 | } 15 | this.previous = JSON.stringify( this.data ); 16 | }, 17 | _update() { 18 | if ( this.pending ) { 19 | clearTimeout( this.pending ); 20 | localStorage.removeItem( this.key ); 21 | } 22 | if ( this.previous !== JSON.stringify( this.data ) ) { 23 | this.pending = setTimeout( () => this.sendStates(), 2000 ); 24 | localStorage.setItem( this.key, JSON.stringify( this.data ) ); 25 | } else { 26 | } 27 | }, 28 | set( key, state ) { 29 | if ( ! this.data[ key ] || this.data[ key ] !== state ) { 30 | this.data[ key ] = state; 31 | this._update(); 32 | } 33 | }, 34 | get( key ) { 35 | let value = null; 36 | if ( this.data[ key ] ) { 37 | value = this.data[ key ]; 38 | } 39 | return value; 40 | }, 41 | sendStates() { 42 | fetch( cldData.stateURL, { 43 | method: 'POST', 44 | headers: { 45 | 'Content-Type': 'application/json', 46 | 'X-WP-Nonce': cldData.stateNonce, 47 | }, 48 | body: JSON.stringify( this.data ), 49 | } ) 50 | .then( ( response ) => response.json() ) 51 | .then( ( data ) => { 52 | if ( data.success ) { 53 | this.previous = JSON.stringify( data.state ); 54 | localStorage.removeItem( this.key ); 55 | } else { 56 | } 57 | } ); 58 | }, 59 | }; 60 | 61 | export default States; 62 | -------------------------------------------------------------------------------- /src/js/components/storage.js: -------------------------------------------------------------------------------- 1 | const Storage = { 2 | select: document.getElementById( 'connect.offload' ), 3 | tooltip: null, 4 | descriptions: {}, 5 | change() { 6 | [ ...this.descriptions ].forEach( ( li ) => { 7 | li.classList.remove( 'selected' ); 8 | } ); 9 | 10 | this.tooltip 11 | .querySelector( '.' + this.select.value ) 12 | .classList.add( 'selected' ); 13 | }, 14 | addEventListener() { 15 | this.select.addEventListener( 'change', this.change.bind( this ) ); 16 | }, 17 | _init() { 18 | if ( this.select ) { 19 | this.addEventListener(); 20 | this.tooltip = 21 | this.select.parentNode.querySelector( '.cld-tooltip' ); 22 | this.descriptions = this.tooltip.querySelectorAll( 'li' ); 23 | this.change(); 24 | } 25 | }, 26 | }; 27 | window.addEventListener( 'load', () => Storage._init() ); 28 | 29 | export default Storage; 30 | -------------------------------------------------------------------------------- /src/js/components/suffix-value.js: -------------------------------------------------------------------------------- 1 | const SuffixValue = { 2 | suffixInputs: null, 3 | init( context ) { 4 | this.suffixInputs = context.querySelectorAll( '[data-suffix]' ); 5 | [ ...this.suffixInputs ].forEach( ( input ) => 6 | this.bindInput( input ) 7 | ); 8 | }, 9 | bindInput( input ) { 10 | const suffix = document.getElementById( input.dataset.suffix ); 11 | const template = suffix.dataset.template.split( '@value' ); 12 | this.setSuffix( suffix, template, input.value ); 13 | input.addEventListener( 'change', () => 14 | this.setSuffix( suffix, template, input.value ) 15 | ); 16 | input.addEventListener( 'input', () => 17 | this.setSuffix( suffix, template, input.value ) 18 | ); 19 | }, 20 | setSuffix( suffix, template, value ) { 21 | const hidden = [ 'none', 'off', '' ]; 22 | suffix.innerHTML = ''; 23 | suffix.classList.add( 'hidden' ); 24 | if ( -1 === hidden.indexOf( value ) ) { 25 | suffix.classList.remove( 'hidden' ); 26 | } 27 | const text = document.createTextNode( template.join( value ) ); 28 | suffix.appendChild( text ); 29 | }, 30 | }; 31 | export default SuffixValue; 32 | -------------------------------------------------------------------------------- /src/js/components/taxonomies.js: -------------------------------------------------------------------------------- 1 | const toggler = document.querySelector( '.cloudinary-collapsible__toggle' ); 2 | 3 | if ( toggler ) { 4 | toggler.addEventListener( 'click', function () { 5 | const content = document.querySelector( 6 | '.cloudinary-collapsible__content' 7 | ); 8 | const isHidden = 9 | window 10 | .getComputedStyle( content, null ) 11 | .getPropertyValue( 'display' ) === 'none'; 12 | const arrowIcon = document.querySelector( 13 | '.cloudinary-collapsible__toggle button i' 14 | ); 15 | 16 | content.style.display = isHidden ? 'block' : 'none'; 17 | 18 | const arrowDown = 'dashicons-arrow-down-alt2'; 19 | const arrowUp = 'dashicons-arrow-up-alt2'; 20 | 21 | if ( arrowIcon.classList.contains( arrowDown ) ) { 22 | arrowIcon.classList.remove( arrowDown ); 23 | arrowIcon.classList.add( arrowUp ); 24 | } else { 25 | arrowIcon.classList.remove( arrowUp ); 26 | arrowIcon.classList.add( arrowDown ); 27 | } 28 | } ); 29 | } 30 | -------------------------------------------------------------------------------- /src/js/gallery-block/attributes.json: -------------------------------------------------------------------------------- 1 | { 2 | "aspectRatio": { 3 | "type": "string" 4 | }, 5 | "navigation": { 6 | "type": "string" 7 | }, 8 | "zoom": { 9 | "type": "boolean" 10 | }, 11 | "carouselLocation": { 12 | "type": "string" 13 | }, 14 | "carouselOffset": { 15 | "type": "number" 16 | }, 17 | "carouselStyle": { 18 | "type": "string" 19 | }, 20 | "displayProps_mode": { 21 | "type": "string" 22 | }, 23 | "displayProps_columns": { 24 | "type": "number" 25 | }, 26 | "indicatorProps_shape": { 27 | "type": "string" 28 | }, 29 | "themeProps_primary": { 30 | "type": "string" 31 | }, 32 | "themeProps_onPrimary": { 33 | "type": "string" 34 | }, 35 | "themeProps_active": { 36 | "type": "string" 37 | }, 38 | "zoomProps_type": { 39 | "type": "string" 40 | }, 41 | "zoomProps_viewerPosition": { 42 | "type": "string" 43 | }, 44 | "zoomProps_trigger": { 45 | "type": "string" 46 | }, 47 | "thumbnailProps_width": { 48 | "type": "number" 49 | }, 50 | "thumbnailProps_height": { 51 | "type": "number" 52 | }, 53 | "thumbnailProps_navigationShape": { 54 | "type": "string" 55 | }, 56 | "thumbnailProps_selectedStyle": { 57 | "type": "string" 58 | }, 59 | "thumbnailProps_selectedBorderPosition": { 60 | "type": "string" 61 | }, 62 | "thumbnailProps_selectedBorderWidth": { 63 | "type": "number" 64 | }, 65 | "thumbnailProps_mediaSymbolShape": { 66 | "type": "string" 67 | }, 68 | "cloudName": { 69 | "type": "string" 70 | }, 71 | "container": { 72 | "type": "string" 73 | }, 74 | "selectedImages": { 75 | "type": "array", 76 | "default": [] 77 | }, 78 | "transformation_crop": { 79 | "type": "string", 80 | "default": "pad" 81 | }, 82 | "transformation_background": { 83 | "type": "string" 84 | }, 85 | "customSettings": { 86 | "type": "string" 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/js/gallery-block/deprecated.js: -------------------------------------------------------------------------------- 1 | import attributes from './attributes.json'; 2 | import cloneDeep from 'lodash/cloneDeep'; 3 | 4 | const newAttributes = cloneDeep( attributes ); 5 | delete attributes.cloudName; 6 | 7 | const Deprecated = () => [ { attributes } ]; 8 | 9 | export default Deprecated; 10 | -------------------------------------------------------------------------------- /src/js/gallery-block/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress dependencies 3 | */ 4 | import { __ } from '@wordpress/i18n'; 5 | import { registerBlockType } from '@wordpress/blocks'; 6 | 7 | /** 8 | * Internal dependencies 9 | */ 10 | import edit from './edit'; 11 | import save from './save'; 12 | import attributes from './attributes.json'; 13 | 14 | registerBlockType( 'cloudinary/gallery', { 15 | title: __( 'Cloudinary Gallery', 'cloudinary' ), 16 | description: __( 17 | 'Add a gallery powered by the Cloudinary Gallery Widget to your post.', 18 | 'cloudinary' 19 | ), 20 | category: 'widgets', 21 | icon: 'format-gallery', 22 | attributes, 23 | edit, 24 | save, 25 | } ); 26 | -------------------------------------------------------------------------------- /src/js/gallery-block/radio.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** 4 | * External dependencies 5 | */ 6 | import classNames from 'classnames'; 7 | 8 | export default ( { value, children, icon: Icon, onChange, current } ) => { 9 | const isActive = 10 | typeof value === 'object' 11 | ? JSON.stringify( value ) === JSON.stringify( current ) 12 | : current === value; 13 | 14 | return ( 15 | 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /src/js/gallery-block/save.js: -------------------------------------------------------------------------------- 1 | const Save = ( { attributes } ) => ( 2 |
3 | ); 4 | 5 | export default Save; 6 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * External dependencies 3 | */ 4 | import 'loading-attribute-polyfill'; 5 | import './components/taxonomies'; 6 | /** 7 | * Internal dependencies 8 | */ 9 | import Settings from './components/settings-page'; 10 | import GlobalTransformations from './components/global-transformations'; 11 | import MediaLibrary from './components/media-library'; 12 | import Notices from './components/notices'; 13 | import UI from './components/ui'; 14 | import Wizard from './components/wizard'; 15 | import Storage from "./components/storage"; 16 | import Extensions from "./components/extensions"; 17 | import Tabs from "./components/tabs"; 18 | 19 | import '../css/main.scss'; 20 | 21 | // include images. 22 | import '../css/images/academy.jpg'; 23 | import '../css/images/academy-icon.svg'; 24 | import '../css/images/bandwidth.svg'; 25 | import '../css/images/star.svg'; 26 | import '../css/images/cloud.svg'; 27 | import '../css/images/crop.svg'; 28 | import '../css/images/gallery.svg'; 29 | import '../css/images/image.svg'; 30 | import '../css/images/units.svg'; 31 | import '../css/images/units-plus.svg'; 32 | import '../css/images/requests.svg'; 33 | import '../css/images/responsive.svg'; 34 | import '../css/images/learn.svg'; 35 | import '../css/images/logo-icon.svg'; 36 | import '../css/images/transformation.svg'; 37 | import '../css/images/upload.svg'; 38 | import '../css/images/video.svg'; 39 | import '../css/images/connection-string.png'; 40 | import '../css/images/sample.webp'; 41 | import '../css/images/wizard-welcome.jpg'; 42 | import '../css/images/document.svg'; 43 | import '../css/images/arrow.svg'; 44 | import '../css/images/documentation.jpg'; 45 | import '../css/images/request.jpg'; 46 | import '../css/images/report.jpg'; 47 | import '../css/images/confetti.png'; 48 | import '../css/images/circular-loader.svg'; 49 | import '../css/images/dam-icon.svg'; 50 | 51 | 52 | // jQuery, because reasons. 53 | window.$ = window.jQuery; 54 | 55 | // Global Constants 56 | export const cloudinary = { 57 | UI, 58 | Settings, 59 | GlobalTransformations, 60 | MediaLibrary, 61 | Notices, 62 | Wizard, 63 | Storage, 64 | Extensions, 65 | Tabs 66 | }; 67 | -------------------------------------------------------------------------------- /src/js/syntax-highlight.js: -------------------------------------------------------------------------------- 1 | import CodeMirror from 'codemirror/lib/codemirror'; 2 | import 'codemirror/addon/fold/brace-fold'; 3 | import 'codemirror/addon/fold/foldgutter'; 4 | import 'codemirror/mode/javascript/javascript'; 5 | 6 | import 'codemirror/lib/codemirror.css'; 7 | import 'codemirror/addon/fold/foldgutter.css'; 8 | import 'codemirror/theme/material.css'; 9 | 10 | const SyntaxHighlight = { 11 | init() { 12 | document.addEventListener('DOMContentLoaded', function () { 13 | if (undefined === CLD_METADATA) { 14 | return; 15 | } 16 | 17 | const block = document.getElementById('meta-data'); 18 | 19 | const instance = CodeMirror( 20 | block, 21 | { 22 | value: JSON.stringify(CLD_METADATA, null, ' '), 23 | lineNumbers: true, 24 | theme: 'material', 25 | readOnly: true, 26 | mode: { 27 | name: 'javascript', 28 | json: true, 29 | }, 30 | matchBrackets: true, 31 | foldGutter: true, 32 | htmlMode: true, 33 | gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], 34 | viewportMargin: 50, 35 | } 36 | ); 37 | 38 | instance.setSize( null, 600 ); 39 | }); 40 | } 41 | }; 42 | 43 | SyntaxHighlight.init(); 44 | 45 | export default SyntaxHighlight; 46 | -------------------------------------------------------------------------------- /src/js/video-init.js: -------------------------------------------------------------------------------- 1 | /* global videoFreeForm cldVideos cld */ 2 | 3 | ( function () { 4 | if ( typeof cldVideos === 'undefined' ) { 5 | return; 6 | } 7 | 8 | cldVideos = JSON.parse( cldVideos ); 9 | 10 | for ( const videoInstance in cldVideos ) { 11 | const cldConfig = cldVideos[ videoInstance ]; 12 | const cldId = 'cloudinary-video-' + videoInstance; 13 | cld.videoPlayer( cldId, cldConfig ); 14 | } 15 | 16 | window.addEventListener( 'load', function () { 17 | for ( const videoInstance in cldVideos ) { 18 | const cldId = 'cloudinary-video-' + videoInstance; 19 | const videoContainer = document.getElementById( cldId ); 20 | let videoElement = videoContainer.getElementsByTagName( 'video' ); 21 | 22 | if ( videoElement.length === 1 ) { 23 | videoElement = videoElement[ 0 ]; 24 | videoElement.style.width = '100%'; 25 | if ( 26 | videoFreeForm && 27 | videoElement.src.indexOf( videoFreeForm ) === -1 && 28 | ! cldVideos[ videoInstance ].overwrite_transformations 29 | ) { 30 | videoElement.src = videoElement.src.replace( 31 | 'upload/', 32 | 'upload/' + videoFreeForm + '/' 33 | ); 34 | } 35 | } 36 | } 37 | } ); 38 | } )(); 39 | -------------------------------------------------------------------------------- /ui-definitions/components/header.php: -------------------------------------------------------------------------------- 1 | 12 |
13 | 17 |

18 | 19 | 20 | 21 | 22 | 23 | 24 |

25 |
26 | -------------------------------------------------------------------------------- /ui-definitions/components/media-library.php: -------------------------------------------------------------------------------- 1 | 11 |
12 | 13 |
14 |
15 |

16 |
17 |
18 |
19 | -------------------------------------------------------------------------------- /ui-definitions/components/page.php: -------------------------------------------------------------------------------- 1 | 12 |
13 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /ui-definitions/components/settings.php: -------------------------------------------------------------------------------- 1 | get_component( 'admin' ); 12 | $component = $admin->get_component(); 13 | $connected = $cloudinary->settings->get_param( 'connected' ); 14 | $active_slug = $admin->get_param( 'active_slug' ); 15 | ?> 16 | 17 | render_notices(); ?> 18 |
19 | 20 | 21 |
22 | render( true ); 24 | ?> 25 |
26 | 27 |
28 | settings->get_param( 'sidebar' ); 30 | $sidebar = $this->init_components( $def, 'sidebar' ); 31 | $sidebar->get_component()->render( true ); 32 | ?> 33 |
34 | 35 |
36 |
37 | -------------------------------------------------------------------------------- /ui-definitions/settings-metaboxes.php: -------------------------------------------------------------------------------- 1 | array( 24 | 'title' => __( 'Cloudinary Crop and Gravity control', 'cloudinary' ), 25 | 'screen' => 'attachment', 26 | 'settings' => array( 27 | array( 28 | 'slug' => 'single_crop_and_gravity', 29 | 'type' => 'stand_alone', 30 | array( 31 | 'type' => 'on_off', 32 | 'slug' => 'enable_crop_and_gravity', 33 | 'title' => __( 'Crop and Gravity control (beta)', 'cloudinary' ), 34 | 'tooltip_text' => __( 35 | 'Enable Crop and Gravity control for registered image sizes.', 36 | 'cloudinary' 37 | ), 38 | 'description' => __( 'Enable Crop and Gravity', 'cloudinary' ), 39 | 'default' => 'off', 40 | ), 41 | array( 42 | 'type' => 'crops', 43 | 'slug' => 'single_sizes', 44 | 'mode' => 'full', 45 | 'condition' => array( 46 | 'enable_crop_and_gravity' => true, 47 | ), 48 | ), 49 | ), 50 | ), 51 | ), 52 | ); 53 | 54 | /** 55 | * Filter the meta boxes. 56 | * 57 | * @hook cloudinary_meta_boxes 58 | * @since 3.1.3 59 | * 60 | * @param $metaboxes {array} Array of meta boxes to create. 61 | * 62 | * @return {array} 63 | */ 64 | return apply_filters( 'cloudinary_meta_boxes', $metaboxes ); 65 | --------------------------------------------------------------------------------