From 200a4515ddab2dc7ac0ba1967b9f2c2f632c13c9 Mon Sep 17 00:00:00 2001 From: David Cramer Date: Thu, 26 Mar 2020 13:26:02 +0200 Subject: [PATCH] remove classed based editor overwrite flag and filter based on attributes. --- .../js/block-editor.js | 2 +- .../js/block-editor.js.map | 2 +- .../js/src/components/video.js | 19 --------------- .../php/media/class-filter.php | 24 +++++++++++++++++++ 4 files changed, 26 insertions(+), 21 deletions(-) diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/js/block-editor.js b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/js/block-editor.js index 5a6a131b4..38488de8c 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/js/block-editor.js +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/js/block-editor.js @@ -1 +1 @@ -!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=6)}([function(e,t){!function(){e.exports=this.wp.element}()},function(e,t){!function(){e.exports=this.wp.i18n}()},function(e,t){!function(){e.exports=this.wp.components}()},function(e,t,r){var n=r(5);e.exports=function(e){for(var t=1;t {\n\tconst {attributes: {overwrite_transformations, transformations}, setAttributes} = props;\n\n\treturn (\n\t\t\n\t\t\t {\n\t\t\t\t\tsetAttributes( {overwrite_transformations: value} );\n\t\t\t\t}}\n\t\t\t/>\n\t\t\n\t);\n};\n\nlet ImageInspectorControls = ( props ) => {\n\tconst {setAttributes, media} = props;\n\tconst {InspectorControls} = wp.editor;\n\n\tif ( media && media.transformations ) {\n\t\tsetAttributes( {transformations: true} );\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n};\n\nImageInspectorControls = withSelect( ( select, ownProps ) => ( {\n\t...ownProps,\n\tmedia: ownProps.attributes.id ? select( 'core' ).getMedia( ownProps.attributes.id ) : null\n} ))( ImageInspectorControls );\n\nconst cldFilterBlocksEdit = ( BlockEdit ) => {\n\treturn ( props ) => {\n\t\tconst {name} = props;\n\t\tconst shouldDisplayInspector = 'core/image' === name || 'core/video' === name;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{shouldDisplayInspector ? : null}\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n};\n\nwp.hooks.addFilter( 'editor.BlockEdit', 'cloudinary/filterEdit', cldFilterBlocksEdit, 20 );\n\nconst cldfilterBlocksSave = ( element, blockType, attributes ) => {\n\tif ( 'core/image' === blockType.name && attributes.overwrite_transformations ) {\n\t\tlet children = cloneElement( element.props.children );\n\t\tlet classname = children.props.children[ 0 ].props.className ? children.props.children[ 0 ].props.className : '';\n\t\tlet child = cloneElement( children.props.children[ 0 ], {className: classname + ' cld-overwrite'} );\n\t\tlet neChildren = cloneElement( children, {children: [ child, false ]} );\n\t\treturn cloneElement( element, {children: neChildren} );\n\t}\n\n\tif ( 'core/video' === blockType.name && attributes.overwrite_transformations ) {\n\t\tlet children = cloneElement( element.props.children[ 0 ], {className: ' cld-overwrite'} );\n\t\treturn cloneElement( element, {children} );\n\t}\n\n\treturn element;\n};\n\nwp.hooks.addFilter( 'blocks.getSaveElement', 'cloudinary/filterSave', cldfilterBlocksSave );\n","function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nmodule.exports = _defineProperty;","var defineProperty = require(\"./defineProperty\");\n\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i] != null ? Object(arguments[i]) : {};\n var ownKeys = Object.keys(source);\n\n if (typeof Object.getOwnPropertySymbols === 'function') {\n ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {\n return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n }));\n }\n\n ownKeys.forEach(function (key) {\n defineProperty(target, key, source[key]);\n });\n }\n\n return target;\n}\n\nmodule.exports = _objectSpread;","(function() { module.exports = this[\"wp\"][\"components\"]; }());","(function() { module.exports = this[\"wp\"][\"data\"]; }());","(function() { module.exports = this[\"wp\"][\"element\"]; }());","(function() { module.exports = this[\"wp\"][\"i18n\"]; }());"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./js/src/blocks.js","webpack:///./js/src/components/video.js","webpack:///./node_modules/@babel/runtime/helpers/defineProperty.js","webpack:///./node_modules/@babel/runtime/helpers/objectSpread.js","webpack:///external {\"this\":[\"wp\",\"components\"]}","webpack:///external {\"this\":[\"wp\",\"data\"]}","webpack:///external {\"this\":[\"wp\",\"element\"]}","webpack:///external {\"this\":[\"wp\",\"i18n\"]}"],"names":["$","window","jQuery","cloudinaryBlocks","Video","_init","CLD_VIDEO_PLAYER","wp","hooks","addFilter","settings","name","video_autoplay_mode","attributes","autoplay","default","video_loop","loop","video_controls","controls","cldAddToggle","overwrite_transformations","type","transformations","TransformationsToggle","props","setAttributes","__","value","ImageInspectorControls","media","InspectorControls","editor","withSelect","select","ownProps","id","getMedia","cldFilterBlocksEdit","BlockEdit","shouldDisplayInspector"],"mappings":"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","file":"block-editor.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./js/src/blocks.js\");\n","/* global window */\n/**\n * Main JS.\n */\n\n// Components\nimport Video from './components/video';\n\n\n// jQuery, because reasons.\nconst $ = window.$ = window.jQuery;\n\n// Global Constants\nexport const cloudinaryBlocks = {\n\tVideo\n};\n\n","/* global window wp */\n\nimport { __ } from '@wordpress/i18n';\nimport { withSelect } from '@wordpress/data';\nimport { cloneElement } from '@wordpress/element';\nimport { ToggleControl, PanelBody } from '@wordpress/components';\n\nconst Video = {\n\t_init: function() {\n\t\tif ( typeof CLD_VIDEO_PLAYER === 'undefined' ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Gutenberg Video Settings\n\t\twp.hooks.addFilter(\n\t\t\t'blocks.registerBlockType',\n\t\t\t'Cloudinary/Media/Video',\n\t\t\tfunction( settings, name ) {\n\t\t\t\tif ( name === 'core/video' ) {\n\t\t\t\t\tif ( 'off' !== CLD_VIDEO_PLAYER.video_autoplay_mode ) {\n\t\t\t\t\t\tsettings.attributes.autoplay.default = true;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( 'on' === CLD_VIDEO_PLAYER.video_loop ) {\n\t\t\t\t\t\tsettings.attributes.loop.default = true;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( 'off' === CLD_VIDEO_PLAYER.video_controls ) {\n\t\t\t\t\t\tsettings.attributes.controls.default = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn settings;\n\t\t\t}\n\t\t);\n\t},\n};\n\nexport default Video;\n\n// Init.\nVideo._init();\n\nlet cldAddToggle = function( settings, name ) {\n\n\tif ( 'core/image' === name || 'core/video' === name ) {\n\t\tif ( !settings.attributes ) {\n\t\t\tsettings.attributes = {};\n\t\t}\n\n\t\tsettings.attributes.overwrite_transformations = {\n\t\t\ttype: 'boolean',\n\t\t};\n\n\t\tsettings.attributes.transformations = {\n\t\t\ttype: 'boolean',\n\t\t};\n\n\t}\n\n\treturn settings;\n};\n\nwp.hooks.addFilter( 'blocks.registerBlockType', 'cloudinary/addAttributes', cldAddToggle );\n\n/**\n * Get AMP Lightbox toggle control.\n *\n * @param {Object} props Props.\n *\n * @return {Component} Element.\n */\nconst TransformationsToggle = ( props ) => {\n\tconst {attributes: {overwrite_transformations, transformations}, setAttributes} = props;\n\n\treturn (\n\t\t\n\t\t\t {\n\t\t\t\t\tsetAttributes( {overwrite_transformations: value} );\n\t\t\t\t}}\n\t\t\t/>\n\t\t\n\t);\n};\n\nlet ImageInspectorControls = ( props ) => {\n\tconst {setAttributes, media} = props;\n\tconst {InspectorControls} = wp.editor;\n\n\tif ( media && media.transformations ) {\n\t\tsetAttributes( {transformations: true} );\n\t}\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t);\n};\n\nImageInspectorControls = withSelect( ( select, ownProps ) => ( {\n\t...ownProps,\n\tmedia: ownProps.attributes.id ? select( 'core' ).getMedia( ownProps.attributes.id ) : null\n} ))( ImageInspectorControls );\n\nconst cldFilterBlocksEdit = ( BlockEdit ) => {\n\treturn ( props ) => {\n\t\tconst {name} = props;\n\t\tconst shouldDisplayInspector = 'core/image' === name || 'core/video' === name;\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{shouldDisplayInspector ? : null}\n\t\t\t\t\n\t\t\t\n\t\t);\n\t}\n};\n\nwp.hooks.addFilter( 'editor.BlockEdit', 'cloudinary/filterEdit', cldFilterBlocksEdit, 20 );\n","function _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nmodule.exports = _defineProperty;","var defineProperty = require(\"./defineProperty\");\n\nfunction _objectSpread(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i] != null ? Object(arguments[i]) : {};\n var ownKeys = Object.keys(source);\n\n if (typeof Object.getOwnPropertySymbols === 'function') {\n ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {\n return Object.getOwnPropertyDescriptor(source, sym).enumerable;\n }));\n }\n\n ownKeys.forEach(function (key) {\n defineProperty(target, key, source[key]);\n });\n }\n\n return target;\n}\n\nmodule.exports = _objectSpread;","(function() { module.exports = this[\"wp\"][\"components\"]; }());","(function() { module.exports = this[\"wp\"][\"data\"]; }());","(function() { module.exports = this[\"wp\"][\"element\"]; }());","(function() { module.exports = this[\"wp\"][\"i18n\"]; }());"],"sourceRoot":""} \ No newline at end of file diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/js/src/components/video.js b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/js/src/components/video.js index 1fe79c539..5496bb742 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/js/src/components/video.js +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/js/src/components/video.js @@ -120,22 +120,3 @@ const cldFilterBlocksEdit = ( BlockEdit ) => { }; wp.hooks.addFilter( 'editor.BlockEdit', 'cloudinary/filterEdit', cldFilterBlocksEdit, 20 ); - -const cldfilterBlocksSave = ( element, blockType, attributes ) => { - if ( 'core/image' === blockType.name && attributes.overwrite_transformations ) { - let children = cloneElement( element.props.children ); - let classname = children.props.children[ 0 ].props.className ? children.props.children[ 0 ].props.className : ''; - let child = cloneElement( children.props.children[ 0 ], {className: classname + ' cld-overwrite'} ); - let neChildren = cloneElement( children, {children: [ child, false ]} ); - return cloneElement( element, {children: neChildren} ); - } - - if ( 'core/video' === blockType.name && attributes.overwrite_transformations ) { - let children = cloneElement( element.props.children[ 0 ], {className: ' cld-overwrite'} ); - return cloneElement( element, {children} ); - } - - return element; -}; - -wp.hooks.addFilter( 'blocks.getSaveElement', 'cloudinary/filterSave', cldfilterBlocksSave ); diff --git a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-filter.php b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-filter.php index e225300d0..5c2b0890a 100644 --- a/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-filter.php +++ b/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/php/media/class-filter.php @@ -650,6 +650,27 @@ public function catch_media_templates_maybe() { } } + /** + * Filter an image block to add the class for cld-overriding. + * + * @param array $block The current block structure. + * @param array $source_block The source, unfiltered block structure. + * + * @return array + */ + public function filter_image_block_pre_render( $block, $source_block ) { + + if ( 'core/image' === $source_block['blockName'] ) { + if ( ! empty( $source_block['attrs']['overwrite_transformations'] ) ) { + foreach ( $block['innerContent'] as &$content ) { + $content = str_replace( 'wp-image-' . $block['attrs']['id'], 'wp-image-' . $block['attrs']['id'] . ' cld-overwrite', $content ); + } + } + } + + return $block; + } + /** * Setup hooks for the filters. */ @@ -685,5 +706,8 @@ function ( $type ) use ( $filter ) { // Add checkbox to media modal template. add_action( 'admin_footer', array( $this, 'catch_media_templates_maybe' ), 9 ); + // Filter for block rendering. + add_filter( 'render_block_data', array( $this, 'filter_image_block_pre_render' ), 10, 2 ); + } }