├── readme.txt ├── changelog.txt ├── .gitignore ├── postcss.config.js ├── .babelrc ├── assets ├── src │ ├── scss │ │ ├── blocks-editor.scss │ │ ├── blocks-style.scss │ │ └── blocks │ │ │ ├── highlight │ │ │ ├── editor.scss │ │ │ └── style.scss │ │ │ ├── plugin-card │ │ │ ├── editor.scss │ │ │ └── style.scss │ │ │ └── click-to-tweet │ │ │ ├── style.scss │ │ │ └── editor.scss │ └── js │ │ ├── blocks │ │ ├── highlight │ │ │ ├── components │ │ │ │ ├── colors.js │ │ │ │ ├── controls.js │ │ │ │ ├── inspector.js │ │ │ │ └── edit.js │ │ │ └── index.js │ │ ├── click-to-tweet │ │ │ ├── components │ │ │ │ ├── colors.js │ │ │ │ ├── controls.js │ │ │ │ ├── inspector.js │ │ │ │ └── edit.js │ │ │ └── index.js │ │ └── plugin-card │ │ │ ├── components │ │ │ ├── controls.js │ │ │ └── edit.js │ │ │ └── index.js │ │ ├── gutenberg.js │ │ └── utils │ │ └── icons.js ├── img │ └── icons │ │ ├── star-full.svg │ │ ├── star-half.svg │ │ ├── star-empty.svg │ │ └── twitter.svg ├── css │ ├── blocks_editor.css │ └── blocks_style.css └── js │ └── gutenberg.js ├── .vscode └── tasks.json ├── package.json ├── includes ├── class-mb-gutenberg.php ├── class-mb-rest.php └── blocks │ └── class-mb-plugin-card.php ├── webpack.config.js └── machoblocks.php /readme.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /changelog.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | = 1.0 - February 2, 2016 = 4 | 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | /node_modules/ 3 | .idea/ 4 | /.standard.json 5 | package-lock.json -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | }; -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-es2015", "babel-preset-react"], 3 | "plugins": ["transform-object-rest-spread"] 4 | } -------------------------------------------------------------------------------- /assets/src/scss/blocks-editor.scss: -------------------------------------------------------------------------------- 1 | 2 | @import 'blocks/highlight/editor'; 3 | @import 'blocks/click-to-tweet/editor'; 4 | @import 'blocks/plugin-card/editor'; -------------------------------------------------------------------------------- /assets/src/scss/blocks-style.scss: -------------------------------------------------------------------------------- 1 | @import 'blocks/highlight/style'; 2 | @import 'blocks/click-to-tweet/style'; 3 | @import 'blocks/plugin-card/style'; 4 | -------------------------------------------------------------------------------- /assets/src/scss/blocks/highlight/editor.scss: -------------------------------------------------------------------------------- 1 | .editor-block-list__block[data-type="machoblocks/highlight"] { 2 | background: transparent !important; 3 | } 4 | -------------------------------------------------------------------------------- /assets/src/js/blocks/highlight/components/colors.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress dependencies 3 | */ 4 | const { withColors } = wp.editor; 5 | 6 | /** 7 | * Generate block colors. 8 | */ 9 | const applyWithColors = withColors( 10 | 'backgroundColor', 11 | { textColor: 'color' }, 12 | ); 13 | 14 | export default applyWithColors; -------------------------------------------------------------------------------- /assets/src/js/blocks/click-to-tweet/components/colors.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress dependencies 3 | */ 4 | const { withColors } = wp.editor; 5 | 6 | /** 7 | * Generate block colors. 8 | */ 9 | const applyWithColors = withColors( 10 | 'backgroundColor', 11 | { textColor: 'color' }, 12 | { buttonColor: 'background-color' }, 13 | ); 14 | 15 | export default applyWithColors; -------------------------------------------------------------------------------- /assets/img/icons/star-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/src/scss/blocks/highlight/style.scss: -------------------------------------------------------------------------------- 1 | .wp-block-machoblocks-highlight { 2 | background: transparent !important; 3 | 4 | &:empty { 5 | display: none; 6 | } 7 | 8 | & + & { 9 | padding-top: 7px; 10 | } 11 | 12 | &__content { 13 | padding: 2px 5px 2px 3px; 14 | position: relative; 15 | border-radius: 6px; 16 | } 17 | 18 | &__content:not(.has-background) { 19 | background-color: #f3ead1; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "grunt", 8 | "task": "checktextdomain", 9 | "problemMatcher": [] 10 | }, 11 | { 12 | "type": "grunt", 13 | "task": "buildpot", 14 | "problemMatcher": [] 15 | }, 16 | { 17 | "type": "grunt", 18 | "task": "build-archive", 19 | "problemMatcher": [] 20 | }, 21 | { 22 | "label": "npm run watch", 23 | "type": "npm", 24 | "script": "watch", 25 | "problemMatcher": [], 26 | "auto": true 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /assets/img/icons/star-half.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/src/js/blocks/plugin-card/components/controls.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress dependencies 3 | */ 4 | const { __ } = wp.i18n; 5 | const { BlockControls } = wp.editor; 6 | const { Component} = wp.element; 7 | const { IconButton, Toolbar } = wp.components; 8 | 9 | export default class Controls extends Component { 10 | 11 | constructor( props ) { 12 | super( ...arguments ); 13 | } 14 | 15 | onChangePluginClick() { 16 | this.props.setAttributes( { 17 | pluginSlug: '', 18 | } ); 19 | } 20 | 21 | render() { 22 | 23 | return ( 24 | 25 | 26 | this.onChangePluginClick() } 30 | /> 31 | 32 | 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /assets/src/js/gutenberg.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress dependencies 3 | */ 4 | const { registerBlockType } = wp.blocks; 5 | 6 | // Category slug and title 7 | const category = { 8 | slug: 'machoblocks', 9 | }; 10 | 11 | import * as highlight from './blocks/highlight'; 12 | import * as clickToTweet from './blocks/click-to-tweet'; 13 | import * as pluginCard from './blocks/plugin-card'; 14 | 15 | export function registerBlocks () { 16 | [ 17 | highlight, 18 | clickToTweet, 19 | pluginCard, 20 | ].forEach( ( block ) => { 21 | 22 | if ( ! block ) { 23 | return; 24 | } 25 | 26 | const { name, icon, settings } = block; 27 | 28 | registerBlockType( `machoblocks/${ name }`, { category: category.slug, icon: { src: icon, foreground: '#6939f4' }, ...settings } ); 29 | } ); 30 | }; 31 | registerBlocks(); 32 | 33 | -------------------------------------------------------------------------------- /assets/src/js/blocks/highlight/components/controls.js: -------------------------------------------------------------------------------- 1 | /** 2 | * WordPress dependencies 3 | */ 4 | const { __ } = wp.i18n; 5 | const { Component, Fragment } = wp.element; 6 | const { BlockControls, AlignmentToolbar } = wp.editor; 7 | 8 | class Controls extends Component { 9 | 10 | constructor( props ) { 11 | super( ...arguments ); 12 | } 13 | 14 | render() { 15 | 16 | const { 17 | attributes, 18 | setAttributes, 19 | } = this.props; 20 | 21 | const { 22 | align, 23 | } = attributes; 24 | 25 | return ( 26 | 27 | 28 | setAttributes( { align: nextAlign } ) } 31 | /> 32 | 33 | 34 | ); 35 | } 36 | }; 37 | 38 | export default Controls; 39 | -------------------------------------------------------------------------------- /assets/img/icons/star-empty.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/src/js/blocks/plugin-card/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * External dependencies 3 | */ 4 | import classnames from 'classnames'; 5 | 6 | /** 7 | * Internal dependencies 8 | */ 9 | import Edit from './components/edit'; 10 | import icons from '../../utils/icons'; 11 | 12 | /** 13 | * WordPress dependencies 14 | */ 15 | const { __ } = wp.i18n; 16 | 17 | /** 18 | * Block constants 19 | */ 20 | const name = 'plugin-card'; 21 | 22 | const title = __( 'Plugin Card' ); 23 | 24 | const icon = icons.pluginCard; 25 | 26 | const keywords = [ 27 | __( 'plugin' ), 28 | __( 'w.org' ), 29 | __( 'card' ), 30 | ]; 31 | 32 | const blockAttributes = { 33 | pluginSlug: { 34 | type: 'string', 35 | default: '', 36 | }, 37 | }; 38 | 39 | const settings = { 40 | 41 | title: title, 42 | 43 | description: __( 'Display a WordPress plugin card from w.org.' ), 44 | 45 | keywords: keywords, 46 | 47 | attributes: blockAttributes, 48 | 49 | edit: Edit, 50 | 51 | save() { 52 | return null; 53 | }, 54 | }; 55 | 56 | export { name, title, icon, settings }; 57 | -------------------------------------------------------------------------------- /assets/src/scss/blocks/plugin-card/editor.scss: -------------------------------------------------------------------------------- 1 | .editor-block-list__block[data-type="machoblocks/plugin-card"] { 2 | 3 | .wp-block-machoblocks-plugin-card__placeholder { 4 | width: 100%; 5 | position: relative; 6 | 7 | .dashicon { 8 | position: absolute; 9 | left: 6px; 10 | top: 6px; 11 | } 12 | 13 | input { 14 | padding-left: 30px; 15 | padding-right: 30px; 16 | } 17 | 18 | .components-spinner { 19 | position: absolute; 20 | right: 6px; 21 | top: 6px; 22 | margin: 0; 23 | } 24 | 25 | } 26 | 27 | .wp-block-machoblocks-plugin-card__search-results { 28 | box-shadow: 0px 2px 70px 0px rgba(0, 0, 0, 0.04); 29 | background: #fff; 30 | border-bottom-left-radius: 5px; 31 | border-bottom-right-radius: 5px; 32 | 33 | > div { 34 | padding: 0.5rem; 35 | display: flex; 36 | align-items: center; 37 | cursor: pointer; 38 | border-top: 1px solid #F3F3F4; 39 | 40 | &:hover { 41 | background-color: #F3F3F4; 42 | } 43 | 44 | img { 45 | width: 40px; 46 | height: 40px; 47 | margin-right: 1rem; 48 | } 49 | 50 | } 51 | 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /assets/img/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 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 | 46 | 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "MachoBlocks", 3 | "main": "Gruntfile.js", 4 | "author": "Macho Themes", 5 | "version": "1.0.0", 6 | "license": "GPL v3", 7 | "scripts": { 8 | "build": "webpack", 9 | "watch": "webpack --watch", 10 | "production": "cross-env NODE_ENV=production webpack" 11 | }, 12 | "devDependencies": { 13 | "autoprefixer": "^6.7.5", 14 | "babel-core": "^6.23.1", 15 | "babel-loader": "^6.3.2", 16 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 17 | "babel-preset-es2015": "^6.13.2", 18 | "babel-preset-react": "^6.24.1", 19 | "browser-sync": "^2.18.8", 20 | "browser-sync-webpack-plugin": "^1.1.4", 21 | "classnames": "^2.2.6", 22 | "cross-env": "^3.1.4", 23 | "css-entry-webpack-plugin": "^1.0.0-beta.4", 24 | "css-loader": "^0.26.2", 25 | "cssnano": "^3.10.0", 26 | "extract-text-webpack-plugin": "^2.0.0", 27 | "grunt": "^0.4.5", 28 | "grunt-checktextdomain": "^1.0.0", 29 | "grunt-cli": "~0.1.13", 30 | "grunt-contrib-clean": "^0.7.0", 31 | "grunt-contrib-compress": "^0.14.0", 32 | "grunt-contrib-copy": "^0.8.2", 33 | "grunt-contrib-cssmin": "^0.14.0", 34 | "grunt-contrib-imagemin": "^1.0.0", 35 | "grunt-contrib-uglify": "^0.10.1", 36 | "grunt-contrib-watch": "^0.6.1", 37 | "grunt-wp-i18n": "^0.5.3", 38 | "load-grunt-tasks": "^3.3.0", 39 | "node-sass": "^4.5.0", 40 | "optimize-css-assets-webpack-plugin": "^1.3.0", 41 | "postcss-loader": "^1.3.2", 42 | "sass-loader": "^6.0.2", 43 | "style-loader": "^0.13.2", 44 | "webpack": "^2.2.1" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /assets/src/scss/blocks/click-to-tweet/style.scss: -------------------------------------------------------------------------------- 1 | .wp-block-machoblocks-click-to-tweet { 2 | border-radius: 6px; 3 | margin-bottom: 1.9em; 4 | position: relative; 5 | border: 1px solid transparent; 6 | 7 | &__text { 8 | margin-bottom: 0; 9 | position: relative; 10 | 11 | a { 12 | box-shadow: none !important; 13 | text-decoration: none !important; 14 | } 15 | } 16 | 17 | &__twitter-btn:not(.has-button-color) { 18 | background: #1da1f2; 19 | } 20 | 21 | &__twitter-btn { 22 | appearance: none; 23 | border-radius: 6px; 24 | border: none; 25 | box-shadow: none !important; 26 | color: #fff !important; 27 | cursor: pointer; 28 | display: inline-block; 29 | font-size: 13px; 30 | font-style: normal; 31 | font-weight: 400; 32 | line-height: 1.8; 33 | margin-top: 10px; 34 | padding: 0.28em 1em; 35 | position: relative; 36 | text-decoration: none !important; 37 | white-space: normal; 38 | word-break: break-all; 39 | 40 | &::before { 41 | content: ""; 42 | display: inline-block; 43 | height: 18px; 44 | margin-right: 5px; 45 | background:url(../img/icons/twitter.svg) no-repeat 50% 50%; 46 | background-size: cover; 47 | position: relative; 48 | top: 4px; 49 | width: 18px; 50 | } 51 | 52 | &:active::before { 53 | animation: pulse 200ms; 54 | animation-timing-function: ease-out; 55 | animation-fill-mode: none; 56 | } 57 | } 58 | 59 | @keyframes pulse { 60 | 0% { 61 | transform: scale(1); 62 | } 63 | 64 | 15% { 65 | transform: scale(0.9); 66 | } 67 | 68 | 100% { 69 | transform: scale(1); 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /includes/class-mb-gutenberg.php: -------------------------------------------------------------------------------- 1 | 'machoblocks', 25 | 'title' => __( 'MachoBlocks', 'macho-blocks' ), 26 | ), 27 | ) 28 | ); 29 | } 30 | 31 | public function register_blocks() { 32 | 33 | wp_register_script( 'mb-gutenberg', MB_ASSETS_JS . 'gutenberg.js', array( 'wp-blocks', 'wp-element', 'wp-editor' ) ); 34 | wp_register_style( 'mb-gutenberg-editor', MB_ASSETS_CSS . 'blocks_editor.css', array() ); 35 | wp_register_style( 'mb-gutenberg-style', MB_ASSETS_CSS . 'blocks_style.css', array() ); 36 | 37 | register_block_type( 38 | 'machoblocks/highlight', 39 | array( 40 | 'editor_script' => 'mb-gutenberg', 41 | 'editor_style' => 'mb-gutenberg-editor', 42 | 'style' => 'mb-gutenberg-style', 43 | ) 44 | ); 45 | 46 | register_block_type( 47 | 'machoblocks/click-to-tweet', 48 | array( 49 | 'editor_script' => 'mt-gutenberg', 50 | 'editor_style' => 'mt-gutenberg-editor', 51 | 'style' => 'mt-gutenberg-style', 52 | ) 53 | ); 54 | 55 | } 56 | 57 | 58 | } 59 | 60 | new MachoBlocks_Gutenberg(); 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /assets/src/js/blocks/click-to-tweet/components/controls.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Internal dependencies 3 | */ 4 | import icons from './../../../utils/icons'; 5 | 6 | /** 7 | * WordPress dependencies 8 | */ 9 | const { __ } = wp.i18n; 10 | const { Component, Fragment } = wp.element; 11 | const { Toolbar } = wp.components; 12 | const { AlignmentToolbar, BlockControls } = wp.editor; 13 | 14 | class Controls extends Component { 15 | 16 | constructor( props ) { 17 | super( ...arguments ); 18 | } 19 | 20 | render() { 21 | 22 | const { 23 | className, 24 | attributes, 25 | isSelected, 26 | setAttributes, 27 | } = this.props; 28 | 29 | const { 30 | textAlign, 31 | via, 32 | } = attributes; 33 | 34 | return ( 35 | 36 | 37 | setAttributes( { textAlign: nextTextAlign } ) } 40 | /> 41 | 42 |
43 | 50 | setAttributes( { via: event.target.value } ) } 55 | placeholder={ __( 'Username' ) } 56 | type="text" 57 | value={ via } 58 | /> 59 |
60 | 61 | 62 | 63 | ); 64 | } 65 | }; 66 | 67 | export default Controls; 68 | -------------------------------------------------------------------------------- /assets/src/scss/blocks/click-to-tweet/editor.scss: -------------------------------------------------------------------------------- 1 | .editor-block-list__block[data-type="machoblocks/click-to-tweet"] { 2 | // Resolves jumpy toolbar on input focus. 3 | .components-toolbar { 4 | transform: translate3d(0, 0, 0); 5 | } 6 | } 7 | 8 | .wp-block-machoblocks-click-to-tweet { 9 | margin: 0; 10 | 11 | a { 12 | pointer-events: none; 13 | } 14 | 15 | &__twitter-btn { 16 | line-height: 34px; 17 | margin-left: 40px; 18 | margin-top: 15px; 19 | 20 | &:active::before { 21 | animation: none; 22 | } 23 | 24 | &[data-is-placeholder-visible="true"] { 25 | max-width: 128px; 26 | } 27 | } 28 | 29 | &__via { 30 | margin: 3px; 31 | padding-left: 26px !important; 32 | } 33 | 34 | &__via-label { 35 | align-items: center; 36 | display: flex; 37 | flex-basis: 0; 38 | font-size: 12px; 39 | height: 36px; 40 | left: 7px; 41 | position: absolute; 42 | white-space: nowrap; 43 | 44 | svg { 45 | color: #555d66; 46 | } 47 | } 48 | 49 | &__via-wrapper { 50 | position: relative; 51 | } 52 | 53 | //Top toolbar styling for the Twitter username field 54 | .edit-post-header-toolbar__block-toolbar &__via { 55 | border-color: #8d96a0; 56 | border-radius: 3px; 57 | box-shadow: 0 0 0 transparent; 58 | margin: 4px; 59 | padding-bottom: 3px; 60 | padding-top: 3px; 61 | 62 | @media (min-width: 1080px) { 63 | border-radius: 4px; 64 | margin: 2px 4px; 65 | padding-left: 28px !important; 66 | padding-right: 4px; 67 | } 68 | 69 | &:focus { 70 | border-color: #00a0d2; 71 | box-shadow: 0 0 0 1px #00a0d2; 72 | color: #191e23; 73 | outline-offset: -2px; 74 | outline: 2px solid transparent; 75 | } 76 | } 77 | 78 | .edit-post-header-toolbar__block-toolbar &__via-label { 79 | padding-left: 2px; 80 | 81 | @media (min-width: 1080px) { 82 | } 83 | 84 | svg { 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | //const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 | //const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 4 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 5 | const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 6 | const CssEntryPlugin = require('css-entry-webpack-plugin'); 7 | 8 | const config = { 9 | entry: { 10 | gutenberg: './assets/src/js/gutenberg.js', 11 | blocks_style: './assets/src/scss/blocks-style.scss', 12 | blocks_editor: './assets/src/scss/blocks-editor.scss', 13 | }, 14 | output: { 15 | filename: 'js/[name].js', 16 | path: path.resolve(__dirname, 'assets') 17 | }, 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.scss$/, 22 | /* use: ExtractTextPlugin.extract({ 23 | fallback: 'style-loader', */ 24 | use: ['css-loader?url=false', 'postcss-loader', 'sass-loader'] 25 | //}), 26 | }, 27 | { 28 | test: /\.js$/, 29 | exclude: /(node_modules)/, 30 | loader: 'babel-loader', 31 | } 32 | ] 33 | }, 34 | plugins: [ 35 | new CssEntryPlugin({ 36 | output: { 37 | filename: "/css/[name].css" 38 | } 39 | }), 40 | //new ExtractTextPlugin('/css/[name].css'), 41 | new BrowserSyncPlugin({ 42 | proxy: 'localhost/', 43 | port: 3000, 44 | files: [ '**/*.php' ], 45 | ghostMode: { 46 | clicks: false, 47 | location: false, 48 | forms: false, 49 | scroll: false 50 | }, 51 | injectChanges: true, 52 | logFileChanges: true, 53 | logLevel: 'debug', 54 | logPrefix: 'wepback', 55 | notify: false, 56 | reloadDelay: 0 57 | }) 58 | ] 59 | }; 60 | 61 | //If true JS and CSS files will be minified 62 | if (process.env.NODE_ENV === 'production') { 63 | config.plugins.push( 64 | //new UglifyJSPlugin(), 65 | new OptimizeCssAssetsPlugin() 66 | ); 67 | } 68 | 69 | module.exports = config; 70 | -------------------------------------------------------------------------------- /machoblocks.php: -------------------------------------------------------------------------------- 1 | setup_constants(); 31 | self::$instance->includes(); 32 | 33 | add_action( 'init', array( self::$instance, 'init' ) ); 34 | } 35 | 36 | return self::$instance; 37 | } 38 | 39 | /** 40 | * Setup plugin constants 41 | * 42 | * @access private 43 | * @return void 44 | */ 45 | private function setup_constants() { 46 | defined( 'MB_DIR' ) || define( 'MB_DIR', plugin_dir_path( __FILE__ ) ); 47 | defined( 'MB_URL' ) || define( 'MB_URL', plugin_dir_url( __FILE__ ) ); 48 | 49 | defined( 'MB_INC' ) || define( 'MB_INC', MB_DIR . 'includes/' ); 50 | 51 | defined( 'MB_ASSETS_CSS' ) || define( 'MB_ASSETS_CSS', MB_URL . 'assets/css/' ); 52 | defined( 'MB_ASSETS_JS' ) || define( 'MB_ASSETS_JS', MB_URL . 'assets/js/' ); 53 | defined( 'MB_ASSETS_SRC' ) || define( 'MB_ASSETS_SRC', MB_URL . 'assets/src/' ); 54 | } 55 | 56 | /** 57 | * Instantiate our classes. 58 | */ 59 | public function init() { 60 | 61 | //echo 'init'; 62 | } 63 | 64 | /** 65 | * Include required files 66 | */ 67 | private function includes() { 68 | require_once MB_INC . 'class-mb-gutenberg.php'; 69 | require_once MB_INC . 'class-mb-rest.php'; 70 | require_once MB_INC . '/blocks/class-mb-plugin-card.php'; 71 | } 72 | 73 | 74 | } 75 | 76 | function WPMST() { 77 | return MachoBlocks::instance(); 78 | } 79 | 80 | // Get plugin running 81 | WPMST(); 82 | -------------------------------------------------------------------------------- /assets/src/scss/blocks/plugin-card/style.scss: -------------------------------------------------------------------------------- 1 | .wp-block-machoblocks-plugin-card { 2 | margin-bottom: 1rem; 3 | border-radius: 10px; 4 | box-shadow: -3px 2px 70px 0px rgba(0, 0, 0, 0.07); 5 | } 6 | 7 | .wp-block-machoblocks-plugin-card__details { 8 | padding: 1.5rem; 9 | border-top-left-radius: inherit; 10 | border-top-right-radius: inherit; 11 | background-color: #fff; 12 | display: flex; 13 | justify-content: space-between; 14 | 15 | > div:first-child { 16 | width: 128px; 17 | } 18 | 19 | > div:last-child { 20 | //background: green; 21 | width: calc(100% - 128px); 22 | padding-left: 2rem; 23 | } 24 | } 25 | 26 | .wp-block-machoblocks-plugin-card__icon { 27 | width: 128px; 28 | height: 128px; 29 | margin-bottom: 0; 30 | display: block; 31 | border-radius: 0.2rem; 32 | } 33 | 34 | 35 | .wp-block-machoblocks-plugin-card__download { 36 | padding: 0.25rem 0.5rem; 37 | background: #2ecc71; 38 | color: #fff; 39 | text-decoration: none; 40 | border-radius: 0.2rem; 41 | display: inline-block; 42 | width: 100%; 43 | text-align: center; 44 | margin-top: 0.5rem; 45 | 46 | &:hover { 47 | color: #fff; 48 | background: darken( #2ecc71, 10% ); 49 | } 50 | } 51 | 52 | .wp-block-machoblocks-plugin-card__more { 53 | padding: 0.25rem 0.5rem; 54 | background: #d2d2d2; 55 | color: #333; 56 | text-decoration: none; 57 | border-radius: 0.2rem; 58 | display: inline-block; 59 | width: 100%; 60 | text-align: center; 61 | margin-top: 0.5rem; 62 | } 63 | 64 | .wp-block-machoblocks-plugin-card__stats { 65 | padding: 1.5rem; 66 | border-top: 2px solid #f5f5f5; 67 | background-color: #fff; 68 | border-bottom-left-radius: inherit; 69 | border-bottom-right-radius: inherit; 70 | display: flex; 71 | justify-content: space-between; 72 | 73 | > div { 74 | //background: gray; 75 | padding-right: 1rem; 76 | width: 33%; 77 | text-align: center; 78 | } 79 | } 80 | 81 | .wp-block-machoblocks-plugin-card__rating { 82 | //background: red; 83 | 84 | > div { 85 | display: inline-block; 86 | width: 20px; 87 | height: 20px; 88 | } 89 | } 90 | 91 | .wp-block-machoblocks-plugin__star-full { 92 | background: url(../img/icons/star-full.svg) no-repeat 50% 50%; 93 | background-size: 100%; 94 | } 95 | 96 | .wp-block-machoblocks-plugin__star-half { 97 | background: url(../img/icons/star-half.svg) no-repeat 50% 50%; 98 | background-size: 100%; 99 | } 100 | 101 | .wp-block-machoblocks-plugin__star-empty { 102 | background: url(../img/icons/star-empty.svg) no-repeat 50% 50%; 103 | background-size: 100%; 104 | } -------------------------------------------------------------------------------- /includes/class-mb-rest.php: -------------------------------------------------------------------------------- 1 | \WP_REST_Server::READABLE, 17 | 'callback' => array( $this, 'search_plugins' ), 18 | 'args' => array( 19 | 'search' => array( 20 | 'type' => 'string', 21 | //'required' => true, 22 | //'description' => __( 'This string is required', 'machoblocks' ), 23 | ), 24 | 'slug' => array( 25 | 'type' => 'string', 26 | //'required' => true, 27 | //'description' => __( 'This string is required', 'machoblocks' ), 28 | ), 29 | ), 30 | ), 31 | ) 32 | ); 33 | 34 | } 35 | 36 | 37 | public function search_plugins( $request ) { 38 | 39 | $query = array(); 40 | 41 | require_once ABSPATH . 'wp-admin' . '/includes/plugin-install.php'; 42 | 43 | if ( $request['slug'] ) { 44 | $query['slug'] = $request['slug']; 45 | $query['per_page'] = 1; 46 | } 47 | 48 | if ( $request['search'] ) { 49 | $query['search'] = $request->get_param( 'search' ); 50 | $query['per_page'] = 6; 51 | } 52 | 53 | $query['fields'] = array( 54 | 'active_installs' => true, 55 | 'added' => false, 56 | 'donate_link' => false, 57 | 'downloadlink' => true, 58 | 'homepage' => true, 59 | 'icons' => true, 60 | 'last_updated' => false, 61 | 'requires' => true, 62 | 'requires_php' => false, 63 | 'screenshots' => false, 64 | 'short_description' => true, 65 | 'slug' => false, 66 | 'sections' => false, 67 | 'requires' => false, 68 | 'rating' => true, 69 | 'ratings' => false, 70 | ); 71 | 72 | if ( $query['slug'] ) { 73 | $results = plugins_api( 'plugin_information', $query ); 74 | } 75 | 76 | if ( $query['search'] ) { 77 | $results = plugins_api( 'query_plugins', $query ); 78 | } 79 | 80 | if ( is_wp_error( $results ) ) { 81 | $return = array( 82 | 'success' => false, 83 | 'data' => esc_html__( 'Error', 'machoblocks' ), 84 | ); 85 | return $return; 86 | } 87 | 88 | $return = array( 89 | 'success' => true, 90 | 'data' => $results, 91 | ); 92 | 93 | return rest_ensure_response( $return ); 94 | } 95 | 96 | 97 | } 98 | 99 | new MachoBlocks_Rest(); 100 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /assets/src/js/blocks/highlight/components/inspector.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Internal dependencies 3 | */ 4 | import applyWithColors from './colors'; 5 | 6 | /** 7 | * WordPress dependencies 8 | */ 9 | const { __ } = wp.i18n; 10 | const { Component, Fragment } = wp.element; 11 | const { compose } = wp.compose; 12 | const { InspectorControls, ContrastChecker, PanelColorSettings, FontSizePicker, withFontSizes } = wp.editor; 13 | const { PanelBody, withFallbackStyles } = wp.components; 14 | 15 | /** 16 | * Contrast checker 17 | */ 18 | const { getComputedStyle } = window; 19 | 20 | const ContrastCheckerWithFallbackStyles = withFallbackStyles( ( node, ownProps ) => { 21 | const { textColor, backgroundColor, fontSize, customFontSize } = ownProps; 22 | //avoid the use of querySelector if textColor color is known and verify if node is available. 23 | const textNode = ! textColor && node ? node.querySelector( '[contenteditable="true"]' ) : null; 24 | return { 25 | fallbackBackgroundColor: backgroundColor || ! node ? undefined : getComputedStyle( node ).backgroundColor, 26 | fallbackTextColor: textColor || ! textNode ? undefined : getComputedStyle( textNode ).color, 27 | fallbackFontSize: fontSize || customFontSize || ! computedStyles ? undefined : parseInt( computedStyles.fontSize ) || undefined, 28 | }; 29 | } )( ContrastChecker ); 30 | 31 | /** 32 | * Inspector controls 33 | */ 34 | class Inspector extends Component { 35 | 36 | constructor( props ) { 37 | super( ...arguments ); 38 | } 39 | 40 | render() { 41 | 42 | const { 43 | attributes, 44 | backgroundColor, 45 | textColor, 46 | setBackgroundColor, 47 | setTextColor, 48 | setAttributes, 49 | fallbackBackgroundColor, 50 | fallbackTextColor, 51 | setFontSize, 52 | fallbackFontSize, 53 | fontSize, 54 | } = this.props; 55 | 56 | return ( 57 | 58 | 59 | 60 | 65 | 66 | 82 | 90 | 91 | 92 | 93 | ); 94 | } 95 | }; 96 | 97 | export default compose( [ 98 | applyWithColors, 99 | ] )( Inspector ); 100 | -------------------------------------------------------------------------------- /assets/src/js/blocks/click-to-tweet/components/inspector.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Internal dependencies 3 | */ 4 | import applyWithColors from './colors'; 5 | 6 | /** 7 | * WordPress dependencies 8 | */ 9 | const { __ } = wp.i18n; 10 | const { Component, Fragment } = wp.element; 11 | const { compose } = wp.compose; 12 | const { InspectorControls, ContrastChecker, PanelColorSettings, FontSizePicker, withFontSizes } = wp.editor; 13 | const { PanelBody, withFallbackStyles } = wp.components; 14 | 15 | /** 16 | * Contrast checker 17 | */ 18 | const { getComputedStyle } = window; 19 | 20 | const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => { 21 | const { textColor, buttonColor, fontSize, customFontSize } = ownProps.attributes; 22 | const editableNode = node.querySelector( '[contenteditable="true"]' ); 23 | //verify if editableNode is available, before using getComputedStyle. 24 | const computedStyles = editableNode ? getComputedStyle( editableNode ) : null; 25 | return { 26 | fallbackButtonColor: buttonColor || ! computedStyles ? undefined : computedStyles.buttonColor, 27 | fallbackTextColor: textColor || ! computedStyles ? undefined : computedStyles.color, 28 | fallbackFontSize: fontSize || customFontSize || ! computedStyles ? undefined : parseInt( computedStyles.fontSize ) || undefined, 29 | }; 30 | } ); 31 | 32 | /** 33 | * Inspector controls 34 | */ 35 | class Inspector extends Component { 36 | 37 | constructor( props ) { 38 | super( ...arguments ); 39 | } 40 | 41 | render() { 42 | 43 | const { 44 | attributes, 45 | buttonColor, 46 | fallbackButtonColor, 47 | fallbackFontSize, 48 | fallbackTextColor, 49 | fontSize, 50 | isSelected, 51 | setAttributes, 52 | setButtonColor, 53 | setFontSize, 54 | setTextColor, 55 | textColor, 56 | } = this.props; 57 | 58 | return ( 59 | 60 | 61 | 62 | 67 | 68 | 84 | 92 | 93 | 94 | 95 | ); 96 | } 97 | } 98 | 99 | export default compose( [ 100 | applyWithColors, 101 | applyFallbackStyles, 102 | withFontSizes( 'fontSize' ), 103 | ] )( Inspector ); 104 | -------------------------------------------------------------------------------- /assets/src/js/blocks/click-to-tweet/components/edit.js: -------------------------------------------------------------------------------- 1 | /** 2 | * External dependencies 3 | */ 4 | import classnames from 'classnames'; 5 | 6 | /** 7 | * Internal dependencies 8 | */ 9 | import applyWithColors from './colors'; 10 | import Inspector from './inspector'; 11 | import Controls from './controls'; 12 | 13 | /** 14 | * WordPress dependencies 15 | */ 16 | const { __ } = wp.i18n; 17 | const { Component, Fragment } = wp.element; 18 | const { compose } = wp.compose; 19 | const { RichText, withFontSizes } = wp.editor; 20 | const { withSelect } = wp.data; 21 | 22 | /** 23 | * Block constants 24 | */ 25 | const applyWithSelect = withSelect( ( select ) => { 26 | const { getPermalink } = select( 'core/editor' ); 27 | 28 | return { 29 | postLink: getPermalink(), 30 | }; 31 | } ); 32 | 33 | /** 34 | * Block edit function 35 | */ 36 | class Edit extends Component { 37 | 38 | constructor() { 39 | super( ...arguments ); 40 | } 41 | 42 | componentWillReceiveProps( { postLink } ) { 43 | if ( postLink ) { 44 | this.props.setAttributes( { 45 | url: postLink 46 | } ); 47 | } 48 | } 49 | 50 | render() { 51 | const { 52 | attributes, 53 | buttonColor, 54 | className, 55 | isSelected, 56 | setAttributes, 57 | setButtonColor, 58 | setTextColor, 59 | textColor, 60 | fallbackButtonColor, 61 | fallbackTextColor, 62 | fallbackFontSize, 63 | fontSize, 64 | onReplace, 65 | } = this.props; 66 | 67 | const { 68 | buttonText, 69 | content, 70 | url, 71 | via, 72 | textAlign, 73 | } = attributes; 74 | 75 | return [ 76 | 77 | { isSelected && ( 78 | 81 | ) } 82 | { isSelected && ( 83 | 86 | ) } 87 |
88 | setAttributes( { content: nextContent } ) } 107 | keepPlaceholderOnFocus 108 | onRemove={ ( forward ) => { 109 | const hasEmptyTweet = content.length === 0 || content.length === 1; 110 | 111 | if ( ! forward && hasEmptyTweet ) { 112 | onReplace( [] ); 113 | } 114 | } } 115 | /> 116 | setAttributes( { buttonText: nextButtonText } ) } 132 | keepPlaceholderOnFocus 133 | /> 134 |
135 | 136 | ]; 137 | } 138 | }; 139 | 140 | export default compose( [ 141 | applyWithSelect, 142 | applyWithColors, 143 | withFontSizes( 'fontSize' ), 144 | ] )( Edit ); -------------------------------------------------------------------------------- /assets/css/blocks_editor.css: -------------------------------------------------------------------------------- 1 | .editor-block-list__block[data-type="machoblocks/highlight"] { 2 | background: transparent !important; } 3 | 4 | .editor-block-list__block[data-type="machoblocks/click-to-tweet"] .components-toolbar { 5 | transform: translate3d(0, 0, 0); } 6 | 7 | .wp-block-machoblocks-click-to-tweet { 8 | margin: 0; } 9 | .wp-block-machoblocks-click-to-tweet a { 10 | pointer-events: none; } 11 | .wp-block-machoblocks-click-to-tweet__twitter-btn { 12 | line-height: 34px; 13 | margin-left: 40px; 14 | margin-top: 15px; } 15 | .wp-block-machoblocks-click-to-tweet__twitter-btn:active::before { 16 | animation: none; } 17 | .wp-block-machoblocks-click-to-tweet__twitter-btn[data-is-placeholder-visible="true"] { 18 | max-width: 128px; } 19 | .wp-block-machoblocks-click-to-tweet__via { 20 | margin: 3px; 21 | padding-left: 26px !important; } 22 | .wp-block-machoblocks-click-to-tweet__via-label { 23 | -ms-flex-align: center; 24 | align-items: center; 25 | display: -ms-flexbox; 26 | display: flex; 27 | -ms-flex-preferred-size: 0; 28 | flex-basis: 0; 29 | font-size: 12px; 30 | height: 36px; 31 | left: 7px; 32 | position: absolute; 33 | white-space: nowrap; } 34 | .wp-block-machoblocks-click-to-tweet__via-label svg { 35 | color: #555d66; } 36 | .wp-block-machoblocks-click-to-tweet__via-wrapper { 37 | position: relative; } 38 | .edit-post-header-toolbar__block-toolbar .wp-block-machoblocks-click-to-tweet__via { 39 | border-color: #8d96a0; 40 | border-radius: 3px; 41 | box-shadow: 0 0 0 transparent; 42 | margin: 4px; 43 | padding-bottom: 3px; 44 | padding-top: 3px; } 45 | @media (min-width: 1080px) { 46 | .edit-post-header-toolbar__block-toolbar .wp-block-machoblocks-click-to-tweet__via { 47 | border-radius: 4px; 48 | margin: 2px 4px; 49 | padding-left: 28px !important; 50 | padding-right: 4px; } } 51 | .edit-post-header-toolbar__block-toolbar .wp-block-machoblocks-click-to-tweet__via:focus { 52 | border-color: #00a0d2; 53 | box-shadow: 0 0 0 1px #00a0d2; 54 | color: #191e23; 55 | outline-offset: -2px; 56 | outline: 2px solid transparent; } 57 | .edit-post-header-toolbar__block-toolbar .wp-block-machoblocks-click-to-tweet__via-label { 58 | padding-left: 2px; } 59 | 60 | .editor-block-list__block[data-type="machoblocks/plugin-card"] .wp-block-machoblocks-plugin-card__placeholder { 61 | width: 100%; 62 | position: relative; } 63 | .editor-block-list__block[data-type="machoblocks/plugin-card"] .wp-block-machoblocks-plugin-card__placeholder .dashicon { 64 | position: absolute; 65 | left: 6px; 66 | top: 6px; } 67 | .editor-block-list__block[data-type="machoblocks/plugin-card"] .wp-block-machoblocks-plugin-card__placeholder input { 68 | padding-left: 30px; 69 | padding-right: 30px; } 70 | .editor-block-list__block[data-type="machoblocks/plugin-card"] .wp-block-machoblocks-plugin-card__placeholder .components-spinner { 71 | position: absolute; 72 | right: 6px; 73 | top: 6px; 74 | margin: 0; } 75 | 76 | .editor-block-list__block[data-type="machoblocks/plugin-card"] .wp-block-machoblocks-plugin-card__search-results { 77 | box-shadow: 0px 2px 70px 0px rgba(0, 0, 0, 0.04); 78 | background: #fff; 79 | border-bottom-left-radius: 5px; 80 | border-bottom-right-radius: 5px; } 81 | .editor-block-list__block[data-type="machoblocks/plugin-card"] .wp-block-machoblocks-plugin-card__search-results > div { 82 | padding: 0.5rem; 83 | display: -ms-flexbox; 84 | display: flex; 85 | -ms-flex-align: center; 86 | align-items: center; 87 | cursor: pointer; 88 | border-top: 1px solid #F3F3F4; } 89 | .editor-block-list__block[data-type="machoblocks/plugin-card"] .wp-block-machoblocks-plugin-card__search-results > div:hover { 90 | background-color: #F3F3F4; } 91 | .editor-block-list__block[data-type="machoblocks/plugin-card"] .wp-block-machoblocks-plugin-card__search-results > div img { 92 | width: 40px; 93 | height: 40px; 94 | margin-right: 1rem; } 95 | -------------------------------------------------------------------------------- /assets/src/js/blocks/highlight/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * External dependencies 3 | */ 4 | import classnames from 'classnames'; 5 | 6 | /** 7 | * Internal dependencies 8 | */ 9 | import Edit from './components/edit'; 10 | import icons from '../../utils/icons'; 11 | 12 | /** 13 | * WordPress dependencies 14 | */ 15 | const { __ } = wp.i18n; 16 | const { createBlock } = wp.blocks; 17 | const { RichText, getColorClassName, getFontSizeClass } = wp.editor; 18 | 19 | /** 20 | * Block constants 21 | */ 22 | const name = 'highlight'; 23 | 24 | const title = __( 'Highlight' ); 25 | 26 | const icon = icons.highlight; 27 | 28 | const keywords = [ 29 | __( 'text' ), 30 | __( 'paragraph' ), 31 | __( 'highlight' ), 32 | ]; 33 | 34 | const blockAttributes = { 35 | content: { 36 | type: 'string', 37 | source: 'html', 38 | selector: 'mark', 39 | }, 40 | align: { 41 | type: 'string', 42 | }, 43 | backgroundColor: { 44 | type: 'string', 45 | }, 46 | textColor: { 47 | type: 'string', 48 | }, 49 | customBackgroundColor: { 50 | type: 'string', 51 | }, 52 | customTextColor: { 53 | type: 'string', 54 | }, 55 | fontSize: { 56 | type: 'string', 57 | }, 58 | customFontSize: { 59 | type: 'number', 60 | }, 61 | }; 62 | 63 | const settings = { 64 | 65 | title: title, 66 | 67 | description: __( 'Highlight text.' ), 68 | 69 | keywords: keywords, 70 | 71 | attributes: blockAttributes, 72 | 73 | transforms: { 74 | from: [ 75 | { 76 | type: 'block', 77 | blocks: [ 'core/paragraph' ], 78 | transform: ( { content } ) => { 79 | return createBlock( `machoblocks/${ name }`, { 80 | content, 81 | } ); 82 | }, 83 | }, 84 | { 85 | type: 'raw', 86 | selector: 'div.wp-block-machoblocks-highlight', 87 | schema: { 88 | div: { 89 | classes: [ 'wp-block-machoblocks-highlight' ], 90 | }, 91 | }, 92 | }, 93 | { 94 | type: 'prefix', 95 | prefix: ':highlight', 96 | transform: function( content ) { 97 | return createBlock( `machoblocks/${ name }`, { 98 | content, 99 | } ); 100 | }, 101 | }, 102 | ], 103 | to: [ 104 | { 105 | type: 'block', 106 | blocks: [ 'core/paragraph' ], 107 | transform: ( { content } ) => { 108 | // transforming an empty block 109 | if ( ! content || ! content.length ) { 110 | return createBlock( 'core/paragraph' ); 111 | } 112 | // transforming a block with content 113 | return createBlock( 'core/paragraph', { 114 | content: content, 115 | } ); 116 | }, 117 | }, 118 | ], 119 | }, 120 | 121 | edit: Edit, 122 | 123 | save( { attributes } ) { 124 | 125 | const { 126 | backgroundColor, 127 | content, 128 | customBackgroundColor, 129 | customFontSize, 130 | customTextColor, 131 | fontSize, 132 | textAlign, 133 | textColor, 134 | } = attributes; 135 | 136 | const textClass = getColorClassName( 'color', textColor ); 137 | 138 | const backgroundClass = getColorClassName( 'background-color', backgroundColor ); 139 | 140 | const fontSizeClass = getFontSizeClass( fontSize ); 141 | 142 | const classes = classnames( 'wp-block-machoblocks-highlight__content', { 143 | 'has-text-color': textColor || customTextColor, 144 | [ textClass ]: textClass, 145 | 'has-background': backgroundColor || customBackgroundColor, 146 | [ backgroundClass ]: backgroundClass, 147 | [ fontSizeClass ]: fontSizeClass, 148 | } ); 149 | 150 | const styles = { 151 | backgroundColor: backgroundClass ? undefined : customBackgroundColor, 152 | color: textClass ? undefined : customTextColor, 153 | fontSize: fontSizeClass ? undefined : customFontSize, 154 | }; 155 | 156 | return ( 157 |

158 | { ! RichText.isEmpty( content ) && ( 159 | 165 | ) } 166 |

167 | ); 168 | }, 169 | }; 170 | 171 | export { name, title, icon, settings }; 172 | -------------------------------------------------------------------------------- /assets/src/js/blocks/highlight/components/edit.js: -------------------------------------------------------------------------------- 1 | /** 2 | * External dependencies 3 | */ 4 | import classnames from 'classnames'; 5 | 6 | /** 7 | * Internal dependencies 8 | */ 9 | import applyWithColors from './colors'; 10 | import Controls from './controls'; 11 | import Inspector from './inspector'; 12 | 13 | /** 14 | * WordPress dependencies 15 | */ 16 | const { __ } = wp.i18n; 17 | const { Component, Fragment } = wp.element; 18 | const { compose } = wp.compose; 19 | const { RichText, withFontSizes } = wp.editor; 20 | const { createBlock } = wp.blocks; 21 | 22 | /** 23 | * Block edit function 24 | */ 25 | class Edit extends Component { 26 | 27 | constructor( props ) { 28 | super( ...arguments ); 29 | this.splitBlock = this.splitBlock.bind( this ); 30 | } 31 | 32 | /** 33 | * Split handler for RichText value, namely when content is pasted or the 34 | * user presses the Enter key. 35 | * 36 | * @param {?Array} before Optional before value, to be used as content 37 | * in place of what exists currently for the 38 | * block. If undefined, the block is deleted. 39 | * @param {?Array} after Optional after value, to be appended in a new 40 | * paragraph block to the set of blocks passed 41 | * as spread. 42 | * @param {...WPBlock} blocks Optional blocks inserted between the before 43 | * and after value blocks. 44 | */ 45 | splitBlock( before, after, ...blocks ) { 46 | const { 47 | attributes, 48 | insertBlocksAfter, 49 | setAttributes, 50 | onReplace, 51 | } = this.props; 52 | 53 | if ( after ) { 54 | // Append "After" content as a new paragraph block to the end of 55 | // any other blocks being inserted after the current paragraph. 56 | blocks.push( createBlock( 'core/paragraph', { content: after } ) ); 57 | } 58 | 59 | if ( blocks.length && insertBlocksAfter ) { 60 | insertBlocksAfter( blocks ); 61 | } 62 | 63 | const { content } = attributes; 64 | 65 | if ( ! before ) { 66 | // If before content is omitted, treat as intent to delete block. 67 | onReplace( [] ); 68 | } else if ( content !== before ) { 69 | // Only update content if it has in-fact changed. In case that user 70 | // has created a new paragraph at end of an existing one, the value 71 | // of before will be strictly equal to the current content. 72 | setAttributes( { content: before } ); 73 | } 74 | } 75 | 76 | render() { 77 | 78 | const { 79 | attributes, 80 | backgroundColor, 81 | className, 82 | insertBlocksAfter, 83 | isSelected, 84 | mergeBlocks, 85 | onReplace, 86 | setAttributes, 87 | setBackgroundColor, 88 | setTextColor, 89 | textColor, 90 | fallbackFontSize, 91 | fontSize, 92 | } = this.props; 93 | 94 | const { 95 | content, 96 | textAlign, 97 | } = attributes; 98 | 99 | return [ 100 | 101 | { isSelected && ( 102 | 105 | ) } 106 | { isSelected && ( 107 | 110 | ) } 111 |

112 | setAttributes( { content: value } ) } 117 | onMerge={ mergeBlocks } 118 | onSplit={ this.splitBlock } 119 | onRemove={ () => onReplace( [] ) } 120 | className={ classnames( 121 | `${ className }__content`, { 122 | 'has-background': backgroundColor.color, 123 | [ backgroundColor.class ]: backgroundColor.class, 124 | 'has-text-color': textColor.color, 125 | [ textColor.class ]: textColor.class, 126 | [ fontSize.class ]: fontSize.class, 127 | } 128 | ) } 129 | style={ { 130 | backgroundColor: backgroundColor.color, 131 | color: textColor.color, 132 | fontSize: fontSize.size ? fontSize.size + 'px' : undefined, 133 | } } 134 | keepPlaceholderOnFocus 135 | /> 136 |

137 | 138 | ]; 139 | } 140 | }; 141 | 142 | export default compose( [ 143 | applyWithColors, 144 | withFontSizes( 'fontSize' ), 145 | ] )( Edit ); 146 | -------------------------------------------------------------------------------- /includes/blocks/class-mb-plugin-card.php: -------------------------------------------------------------------------------- 1 | 'mt-gutenberg', 19 | 'editor_style' => 'mt-gutenberg-editor', 20 | 'style' => 'mt-gutenberg-style', 21 | 'render_callback' => array( $this, 'render_block' ), 22 | ) 23 | ); 24 | } 25 | 26 | public function render_block( $atts ) { 27 | 28 | if( ! isset( $atts['pluginSlug'] ) ) { 29 | return; 30 | } 31 | 32 | $plugins = MachoBlocks_Rest::search_plugins( array( 'slug' => $atts['pluginSlug'] ) ); 33 | $plugin = (array) $plugins->data['data']; 34 | 35 | ob_start(); 36 | ?> 37 |
38 |
39 |
40 | <?php echo esc_attr( $plugin['name'] ); ?> 41 | Download 42 | Learn More 43 |
44 |
45 |
46 |

47 |
48 |
49 | by 50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 |
60 | 61 |
62 | 63 |
64 |
65 |
66 | 67 |
68 |
69 |
70 | 71 |
72 | 1000000000 ) { 101 | return round( ( $n / 1000000000 ), 2 ) . '+' . ' billion'; 102 | } elseif ( $n > 1000000 ) { 103 | return round( ( $n / 1000000 ), 2 ) . '+' . ' million'; 104 | } 105 | 106 | return number_format( $n ) . '+'; 107 | } 108 | 109 | public function get_stars( $rating ) { 110 | $rating = round( $rating / 10, 0 ) / 2; 111 | 112 | $full_stars = floor( $rating ); 113 | $half_stars = ceil( $rating - $full_stars ); 114 | $empty_stars = 5 - $full_stars - $half_stars; 115 | 116 | $output = ''; 117 | $output .= str_repeat( '', $full_stars ); 118 | $output .= str_repeat( '', $half_stars ); 119 | $output .= str_repeat( '', $empty_stars ); 120 | return $output; 121 | } 122 | 123 | } 124 | 125 | new MachoBlocks_Plugin_Card(); 126 | 127 | 128 | 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /assets/css/blocks_style.css: -------------------------------------------------------------------------------- 1 | .wp-block-machoblocks-highlight { 2 | background: transparent !important; } 3 | .wp-block-machoblocks-highlight:empty { 4 | display: none; } 5 | .wp-block-machoblocks-highlight + .wp-block-machoblocks-highlight { 6 | padding-top: 7px; } 7 | .wp-block-machoblocks-highlight__content { 8 | padding: 2px 5px 2px 3px; 9 | position: relative; 10 | border-radius: 6px; } 11 | .wp-block-machoblocks-highlight__content:not(.has-background) { 12 | background-color: #f3ead1; } 13 | 14 | .wp-block-machoblocks-click-to-tweet { 15 | border-radius: 6px; 16 | margin-bottom: 1.9em; 17 | position: relative; 18 | border: 1px solid transparent; } 19 | .wp-block-machoblocks-click-to-tweet__text { 20 | margin-bottom: 0; 21 | position: relative; } 22 | .wp-block-machoblocks-click-to-tweet__text a { 23 | box-shadow: none !important; 24 | text-decoration: none !important; } 25 | .wp-block-machoblocks-click-to-tweet__twitter-btn:not(.has-button-color) { 26 | background: #1da1f2; } 27 | .wp-block-machoblocks-click-to-tweet__twitter-btn { 28 | -webkit-appearance: none; 29 | -moz-appearance: none; 30 | appearance: none; 31 | border-radius: 6px; 32 | border: none; 33 | box-shadow: none !important; 34 | color: #fff !important; 35 | cursor: pointer; 36 | display: inline-block; 37 | font-size: 13px; 38 | font-style: normal; 39 | font-weight: 400; 40 | line-height: 1.8; 41 | margin-top: 10px; 42 | padding: 0.28em 1em; 43 | position: relative; 44 | text-decoration: none !important; 45 | white-space: normal; 46 | word-break: break-all; } 47 | .wp-block-machoblocks-click-to-tweet__twitter-btn::before { 48 | content: ""; 49 | display: inline-block; 50 | height: 18px; 51 | margin-right: 5px; 52 | background: url(../img/icons/twitter.svg) no-repeat 50% 50%; 53 | background-size: cover; 54 | position: relative; 55 | top: 4px; 56 | width: 18px; } 57 | .wp-block-machoblocks-click-to-tweet__twitter-btn:active::before { 58 | animation: pulse 200ms; 59 | animation-timing-function: ease-out; 60 | animation-fill-mode: none; } 61 | 62 | @keyframes pulse { 63 | 0% { 64 | transform: scale(1); } 65 | 15% { 66 | transform: scale(0.9); } 67 | 100% { 68 | transform: scale(1); } } 69 | 70 | .wp-block-machoblocks-plugin-card { 71 | margin-bottom: 1rem; 72 | border-radius: 10px; 73 | box-shadow: -3px 2px 70px 0px rgba(0, 0, 0, 0.07); } 74 | 75 | .wp-block-machoblocks-plugin-card__details { 76 | padding: 1.5rem; 77 | border-top-left-radius: inherit; 78 | border-top-right-radius: inherit; 79 | background-color: #fff; 80 | display: -ms-flexbox; 81 | display: flex; 82 | -ms-flex-pack: justify; 83 | justify-content: space-between; } 84 | .wp-block-machoblocks-plugin-card__details > div:first-child { 85 | width: 128px; } 86 | .wp-block-machoblocks-plugin-card__details > div:last-child { 87 | width: calc(100% - 128px); 88 | padding-left: 2rem; } 89 | 90 | .wp-block-machoblocks-plugin-card__icon { 91 | width: 128px; 92 | height: 128px; 93 | margin-bottom: 0; 94 | display: block; 95 | border-radius: 0.2rem; } 96 | 97 | .wp-block-machoblocks-plugin-card__download { 98 | padding: 0.25rem 0.5rem; 99 | background: #2ecc71; 100 | color: #fff; 101 | text-decoration: none; 102 | border-radius: 0.2rem; 103 | display: inline-block; 104 | width: 100%; 105 | text-align: center; 106 | margin-top: 0.5rem; } 107 | .wp-block-machoblocks-plugin-card__download:hover { 108 | color: #fff; 109 | background: #25a25a; } 110 | 111 | .wp-block-machoblocks-plugin-card__more { 112 | padding: 0.25rem 0.5rem; 113 | background: #d2d2d2; 114 | color: #333; 115 | text-decoration: none; 116 | border-radius: 0.2rem; 117 | display: inline-block; 118 | width: 100%; 119 | text-align: center; 120 | margin-top: 0.5rem; } 121 | 122 | .wp-block-machoblocks-plugin-card__stats { 123 | padding: 1.5rem; 124 | border-top: 2px solid #f5f5f5; 125 | background-color: #fff; 126 | border-bottom-left-radius: inherit; 127 | border-bottom-right-radius: inherit; 128 | display: -ms-flexbox; 129 | display: flex; 130 | -ms-flex-pack: justify; 131 | justify-content: space-between; } 132 | .wp-block-machoblocks-plugin-card__stats > div { 133 | padding-right: 1rem; 134 | width: 33%; 135 | text-align: center; } 136 | 137 | .wp-block-machoblocks-plugin-card__rating > div { 138 | display: inline-block; 139 | width: 20px; 140 | height: 20px; } 141 | 142 | .wp-block-machoblocks-plugin__star-full { 143 | background: url(../img/icons/star-full.svg) no-repeat 50% 50%; 144 | background-size: 100%; } 145 | 146 | .wp-block-machoblocks-plugin__star-half { 147 | background: url(../img/icons/star-half.svg) no-repeat 50% 50%; 148 | background-size: 100%; } 149 | 150 | .wp-block-machoblocks-plugin__star-empty { 151 | background: url(../img/icons/star-empty.svg) no-repeat 50% 50%; 152 | background-size: 100%; } 153 | -------------------------------------------------------------------------------- /assets/src/js/blocks/click-to-tweet/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * External dependencies 3 | */ 4 | import classnames from 'classnames'; 5 | 6 | /** 7 | * Internal dependencies 8 | */ 9 | import Edit from './components/edit'; 10 | import icons from '../../utils/icons'; 11 | 12 | /** 13 | * WordPress dependencies 14 | */ 15 | const { __ } = wp.i18n; 16 | const { createBlock } = wp.blocks; 17 | const { RichText, getColorClassName, getFontSizeClass } = wp.editor; 18 | const { split, create, toHTMLString } = wp.richText; 19 | 20 | /** 21 | * Block constants 22 | */ 23 | const name = 'click-to-tweet'; 24 | 25 | const title = __( 'Click to Tweet' ); 26 | 27 | const icon = icons.twitter; 28 | 29 | const keywords = [ 30 | __( 'share' ), 31 | __( 'twitter' ), 32 | __( 'click to tweet' ), 33 | ]; 34 | 35 | const blockAttributes = { 36 | content: { 37 | type: 'string', 38 | source: 'html', 39 | selector: 'p', 40 | default: [], 41 | }, 42 | url: { 43 | type: 'attribute', 44 | }, 45 | textAlign: { 46 | type: 'string', 47 | }, 48 | via: { 49 | type: 'string', 50 | }, 51 | buttonText: { 52 | type: 'string', 53 | default: __( 'Tweet' ), 54 | }, 55 | buttonColor: { 56 | type: 'string', 57 | }, 58 | textColor: { 59 | type: 'string', 60 | }, 61 | customButtonColor: { 62 | type: 'string', 63 | }, 64 | customTextColor: { 65 | type: 'string', 66 | }, 67 | fontSize: { 68 | type: 'string', 69 | }, 70 | customFontSize: { 71 | type: 'number', 72 | }, 73 | }; 74 | 75 | const settings = { 76 | 77 | title: title, 78 | 79 | description: __( 'Add a quote for readers to tweet via Twitter.' ), 80 | 81 | keywords: keywords, 82 | 83 | attributes: blockAttributes, 84 | 85 | transforms: { 86 | from: [ 87 | { 88 | type: 'block', 89 | blocks: [ 'core/paragraph' ], 90 | transform: ( { content } ) => createBlock( `machoblocks/${ name }`, { 91 | content: content, 92 | } ), 93 | }, 94 | { 95 | type: 'block', 96 | blocks: [ 'core/pullquote' ], 97 | transform: ( { value, ...attrs } ) => { 98 | 99 | const pieces = split( create( { html: value, multilineTag: 'p' } ), '\u2028' ); 100 | 101 | return [ 102 | createBlock( `machoblocks/${ name }`, { 103 | content: toHTMLString( { value: pieces[ 0 ] } ), 104 | } ), 105 | ]; 106 | }, 107 | }, 108 | { 109 | type: 'block', 110 | blocks: [ 'core/quote' ], 111 | transform: ( { value, ...attrs } ) => { 112 | 113 | const pieces = split( create( { html: value, multilineTag: 'p' } ), '\u2028' ); 114 | 115 | return [ 116 | createBlock( `machoblocks/${ name }`, { 117 | content: toHTMLString( { value: pieces[ 0 ] } ), 118 | } ), 119 | ]; 120 | }, 121 | }, 122 | ], 123 | to: [ 124 | { 125 | type: 'block', 126 | blocks: [ 'core/paragraph' ], 127 | transform: ( { content } ) => createBlock( 'core/paragraph', { 128 | content: content, 129 | } ), 130 | }, 131 | { 132 | type: 'block', 133 | blocks: [ 'core/pullquote' ], 134 | transform: ( { content } ) => createBlock( 'core/pullquote', { 135 | value: `

${ content }

`, 136 | } ), 137 | }, 138 | { 139 | type: 'block', 140 | blocks: [ 'core/quote' ], 141 | transform: ( { content } ) => createBlock( 'core/quote', { 142 | value: `

${ content }

`, 143 | } ), 144 | }, 145 | ], 146 | }, 147 | 148 | edit: Edit, 149 | 150 | save( { attributes } ) { 151 | 152 | const { 153 | buttonColor, 154 | buttonText, 155 | customButtonColor, 156 | customTextColor, 157 | content, 158 | customFontSize, 159 | fontSize, 160 | textColor, 161 | textAlign, 162 | url, 163 | via, 164 | } = attributes; 165 | 166 | const viaUrl = via ? `&via=${via}` : ''; 167 | 168 | const tweetUrl = `http://twitter.com/share?&text=${ encodeURIComponent( content ) }&url=${url}${viaUrl}`; 169 | 170 | const textColorClass = getColorClassName( 'color', textColor ); 171 | 172 | const fontSizeClass = getFontSizeClass( fontSize ); 173 | 174 | const textClasses = classnames( 'wp-block-machoblocks-click-to-tweet__text', { 175 | 'has-text-color': textColor || customTextColor, 176 | [ fontSizeClass ]: fontSizeClass, 177 | [ textColorClass ]: textColorClass, 178 | } ); 179 | 180 | const textStyles = { 181 | fontSize: fontSizeClass ? undefined : customFontSize, 182 | color: textColorClass ? undefined : customTextColor, 183 | }; 184 | 185 | const buttonColorClass = getColorClassName( 'background-color', buttonColor ); 186 | 187 | const buttonClasses = classnames( 'wp-block-machoblocks-click-to-tweet__twitter-btn', { 188 | 'has-button-color': buttonColor || customButtonColor, 189 | [ buttonColorClass ]: buttonColorClass, 190 | } ); 191 | 192 | const buttonStyles = { 193 | backgroundColor: buttonColorClass ? undefined : customButtonColor, 194 | }; 195 | 196 | return ( 197 | ! RichText.isEmpty( content ) && ( 198 |
199 | 205 | 214 |
215 | ) 216 | ); 217 | }, 218 | }; 219 | 220 | export { name, title, icon, settings }; 221 | -------------------------------------------------------------------------------- /assets/src/js/utils/icons.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Custom icons 3 | */ 4 | const icons = {}; 5 | 6 | icons.at = 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ; 16 | 17 | icons.twitter = 18 | 19 | 20 | 21 | 28 | 29 | 30 | ; 31 | 32 | icons.pluginCard = 33 | 35 | 36 | 37 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | ; 74 | 75 | 76 | icons.highlight = 77 | 78 | 79 | 80 | 81 | export default icons; 82 | -------------------------------------------------------------------------------- /assets/src/js/blocks/plugin-card/components/edit.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Internal dependencies 3 | */ 4 | import BlockControls from './controls'; 5 | import icons from '../../../utils/icons'; 6 | 7 | /** 8 | * WordPress dependencies 9 | */ 10 | const { __ } = wp.i18n; 11 | const { Placeholder, Dashicon, TextControl, Spinner } = wp.components; 12 | const { Component, Fragment } = wp.element; 13 | 14 | /** 15 | * Block edit function 16 | */ 17 | export default class Edit extends Component { 18 | 19 | constructor( props ) { 20 | super( ...arguments ); 21 | 22 | this.state = { 23 | status: 'loading-plugin', 24 | searchInput: '', 25 | pluginList: [], 26 | } 27 | } 28 | 29 | searchPlugins( value ) { 30 | this.setState( { status: 'loading-results' } ); 31 | 32 | wp.apiFetch({ path: `machoblocks/v1/get_plugins?search='${ encodeURIComponent( value ) }` }).then( response => { 33 | this.setState({ 34 | pluginList: response.data.plugins, 35 | status: 'ready', 36 | }); 37 | }); 38 | } 39 | 40 | getPlugin( slug ) { 41 | this.setState( { status: 'loading-plugin' } ); 42 | 43 | wp.apiFetch({ path: `machoblocks/v1/get_plugins?slug='${ encodeURIComponent( slug ) }` }).then( response => { 44 | this.setPlugin( response.data ); 45 | this.setState({ status: 'ready' }); 46 | }); 47 | } 48 | 49 | setPlugin( plugin ) { 50 | this.props.setAttributes({ 51 | pluginSlug: plugin.slug, 52 | pluginName: plugin.name, 53 | pluginIcon: this.getPluginIcon( plugin ), 54 | pluginVersion: plugin.version, 55 | pluginAuthor: plugin.author, 56 | pluginRating: plugin.rating, 57 | pluginDescription: plugin.short_description, 58 | pluginActiveInstalls: plugin.active_installs, 59 | pluginDownloadLink: plugin.download_link 60 | }); 61 | } 62 | 63 | componentWillMount() { 64 | if( this.props.attributes.pluginSlug !== '' ) { 65 | this.getPlugin( this.props.attributes.pluginSlug ); 66 | } 67 | else { 68 | this.setState( { status: 'ready' } ); 69 | } 70 | } 71 | 72 | onPluginSelectClick( plugin ) { 73 | this.setPlugin( plugin ); 74 | this.setState( { pluginList: [] } ); 75 | } 76 | 77 | onSearchChange( value ){ 78 | 79 | this.setState( { searchInput: value } ); 80 | 81 | clearTimeout(this.timeout); 82 | 83 | if( value.length < 3 ) { 84 | this.setState( { pluginList: [] } ); 85 | } 86 | 87 | if( value.length >= 3 && this.state.status === 'ready' ) { 88 | this.timeout = setTimeout( () => this.searchPlugins( value ), 500 ); 89 | } 90 | } 91 | 92 | getPluginIcon( plugin ) { 93 | let icon = ''; 94 | if ( plugin.icons['2x'] ) { 95 | icon = plugin.icons['2x']; 96 | } else if ( plugin.icons['1x'] ) { 97 | icon = plugin.icons['x']; 98 | } else if ( plugin.icons.default ) { 99 | icon = plugin.icons.default; 100 | } 101 | 102 | return icon; 103 | } 104 | 105 | getNiceNumber( n ) { 106 | if ( n > 1000000000 ) { 107 | return Math.round( n / 1000000000 ) + '+' + ' billion'; 108 | } else if ( n > 1000000 ) { 109 | return Math.round( n / 1000000 ) + '+' + ' million'; 110 | } 111 | 112 | return n + '+'; 113 | } 114 | 115 | getStars( r ) { 116 | let rating = Math.round( r / 10 ) / 2; 117 | let fullStars = Math.floor( rating ); 118 | let halfStars = Math.ceil( rating - fullStars ); 119 | let emptyStars = 5 - fullStars - halfStars; 120 | 121 | let output = []; 122 | 123 | _.times( fullStars, () => { 124 | output.push(); 125 | }); 126 | 127 | _.times( halfStars, () => { 128 | output.push(); 129 | }); 130 | 131 | _.times( emptyStars, () => { 132 | output.push(); 133 | }); 134 | 135 | return output; 136 | } 137 | 138 | render() { 139 | 140 | const { status, pluginList, searchInput } = this.state; 141 | const { attributes, setAttributes, className } = this.props; 142 | const { pluginSlug, pluginName, pluginIcon, pluginVersion, pluginAuthor, pluginRating, pluginDescription, pluginActiveInstalls, pluginDownloadLink } = attributes; 143 | 144 | if ( status === 'loading-plugin' ) { 145 | return [ 146 | 150 | 151 | 152 | ]; 153 | } 154 | 155 | if( pluginSlug === '' ) { 156 | return [ 157 | 160 |
161 | 162 | { 'loading-results' === status && ( 163 | 164 | ) } 165 | this.onSearchChange( value ) } 170 | /> 171 | { pluginList.length > 0 && ( 172 |
173 | { pluginList.map( ( plugin, index ) => { 174 | return [ 175 |
this.onPluginSelectClick( plugin ) } 178 | > 179 | 180 | { plugin.name } 181 |
182 | ]; 183 | }) } 184 |
185 | ) } 186 | 187 |
188 | 189 | ]; 190 | } 191 | 192 | return [ 193 | 194 | 195 | 196 |
197 | 198 |
199 |
200 | { 201 | Download 202 |
203 |
204 |
{ pluginName }
205 |

{ pluginDescription }

206 |
207 |
208 | by 209 |
210 |
211 |
212 |
213 | 214 |
215 |
216 | { __( 'Active Installations' ) } 217 |
{ this.getNiceNumber( pluginActiveInstalls ) }
218 |
219 |
220 | { __( 'Rating' ) } 221 |
222 | { this.getStars( pluginRating ) } 223 |
224 |
225 |
226 | { __( 'Plugin Version' ) } 227 |
{ pluginVersion }
228 |
229 |
230 |
231 | 232 | ]; 233 | } 234 | }; 235 | 236 | 237 | -------------------------------------------------------------------------------- /assets/js/gutenberg.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // identity function for calling harmony imports with the correct context 37 | /******/ __webpack_require__.i = function(value) { return value; }; 38 | /******/ 39 | /******/ // define getter function for harmony exports 40 | /******/ __webpack_require__.d = function(exports, name, getter) { 41 | /******/ if(!__webpack_require__.o(exports, name)) { 42 | /******/ Object.defineProperty(exports, name, { 43 | /******/ configurable: false, 44 | /******/ enumerable: true, 45 | /******/ get: getter 46 | /******/ }); 47 | /******/ } 48 | /******/ }; 49 | /******/ 50 | /******/ // getDefaultExport function for compatibility with non-harmony modules 51 | /******/ __webpack_require__.n = function(module) { 52 | /******/ var getter = module && module.__esModule ? 53 | /******/ function getDefault() { return module['default']; } : 54 | /******/ function getModuleExports() { return module; }; 55 | /******/ __webpack_require__.d(getter, 'a', getter); 56 | /******/ return getter; 57 | /******/ }; 58 | /******/ 59 | /******/ // Object.prototype.hasOwnProperty.call 60 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 61 | /******/ 62 | /******/ // __webpack_public_path__ 63 | /******/ __webpack_require__.p = ""; 64 | /******/ 65 | /******/ // Load entry module and return exports 66 | /******/ return __webpack_require__(__webpack_require__.s = 15); 67 | /******/ }) 68 | /************************************************************************/ 69 | /******/ ([ 70 | /* 0 */ 71 | /***/ (function(module, exports, __webpack_require__) { 72 | 73 | var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! 74 | Copyright (c) 2017 Jed Watson. 75 | Licensed under the MIT License (MIT), see 76 | http://jedwatson.github.io/classnames 77 | */ 78 | /* global define */ 79 | 80 | (function () { 81 | 'use strict'; 82 | 83 | var hasOwn = {}.hasOwnProperty; 84 | 85 | function classNames () { 86 | var classes = []; 87 | 88 | for (var i = 0; i < arguments.length; i++) { 89 | var arg = arguments[i]; 90 | if (!arg) continue; 91 | 92 | var argType = typeof arg; 93 | 94 | if (argType === 'string' || argType === 'number') { 95 | classes.push(arg); 96 | } else if (Array.isArray(arg) && arg.length) { 97 | var inner = classNames.apply(null, arg); 98 | if (inner) { 99 | classes.push(inner); 100 | } 101 | } else if (argType === 'object') { 102 | for (var key in arg) { 103 | if (hasOwn.call(arg, key) && arg[key]) { 104 | classes.push(key); 105 | } 106 | } 107 | } 108 | } 109 | 110 | return classes.join(' '); 111 | } 112 | 113 | if (typeof module !== 'undefined' && module.exports) { 114 | classNames.default = classNames; 115 | module.exports = classNames; 116 | } else if (true) { 117 | // register as 'classnames', consistent with npm package name 118 | !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () { 119 | return classNames; 120 | }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), 121 | __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); 122 | } else { 123 | window.classNames = classNames; 124 | } 125 | }()); 126 | 127 | 128 | /***/ }), 129 | /* 1 */ 130 | /***/ (function(module, exports, __webpack_require__) { 131 | 132 | "use strict"; 133 | 134 | 135 | Object.defineProperty(exports, "__esModule", { 136 | value: true 137 | }); 138 | /** 139 | * WordPress dependencies 140 | */ 141 | var withColors = wp.editor.withColors; 142 | 143 | /** 144 | * Generate block colors. 145 | */ 146 | 147 | var applyWithColors = withColors('backgroundColor', { textColor: 'color' }, { buttonColor: 'background-color' }); 148 | 149 | exports.default = applyWithColors; 150 | 151 | /***/ }), 152 | /* 2 */ 153 | /***/ (function(module, exports, __webpack_require__) { 154 | 155 | "use strict"; 156 | 157 | 158 | Object.defineProperty(exports, "__esModule", { 159 | value: true 160 | }); 161 | /** 162 | * WordPress dependencies 163 | */ 164 | var withColors = wp.editor.withColors; 165 | 166 | /** 167 | * Generate block colors. 168 | */ 169 | 170 | var applyWithColors = withColors('backgroundColor', { textColor: 'color' }); 171 | 172 | exports.default = applyWithColors; 173 | 174 | /***/ }), 175 | /* 3 */ 176 | /***/ (function(module, exports, __webpack_require__) { 177 | 178 | "use strict"; 179 | 180 | 181 | Object.defineProperty(exports, "__esModule", { 182 | value: true 183 | }); 184 | /** 185 | * Custom icons 186 | */ 187 | var icons = {}; 188 | 189 | icons.at = React.createElement( 190 | "svg", 191 | { "aria-hidden": true, role: "img", focusable: "false", className: "dashicon", width: "20px", height: "20px", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" }, 192 | React.createElement( 193 | "g", 194 | { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, 195 | React.createElement( 196 | "g", 197 | { fill: "currentColor", "fill-rule": "nonzero" }, 198 | React.createElement( 199 | "g", 200 | { transform: "translate(2.000000, 2.000000)" }, 201 | React.createElement("path", { d: "M8.02520581,0 L7.98776317,0 C5.86277332,-2.33459646e-05 3.82535953,0.846680002 2.32628237,2.35278409 C0.827205206,3.85888818 -0.00996089005,5.90023931 8.13151629e-20,8.02520581 C0.0199694079,12.4084909 3.69683664,15.9755263 8.19494578,15.9755263 L8.48699837,15.9755263 C9.03843834,15.9755263 9.48546877,15.5284959 9.48546877,14.9770559 C9.48546877,14.425616 9.03843834,13.9785856 8.48699837,13.9785856 L8.19494578,13.9785856 C4.7926579,13.9785856 2.01191785,11.3026849 1.99694079,8.01522111 C1.98963664,6.42160411 2.61758479,4.89075151 3.74187457,3.76130874 C4.86616435,2.63186597 6.39412944,1.99692405 7.98776317,1.99694079 L8.01522111,1.99694079 C11.3026849,2.01191785 13.9785856,4.7926579 13.9785856,8.19494578 L13.9785856,10.4839392 C13.9785856,11.0353791 13.5315551,11.4824096 12.9801152,11.4824096 C12.4286752,11.4824096 11.9816448,11.0353791 11.9816448,10.4839392 L11.9816448,7.98776317 C11.9878239,6.15815454 10.7537205,4.55679866 8.98291101,4.09664686 C7.21210152,3.63649505 5.35452376,4.43446543 4.46920407,6.03562594 C3.58388438,7.63678645 3.89577006,9.63430471 5.22705151,10.8893727 C6.55833296,12.1444407 8.57075026,12.3381632 10.1170013,11.3600969 C10.5524576,12.776278 11.9578409,13.6613354 13.4231625,13.4421927 C14.8884842,13.22305 15.9734432,11.9655554 15.9755263,10.4839392 L15.9755263,8.19494578 C15.9755263,3.69683664 12.4084909,0.0199694079 8.02520581,0 Z M7.98776317,9.98470397 C6.88488323,9.98470397 5.99082238,9.09064312 5.99082238,7.98776317 C5.99082238,6.88488323 6.88488323,5.99082238 7.98776317,5.99082238 C9.09064312,5.99082238 9.98470397,6.88488323 9.98470397,7.98776317 C9.98470397,9.09064312 9.09064312,9.98470397 7.98776317,9.98470397 Z" }) 202 | ) 203 | ) 204 | ) 205 | ); 206 | 207 | icons.twitter = React.createElement( 208 | "svg", 209 | { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 612 612", width: "20px", height: "20px" }, 210 | React.createElement( 211 | "g", 212 | null, 213 | React.createElement( 214 | "g", 215 | null, 216 | React.createElement("path", { fill: "currentColor", d: "M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411 c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513 c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101 c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104 c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194 c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485 c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z" }) 217 | ) 218 | ) 219 | ); 220 | 221 | icons.pluginCard = React.createElement( 222 | "svg", 223 | { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", 224 | width: "21", height: "21", viewBox: "0 0 25 25" }, 225 | React.createElement( 226 | "g", 227 | null, 228 | React.createElement( 229 | "g", 230 | null, 231 | React.createElement("path", { d: "M21,0H4C1.8,0,0,1.8,0,4v17c0,2.2,1.8,4,4,4h17c2.2,0,4-1.8,4-4V4C25,1.8,23.2,0,21,0z M12.5,20C8.357,20,5,16.643,5,12.5 C5,8.358,8.357,5,12.5,5c4.143,0,7.5,3.358,7.5,7.5C20,16.643,16.643,20,12.5,20z" }), 232 | React.createElement("circle", { cx: "9", cy: "12.5", r: "1.5" }), 233 | React.createElement("circle", { cx: "16", cy: "12.5", r: "1.5" }) 234 | ) 235 | ), 236 | React.createElement("g", null), 237 | React.createElement("g", null), 238 | React.createElement("g", null), 239 | React.createElement("g", null), 240 | React.createElement("g", null), 241 | React.createElement("g", null), 242 | React.createElement("g", null), 243 | React.createElement("g", null), 244 | React.createElement("g", null), 245 | React.createElement("g", null), 246 | React.createElement("g", null), 247 | React.createElement("g", null), 248 | React.createElement("g", null), 249 | React.createElement("g", null), 250 | React.createElement("g", null) 251 | ); 252 | 253 | icons.highlight = React.createElement( 254 | "svg", 255 | { width: "23px", height: "23px", viewBox: "0 -3 511.99942 511", xmlns: "http://www.w3.org/2000/svg" }, 256 | React.createElement("path", { d: "m496.246094 73.867188-57.613282-57.613282c-10.160156-10.160156-23.664062-15.753906-38.035156-15.753906-14.367187 0-27.871094 5.59375-38.03125 15.75l-258.382812 258.386719c-15.382813 15.378906-23.851563 35.832031-23.851563 57.585937 0 9.191406-3.726562 18.191406-10.226562 24.691406l-22.222657 22.21875c-5.78125 5.785157-9.097656 13.789063-9.097656 21.96875 0 5.34375 1.425782 10.613282 4.023438 15.242188l-38.414063 38.414062c-3.179687 3.179688-4.765625 7.613282-4.3203122 12.085938.4414062 4.472656 2.8671872 8.511719 6.6054692 11.003906l38.558593 25.707032c2.539063 1.691406 5.4375 2.519531 8.316407 2.519531 3.871093 0 7.710937-1.496094 10.609374-4.394531l31.992188-31.992188c4.628906 2.601562 9.898438 4.027344 15.246094 4.027344 8.175781 0 16.183594-3.316406 21.964844-9.101563l22.21875-22.21875c6.5-6.5 15.5-10.230469 24.691406-10.230469 21.753906 0 42.207031-8.46875 57.585937-23.847656l258.382813-258.382812c10.160156-10.160156 15.753906-23.667969 15.753906-38.035156 0-14.367188-5.59375-27.871094-15.753906-38.03125zm-444.597656 397.90625-13.105469-8.738282 24.65625-24.65625 10.921875 10.921875zm82.722656-50.59375-22.21875 22.21875c0 .003906 0 .003906-.003906.003906-.394532.398437-1.101563.394531-1.503907 0l-36.839843-36.84375s-.003907 0-.003907-.003906l-4.703125-4.703126c-.46875-.46875-.367187-1.140624 0-1.503906l22.222656-22.21875c12.261719-12.261718 19.011719-28.5625 19.011719-45.90625 0-6.832031 1.324219-13.460937 3.847657-19.59375l85.691406 85.6875c-6.132813 2.523438-12.761719 3.851563-19.59375 3.851563-17.339844 0-33.644532 6.75-45.90625 19.011719zm89.496094-41.292969-91.253907-91.253907 219.785157-219.785156 91.253906 91.253906zm251.167968-251.167969-10.167968 10.167969-91.253907-91.253907 10.167969-10.167968c9.289062-9.289063 24.335938-9.300782 33.636719 0l57.617187 57.617187c9.289063 9.289063 9.300782 24.335938 0 33.636719zm0 0" }) 257 | ); 258 | 259 | exports.default = icons; 260 | 261 | /***/ }), 262 | /* 4 */ 263 | /***/ (function(module, exports, __webpack_require__) { 264 | 265 | "use strict"; 266 | 267 | 268 | Object.defineProperty(exports, "__esModule", { 269 | value: true 270 | }); 271 | exports.settings = exports.icon = exports.title = exports.name = undefined; 272 | 273 | var _classnames3 = __webpack_require__(0); 274 | 275 | var _classnames4 = _interopRequireDefault(_classnames3); 276 | 277 | var _edit = __webpack_require__(8); 278 | 279 | var _edit2 = _interopRequireDefault(_edit); 280 | 281 | var _icons = __webpack_require__(3); 282 | 283 | var _icons2 = _interopRequireDefault(_icons); 284 | 285 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 286 | 287 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 288 | 289 | function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /** 290 | * External dependencies 291 | */ 292 | 293 | 294 | /** 295 | * Internal dependencies 296 | */ 297 | 298 | 299 | /** 300 | * WordPress dependencies 301 | */ 302 | var __ = wp.i18n.__; 303 | var createBlock = wp.blocks.createBlock; 304 | var _wp$editor = wp.editor, 305 | RichText = _wp$editor.RichText, 306 | getColorClassName = _wp$editor.getColorClassName, 307 | getFontSizeClass = _wp$editor.getFontSizeClass; 308 | var _wp$richText = wp.richText, 309 | split = _wp$richText.split, 310 | create = _wp$richText.create, 311 | toHTMLString = _wp$richText.toHTMLString; 312 | 313 | /** 314 | * Block constants 315 | */ 316 | 317 | var name = 'click-to-tweet'; 318 | 319 | var title = __('Click to Tweet'); 320 | 321 | var icon = _icons2.default.twitter; 322 | 323 | var keywords = [__('share'), __('twitter'), __('click to tweet')]; 324 | 325 | var blockAttributes = { 326 | content: { 327 | type: 'string', 328 | source: 'html', 329 | selector: 'p', 330 | default: [] 331 | }, 332 | url: { 333 | type: 'attribute' 334 | }, 335 | textAlign: { 336 | type: 'string' 337 | }, 338 | via: { 339 | type: 'string' 340 | }, 341 | buttonText: { 342 | type: 'string', 343 | default: __('Tweet') 344 | }, 345 | buttonColor: { 346 | type: 'string' 347 | }, 348 | textColor: { 349 | type: 'string' 350 | }, 351 | customButtonColor: { 352 | type: 'string' 353 | }, 354 | customTextColor: { 355 | type: 'string' 356 | }, 357 | fontSize: { 358 | type: 'string' 359 | }, 360 | customFontSize: { 361 | type: 'number' 362 | } 363 | }; 364 | 365 | var settings = { 366 | 367 | title: title, 368 | 369 | description: __('Add a quote for readers to tweet via Twitter.'), 370 | 371 | keywords: keywords, 372 | 373 | attributes: blockAttributes, 374 | 375 | transforms: { 376 | from: [{ 377 | type: 'block', 378 | blocks: ['core/paragraph'], 379 | transform: function transform(_ref) { 380 | var content = _ref.content; 381 | return createBlock('machoblocks/' + name, { 382 | content: content 383 | }); 384 | } 385 | }, { 386 | type: 'block', 387 | blocks: ['core/pullquote'], 388 | transform: function transform(_ref2) { 389 | var value = _ref2.value, 390 | attrs = _objectWithoutProperties(_ref2, ['value']); 391 | 392 | var pieces = split(create({ html: value, multilineTag: 'p' }), '\u2028'); 393 | 394 | return [createBlock('machoblocks/' + name, { 395 | content: toHTMLString({ value: pieces[0] }) 396 | })]; 397 | } 398 | }, { 399 | type: 'block', 400 | blocks: ['core/quote'], 401 | transform: function transform(_ref3) { 402 | var value = _ref3.value, 403 | attrs = _objectWithoutProperties(_ref3, ['value']); 404 | 405 | var pieces = split(create({ html: value, multilineTag: 'p' }), '\u2028'); 406 | 407 | return [createBlock('machoblocks/' + name, { 408 | content: toHTMLString({ value: pieces[0] }) 409 | })]; 410 | } 411 | }], 412 | to: [{ 413 | type: 'block', 414 | blocks: ['core/paragraph'], 415 | transform: function transform(_ref4) { 416 | var content = _ref4.content; 417 | return createBlock('core/paragraph', { 418 | content: content 419 | }); 420 | } 421 | }, { 422 | type: 'block', 423 | blocks: ['core/pullquote'], 424 | transform: function transform(_ref5) { 425 | var content = _ref5.content; 426 | return createBlock('core/pullquote', { 427 | value: '

' + content + '

' 428 | }); 429 | } 430 | }, { 431 | type: 'block', 432 | blocks: ['core/quote'], 433 | transform: function transform(_ref6) { 434 | var content = _ref6.content; 435 | return createBlock('core/quote', { 436 | value: '

' + content + '

' 437 | }); 438 | } 439 | }] 440 | }, 441 | 442 | edit: _edit2.default, 443 | 444 | save: function save(_ref7) { 445 | var _classnames; 446 | 447 | var attributes = _ref7.attributes; 448 | var buttonColor = attributes.buttonColor, 449 | buttonText = attributes.buttonText, 450 | customButtonColor = attributes.customButtonColor, 451 | customTextColor = attributes.customTextColor, 452 | content = attributes.content, 453 | customFontSize = attributes.customFontSize, 454 | fontSize = attributes.fontSize, 455 | textColor = attributes.textColor, 456 | textAlign = attributes.textAlign, 457 | url = attributes.url, 458 | via = attributes.via; 459 | 460 | 461 | var viaUrl = via ? '&via=' + via : ''; 462 | 463 | var tweetUrl = 'http://twitter.com/share?&text=' + encodeURIComponent(content) + '&url=' + url + viaUrl; 464 | 465 | var textColorClass = getColorClassName('color', textColor); 466 | 467 | var fontSizeClass = getFontSizeClass(fontSize); 468 | 469 | var textClasses = (0, _classnames4.default)('wp-block-machoblocks-click-to-tweet__text', (_classnames = { 470 | 'has-text-color': textColor || customTextColor 471 | }, _defineProperty(_classnames, fontSizeClass, fontSizeClass), _defineProperty(_classnames, textColorClass, textColorClass), _classnames)); 472 | 473 | var textStyles = { 474 | fontSize: fontSizeClass ? undefined : customFontSize, 475 | color: textColorClass ? undefined : customTextColor 476 | }; 477 | 478 | var buttonColorClass = getColorClassName('background-color', buttonColor); 479 | 480 | var buttonClasses = (0, _classnames4.default)('wp-block-machoblocks-click-to-tweet__twitter-btn', _defineProperty({ 481 | 'has-button-color': buttonColor || customButtonColor 482 | }, buttonColorClass, buttonColorClass)); 483 | 484 | var buttonStyles = { 485 | backgroundColor: buttonColorClass ? undefined : customButtonColor 486 | }; 487 | 488 | return !RichText.isEmpty(content) && React.createElement( 489 | 'blockquote', 490 | { style: { textAlign: textAlign } }, 491 | React.createElement(RichText.Content, { 492 | tagName: 'p', 493 | className: textClasses, 494 | style: textStyles, 495 | value: content 496 | }), 497 | React.createElement(RichText.Content, { 498 | tagName: 'a', 499 | className: buttonClasses, 500 | style: buttonStyles, 501 | value: buttonText, 502 | href: tweetUrl, 503 | target: '_blank', 504 | rel: 'noopener noreferrer' 505 | }) 506 | ); 507 | } 508 | }; 509 | 510 | exports.name = name; 511 | exports.title = title; 512 | exports.icon = icon; 513 | exports.settings = settings; 514 | 515 | /***/ }), 516 | /* 5 */ 517 | /***/ (function(module, exports, __webpack_require__) { 518 | 519 | "use strict"; 520 | 521 | 522 | Object.defineProperty(exports, "__esModule", { 523 | value: true 524 | }); 525 | exports.settings = exports.icon = exports.title = exports.name = undefined; 526 | 527 | var _classnames2 = __webpack_require__(0); 528 | 529 | var _classnames3 = _interopRequireDefault(_classnames2); 530 | 531 | var _edit = __webpack_require__(11); 532 | 533 | var _edit2 = _interopRequireDefault(_edit); 534 | 535 | var _icons = __webpack_require__(3); 536 | 537 | var _icons2 = _interopRequireDefault(_icons); 538 | 539 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 540 | 541 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /** 542 | * External dependencies 543 | */ 544 | 545 | 546 | /** 547 | * Internal dependencies 548 | */ 549 | 550 | 551 | /** 552 | * WordPress dependencies 553 | */ 554 | var __ = wp.i18n.__; 555 | var createBlock = wp.blocks.createBlock; 556 | var _wp$editor = wp.editor, 557 | RichText = _wp$editor.RichText, 558 | getColorClassName = _wp$editor.getColorClassName, 559 | getFontSizeClass = _wp$editor.getFontSizeClass; 560 | 561 | /** 562 | * Block constants 563 | */ 564 | 565 | var name = 'highlight'; 566 | 567 | var title = __('Highlight'); 568 | 569 | var icon = _icons2.default.highlight; 570 | 571 | var keywords = [__('text'), __('paragraph'), __('highlight')]; 572 | 573 | var blockAttributes = { 574 | content: { 575 | type: 'string', 576 | source: 'html', 577 | selector: 'mark' 578 | }, 579 | align: { 580 | type: 'string' 581 | }, 582 | backgroundColor: { 583 | type: 'string' 584 | }, 585 | textColor: { 586 | type: 'string' 587 | }, 588 | customBackgroundColor: { 589 | type: 'string' 590 | }, 591 | customTextColor: { 592 | type: 'string' 593 | }, 594 | fontSize: { 595 | type: 'string' 596 | }, 597 | customFontSize: { 598 | type: 'number' 599 | } 600 | }; 601 | 602 | var settings = { 603 | 604 | title: title, 605 | 606 | description: __('Highlight text.'), 607 | 608 | keywords: keywords, 609 | 610 | attributes: blockAttributes, 611 | 612 | transforms: { 613 | from: [{ 614 | type: 'block', 615 | blocks: ['core/paragraph'], 616 | transform: function transform(_ref) { 617 | var content = _ref.content; 618 | 619 | return createBlock('machoblocks/' + name, { 620 | content: content 621 | }); 622 | } 623 | }, { 624 | type: 'raw', 625 | selector: 'div.wp-block-machoblocks-highlight', 626 | schema: { 627 | div: { 628 | classes: ['wp-block-machoblocks-highlight'] 629 | } 630 | } 631 | }, { 632 | type: 'prefix', 633 | prefix: ':highlight', 634 | transform: function transform(content) { 635 | return createBlock('machoblocks/' + name, { 636 | content: content 637 | }); 638 | } 639 | }], 640 | to: [{ 641 | type: 'block', 642 | blocks: ['core/paragraph'], 643 | transform: function transform(_ref2) { 644 | var content = _ref2.content; 645 | 646 | // transforming an empty block 647 | if (!content || !content.length) { 648 | return createBlock('core/paragraph'); 649 | } 650 | // transforming a block with content 651 | return createBlock('core/paragraph', { 652 | content: content 653 | }); 654 | } 655 | }] 656 | }, 657 | 658 | edit: _edit2.default, 659 | 660 | save: function save(_ref3) { 661 | var _classnames; 662 | 663 | var attributes = _ref3.attributes; 664 | var backgroundColor = attributes.backgroundColor, 665 | content = attributes.content, 666 | customBackgroundColor = attributes.customBackgroundColor, 667 | customFontSize = attributes.customFontSize, 668 | customTextColor = attributes.customTextColor, 669 | fontSize = attributes.fontSize, 670 | textAlign = attributes.textAlign, 671 | textColor = attributes.textColor; 672 | 673 | 674 | var textClass = getColorClassName('color', textColor); 675 | 676 | var backgroundClass = getColorClassName('background-color', backgroundColor); 677 | 678 | var fontSizeClass = getFontSizeClass(fontSize); 679 | 680 | var classes = (0, _classnames3.default)('wp-block-machoblocks-highlight__content', (_classnames = { 681 | 'has-text-color': textColor || customTextColor 682 | }, _defineProperty(_classnames, textClass, textClass), _defineProperty(_classnames, 'has-background', backgroundColor || customBackgroundColor), _defineProperty(_classnames, backgroundClass, backgroundClass), _defineProperty(_classnames, fontSizeClass, fontSizeClass), _classnames)); 683 | 684 | var styles = { 685 | backgroundColor: backgroundClass ? undefined : customBackgroundColor, 686 | color: textClass ? undefined : customTextColor, 687 | fontSize: fontSizeClass ? undefined : customFontSize 688 | }; 689 | 690 | return React.createElement( 691 | 'p', 692 | { style: { textAlign: textAlign } }, 693 | !RichText.isEmpty(content) && React.createElement(RichText.Content, { 694 | tagName: 'mark', 695 | className: classes, 696 | style: styles, 697 | value: content 698 | }) 699 | ); 700 | } 701 | }; 702 | 703 | exports.name = name; 704 | exports.title = title; 705 | exports.icon = icon; 706 | exports.settings = settings; 707 | 708 | /***/ }), 709 | /* 6 */ 710 | /***/ (function(module, exports, __webpack_require__) { 711 | 712 | "use strict"; 713 | 714 | 715 | Object.defineProperty(exports, "__esModule", { 716 | value: true 717 | }); 718 | exports.settings = exports.icon = exports.title = exports.name = undefined; 719 | 720 | var _classnames = __webpack_require__(0); 721 | 722 | var _classnames2 = _interopRequireDefault(_classnames); 723 | 724 | var _edit = __webpack_require__(14); 725 | 726 | var _edit2 = _interopRequireDefault(_edit); 727 | 728 | var _icons = __webpack_require__(3); 729 | 730 | var _icons2 = _interopRequireDefault(_icons); 731 | 732 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 733 | 734 | /** 735 | * WordPress dependencies 736 | */ 737 | 738 | 739 | /** 740 | * Internal dependencies 741 | */ 742 | var __ = wp.i18n.__; 743 | 744 | /** 745 | * Block constants 746 | */ 747 | /** 748 | * External dependencies 749 | */ 750 | 751 | var name = 'plugin-card'; 752 | 753 | var title = __('Plugin Card'); 754 | 755 | var icon = _icons2.default.pluginCard; 756 | 757 | var keywords = [__('plugin'), __('w.org'), __('card')]; 758 | 759 | var blockAttributes = { 760 | pluginSlug: { 761 | type: 'string', 762 | default: '' 763 | } 764 | }; 765 | 766 | var settings = { 767 | 768 | title: title, 769 | 770 | description: __('Display a WordPress plugin card from w.org.'), 771 | 772 | keywords: keywords, 773 | 774 | attributes: blockAttributes, 775 | 776 | edit: _edit2.default, 777 | 778 | save: function save() { 779 | return null; 780 | } 781 | }; 782 | 783 | exports.name = name; 784 | exports.title = title; 785 | exports.icon = icon; 786 | exports.settings = settings; 787 | 788 | /***/ }), 789 | /* 7 */ 790 | /***/ (function(module, exports, __webpack_require__) { 791 | 792 | "use strict"; 793 | 794 | 795 | Object.defineProperty(exports, "__esModule", { 796 | value: true 797 | }); 798 | 799 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 800 | 801 | var _icons = __webpack_require__(3); 802 | 803 | var _icons2 = _interopRequireDefault(_icons); 804 | 805 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 806 | 807 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 808 | 809 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 810 | 811 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 812 | * Internal dependencies 813 | */ 814 | 815 | 816 | /** 817 | * WordPress dependencies 818 | */ 819 | var __ = wp.i18n.__; 820 | var _wp$element = wp.element, 821 | Component = _wp$element.Component, 822 | Fragment = _wp$element.Fragment; 823 | var Toolbar = wp.components.Toolbar; 824 | var _wp$editor = wp.editor, 825 | AlignmentToolbar = _wp$editor.AlignmentToolbar, 826 | BlockControls = _wp$editor.BlockControls; 827 | 828 | var Controls = function (_Component) { 829 | _inherits(Controls, _Component); 830 | 831 | function Controls(props) { 832 | _classCallCheck(this, Controls); 833 | 834 | return _possibleConstructorReturn(this, (Controls.__proto__ || Object.getPrototypeOf(Controls)).apply(this, arguments)); 835 | } 836 | 837 | _createClass(Controls, [{ 838 | key: 'render', 839 | value: function render() { 840 | var _props = this.props, 841 | className = _props.className, 842 | attributes = _props.attributes, 843 | isSelected = _props.isSelected, 844 | setAttributes = _props.setAttributes; 845 | var textAlign = attributes.textAlign, 846 | via = attributes.via; 847 | 848 | 849 | return React.createElement( 850 | Fragment, 851 | null, 852 | React.createElement( 853 | BlockControls, 854 | null, 855 | React.createElement(AlignmentToolbar, { 856 | value: textAlign, 857 | onChange: function onChange(nextTextAlign) { 858 | return setAttributes({ textAlign: nextTextAlign }); 859 | } 860 | }), 861 | React.createElement( 862 | Toolbar, 863 | null, 864 | React.createElement( 865 | 'div', 866 | { className: className + '__via-wrapper' }, 867 | React.createElement( 868 | 'label', 869 | { 870 | 'aria-label': __('Twitter Username'), 871 | className: className + '__via-label', 872 | htmlFor: className + '__via' 873 | }, 874 | _icons2.default.at 875 | ), 876 | React.createElement('input', { 877 | 'aria-label': __('Twitter Username'), 878 | className: className + '__via', 879 | id: className + '__via', 880 | onChange: function onChange(event) { 881 | return setAttributes({ via: event.target.value }); 882 | }, 883 | placeholder: __('Username'), 884 | type: 'text', 885 | value: via 886 | }) 887 | ) 888 | ) 889 | ) 890 | ); 891 | } 892 | }]); 893 | 894 | return Controls; 895 | }(Component); 896 | 897 | ; 898 | 899 | exports.default = Controls; 900 | 901 | /***/ }), 902 | /* 8 */ 903 | /***/ (function(module, exports, __webpack_require__) { 904 | 905 | "use strict"; 906 | 907 | 908 | Object.defineProperty(exports, "__esModule", { 909 | value: true 910 | }); 911 | 912 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 913 | 914 | var _classnames3 = __webpack_require__(0); 915 | 916 | var _classnames4 = _interopRequireDefault(_classnames3); 917 | 918 | var _colors = __webpack_require__(1); 919 | 920 | var _colors2 = _interopRequireDefault(_colors); 921 | 922 | var _inspector = __webpack_require__(9); 923 | 924 | var _inspector2 = _interopRequireDefault(_inspector); 925 | 926 | var _controls = __webpack_require__(7); 927 | 928 | var _controls2 = _interopRequireDefault(_controls); 929 | 930 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 931 | 932 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 933 | 934 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 935 | 936 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 937 | 938 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 939 | * External dependencies 940 | */ 941 | 942 | 943 | /** 944 | * Internal dependencies 945 | */ 946 | 947 | 948 | /** 949 | * WordPress dependencies 950 | */ 951 | var __ = wp.i18n.__; 952 | var _wp$element = wp.element, 953 | Component = _wp$element.Component, 954 | Fragment = _wp$element.Fragment; 955 | var compose = wp.compose.compose; 956 | var _wp$editor = wp.editor, 957 | RichText = _wp$editor.RichText, 958 | withFontSizes = _wp$editor.withFontSizes; 959 | var withSelect = wp.data.withSelect; 960 | 961 | /** 962 | * Block constants 963 | */ 964 | 965 | var applyWithSelect = withSelect(function (select) { 966 | var _select = select('core/editor'), 967 | getPermalink = _select.getPermalink; 968 | 969 | return { 970 | postLink: getPermalink() 971 | }; 972 | }); 973 | 974 | /** 975 | * Block edit function 976 | */ 977 | 978 | var Edit = function (_Component) { 979 | _inherits(Edit, _Component); 980 | 981 | function Edit() { 982 | _classCallCheck(this, Edit); 983 | 984 | return _possibleConstructorReturn(this, (Edit.__proto__ || Object.getPrototypeOf(Edit)).apply(this, arguments)); 985 | } 986 | 987 | _createClass(Edit, [{ 988 | key: 'componentWillReceiveProps', 989 | value: function componentWillReceiveProps(_ref) { 990 | var postLink = _ref.postLink; 991 | 992 | if (postLink) { 993 | this.props.setAttributes({ 994 | url: postLink 995 | }); 996 | } 997 | } 998 | }, { 999 | key: 'render', 1000 | value: function render() { 1001 | var _classnames; 1002 | 1003 | var _props = this.props, 1004 | attributes = _props.attributes, 1005 | buttonColor = _props.buttonColor, 1006 | className = _props.className, 1007 | isSelected = _props.isSelected, 1008 | setAttributes = _props.setAttributes, 1009 | setButtonColor = _props.setButtonColor, 1010 | setTextColor = _props.setTextColor, 1011 | textColor = _props.textColor, 1012 | fallbackButtonColor = _props.fallbackButtonColor, 1013 | fallbackTextColor = _props.fallbackTextColor, 1014 | fallbackFontSize = _props.fallbackFontSize, 1015 | fontSize = _props.fontSize, 1016 | onReplace = _props.onReplace; 1017 | var buttonText = attributes.buttonText, 1018 | content = attributes.content, 1019 | url = attributes.url, 1020 | via = attributes.via, 1021 | textAlign = attributes.textAlign; 1022 | 1023 | 1024 | return [React.createElement( 1025 | Fragment, 1026 | null, 1027 | isSelected && React.createElement(_controls2.default, this.props), 1028 | isSelected && React.createElement(_inspector2.default, this.props), 1029 | React.createElement( 1030 | 'blockquote', 1031 | { className: className, style: { textAlign: textAlign } }, 1032 | React.createElement(RichText, { 1033 | tagName: 'p', 1034 | multiline: 'false' 1035 | /* translators: the text of the click to tweet element */ 1036 | , placeholder: __('Add a quote to tweet...'), 1037 | value: content, 1038 | formattingControls: [] // disable controls 1039 | , className: (0, _classnames4.default)(className + '__text', (_classnames = { 1040 | 'has-text-color': textColor.color 1041 | }, _defineProperty(_classnames, textColor.class, textColor.class), _defineProperty(_classnames, fontSize.class, fontSize.class), _classnames)), 1042 | style: { 1043 | color: textColor.color, 1044 | fontSize: fontSize.size ? fontSize.size + 'px' : undefined 1045 | }, 1046 | onChange: function onChange(nextContent) { 1047 | return setAttributes({ content: nextContent }); 1048 | }, 1049 | keepPlaceholderOnFocus: true, 1050 | onRemove: function onRemove(forward) { 1051 | var hasEmptyTweet = content.length === 0 || content.length === 1; 1052 | 1053 | if (!forward && hasEmptyTweet) { 1054 | onReplace([]); 1055 | } 1056 | } 1057 | }), 1058 | React.createElement(RichText, { 1059 | tagName: 'span', 1060 | multiline: 'false', 1061 | placeholder: __('Add button...'), 1062 | value: buttonText, 1063 | formattingControls: [] // disable controls 1064 | , className: (0, _classnames4.default)(className + '__twitter-btn', _defineProperty({ 1065 | 'has-button-color': buttonColor.color 1066 | }, buttonColor.class, buttonColor.class)), 1067 | style: { 1068 | backgroundColor: buttonColor.color 1069 | }, 1070 | onChange: function onChange(nextButtonText) { 1071 | return setAttributes({ buttonText: nextButtonText }); 1072 | }, 1073 | keepPlaceholderOnFocus: true 1074 | }) 1075 | ) 1076 | )]; 1077 | } 1078 | }]); 1079 | 1080 | return Edit; 1081 | }(Component); 1082 | 1083 | ; 1084 | 1085 | exports.default = compose([applyWithSelect, _colors2.default, withFontSizes('fontSize')])(Edit); 1086 | 1087 | /***/ }), 1088 | /* 9 */ 1089 | /***/ (function(module, exports, __webpack_require__) { 1090 | 1091 | "use strict"; 1092 | 1093 | 1094 | Object.defineProperty(exports, "__esModule", { 1095 | value: true 1096 | }); 1097 | 1098 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1099 | 1100 | var _colors = __webpack_require__(1); 1101 | 1102 | var _colors2 = _interopRequireDefault(_colors); 1103 | 1104 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1105 | 1106 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1107 | 1108 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1109 | 1110 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 1111 | * Internal dependencies 1112 | */ 1113 | 1114 | 1115 | /** 1116 | * WordPress dependencies 1117 | */ 1118 | var __ = wp.i18n.__; 1119 | var _wp$element = wp.element, 1120 | Component = _wp$element.Component, 1121 | Fragment = _wp$element.Fragment; 1122 | var compose = wp.compose.compose; 1123 | var _wp$editor = wp.editor, 1124 | InspectorControls = _wp$editor.InspectorControls, 1125 | ContrastChecker = _wp$editor.ContrastChecker, 1126 | PanelColorSettings = _wp$editor.PanelColorSettings, 1127 | FontSizePicker = _wp$editor.FontSizePicker, 1128 | withFontSizes = _wp$editor.withFontSizes; 1129 | var _wp$components = wp.components, 1130 | PanelBody = _wp$components.PanelBody, 1131 | withFallbackStyles = _wp$components.withFallbackStyles; 1132 | 1133 | /** 1134 | * Contrast checker 1135 | */ 1136 | 1137 | var _window = window, 1138 | getComputedStyle = _window.getComputedStyle; 1139 | 1140 | 1141 | var applyFallbackStyles = withFallbackStyles(function (node, ownProps) { 1142 | var _ownProps$attributes = ownProps.attributes, 1143 | textColor = _ownProps$attributes.textColor, 1144 | buttonColor = _ownProps$attributes.buttonColor, 1145 | fontSize = _ownProps$attributes.fontSize, 1146 | customFontSize = _ownProps$attributes.customFontSize; 1147 | 1148 | var editableNode = node.querySelector('[contenteditable="true"]'); 1149 | //verify if editableNode is available, before using getComputedStyle. 1150 | var computedStyles = editableNode ? getComputedStyle(editableNode) : null; 1151 | return { 1152 | fallbackButtonColor: buttonColor || !computedStyles ? undefined : computedStyles.buttonColor, 1153 | fallbackTextColor: textColor || !computedStyles ? undefined : computedStyles.color, 1154 | fallbackFontSize: fontSize || customFontSize || !computedStyles ? undefined : parseInt(computedStyles.fontSize) || undefined 1155 | }; 1156 | }); 1157 | 1158 | /** 1159 | * Inspector controls 1160 | */ 1161 | 1162 | var Inspector = function (_Component) { 1163 | _inherits(Inspector, _Component); 1164 | 1165 | function Inspector(props) { 1166 | _classCallCheck(this, Inspector); 1167 | 1168 | return _possibleConstructorReturn(this, (Inspector.__proto__ || Object.getPrototypeOf(Inspector)).apply(this, arguments)); 1169 | } 1170 | 1171 | _createClass(Inspector, [{ 1172 | key: 'render', 1173 | value: function render() { 1174 | var _props = this.props, 1175 | attributes = _props.attributes, 1176 | buttonColor = _props.buttonColor, 1177 | fallbackButtonColor = _props.fallbackButtonColor, 1178 | fallbackFontSize = _props.fallbackFontSize, 1179 | fallbackTextColor = _props.fallbackTextColor, 1180 | fontSize = _props.fontSize, 1181 | isSelected = _props.isSelected, 1182 | setAttributes = _props.setAttributes, 1183 | setButtonColor = _props.setButtonColor, 1184 | setFontSize = _props.setFontSize, 1185 | setTextColor = _props.setTextColor, 1186 | textColor = _props.textColor; 1187 | 1188 | 1189 | return React.createElement( 1190 | Fragment, 1191 | null, 1192 | React.createElement( 1193 | InspectorControls, 1194 | null, 1195 | React.createElement( 1196 | PanelBody, 1197 | { title: __('Text Settings'), className: 'blocks-font-size' }, 1198 | React.createElement(FontSizePicker, { 1199 | fallbackFontSize: fallbackFontSize, 1200 | value: fontSize.size, 1201 | onChange: setFontSize 1202 | }) 1203 | ), 1204 | React.createElement( 1205 | PanelColorSettings, 1206 | { 1207 | title: __('Color Settings'), 1208 | initialOpen: false, 1209 | colorSettings: [{ 1210 | value: textColor.color, 1211 | onChange: setTextColor, 1212 | label: __('Text Color') 1213 | }, { 1214 | value: buttonColor.color, 1215 | onChange: setButtonColor, 1216 | label: __('Button Color') 1217 | }] 1218 | }, 1219 | React.createElement(ContrastChecker, { 1220 | textColor: '#ffffff', 1221 | backgroundColor: buttonColor.color, 1222 | fallbackButtonColor: fallbackButtonColor, 1223 | fallbackTextColor: fallbackTextColor 1224 | }) 1225 | ) 1226 | ) 1227 | ); 1228 | } 1229 | }]); 1230 | 1231 | return Inspector; 1232 | }(Component); 1233 | 1234 | exports.default = compose([_colors2.default, applyFallbackStyles, withFontSizes('fontSize')])(Inspector); 1235 | 1236 | /***/ }), 1237 | /* 10 */ 1238 | /***/ (function(module, exports, __webpack_require__) { 1239 | 1240 | "use strict"; 1241 | 1242 | 1243 | Object.defineProperty(exports, "__esModule", { 1244 | value: true 1245 | }); 1246 | 1247 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1248 | 1249 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1250 | 1251 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1252 | 1253 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 1254 | 1255 | /** 1256 | * WordPress dependencies 1257 | */ 1258 | var __ = wp.i18n.__; 1259 | var _wp$element = wp.element, 1260 | Component = _wp$element.Component, 1261 | Fragment = _wp$element.Fragment; 1262 | var _wp$editor = wp.editor, 1263 | BlockControls = _wp$editor.BlockControls, 1264 | AlignmentToolbar = _wp$editor.AlignmentToolbar; 1265 | 1266 | var Controls = function (_Component) { 1267 | _inherits(Controls, _Component); 1268 | 1269 | function Controls(props) { 1270 | _classCallCheck(this, Controls); 1271 | 1272 | return _possibleConstructorReturn(this, (Controls.__proto__ || Object.getPrototypeOf(Controls)).apply(this, arguments)); 1273 | } 1274 | 1275 | _createClass(Controls, [{ 1276 | key: "render", 1277 | value: function render() { 1278 | var _props = this.props, 1279 | attributes = _props.attributes, 1280 | setAttributes = _props.setAttributes; 1281 | var align = attributes.align; 1282 | 1283 | 1284 | return React.createElement( 1285 | Fragment, 1286 | null, 1287 | React.createElement( 1288 | BlockControls, 1289 | null, 1290 | React.createElement(AlignmentToolbar, { 1291 | value: align, 1292 | onChange: function onChange(nextAlign) { 1293 | return setAttributes({ align: nextAlign }); 1294 | } 1295 | }) 1296 | ) 1297 | ); 1298 | } 1299 | }]); 1300 | 1301 | return Controls; 1302 | }(Component); 1303 | 1304 | ; 1305 | 1306 | exports.default = Controls; 1307 | 1308 | /***/ }), 1309 | /* 11 */ 1310 | /***/ (function(module, exports, __webpack_require__) { 1311 | 1312 | "use strict"; 1313 | 1314 | 1315 | Object.defineProperty(exports, "__esModule", { 1316 | value: true 1317 | }); 1318 | 1319 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1320 | 1321 | var _classnames2 = __webpack_require__(0); 1322 | 1323 | var _classnames3 = _interopRequireDefault(_classnames2); 1324 | 1325 | var _colors = __webpack_require__(2); 1326 | 1327 | var _colors2 = _interopRequireDefault(_colors); 1328 | 1329 | var _controls = __webpack_require__(10); 1330 | 1331 | var _controls2 = _interopRequireDefault(_controls); 1332 | 1333 | var _inspector = __webpack_require__(12); 1334 | 1335 | var _inspector2 = _interopRequireDefault(_inspector); 1336 | 1337 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1338 | 1339 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 1340 | 1341 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1342 | 1343 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1344 | 1345 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 1346 | * External dependencies 1347 | */ 1348 | 1349 | 1350 | /** 1351 | * Internal dependencies 1352 | */ 1353 | 1354 | 1355 | /** 1356 | * WordPress dependencies 1357 | */ 1358 | var __ = wp.i18n.__; 1359 | var _wp$element = wp.element, 1360 | Component = _wp$element.Component, 1361 | Fragment = _wp$element.Fragment; 1362 | var compose = wp.compose.compose; 1363 | var _wp$editor = wp.editor, 1364 | RichText = _wp$editor.RichText, 1365 | withFontSizes = _wp$editor.withFontSizes; 1366 | var createBlock = wp.blocks.createBlock; 1367 | 1368 | /** 1369 | * Block edit function 1370 | */ 1371 | 1372 | var Edit = function (_Component) { 1373 | _inherits(Edit, _Component); 1374 | 1375 | function Edit(props) { 1376 | _classCallCheck(this, Edit); 1377 | 1378 | var _this = _possibleConstructorReturn(this, (Edit.__proto__ || Object.getPrototypeOf(Edit)).apply(this, arguments)); 1379 | 1380 | _this.splitBlock = _this.splitBlock.bind(_this); 1381 | return _this; 1382 | } 1383 | 1384 | /** 1385 | * Split handler for RichText value, namely when content is pasted or the 1386 | * user presses the Enter key. 1387 | * 1388 | * @param {?Array} before Optional before value, to be used as content 1389 | * in place of what exists currently for the 1390 | * block. If undefined, the block is deleted. 1391 | * @param {?Array} after Optional after value, to be appended in a new 1392 | * paragraph block to the set of blocks passed 1393 | * as spread. 1394 | * @param {...WPBlock} blocks Optional blocks inserted between the before 1395 | * and after value blocks. 1396 | */ 1397 | 1398 | 1399 | _createClass(Edit, [{ 1400 | key: 'splitBlock', 1401 | value: function splitBlock(before, after) { 1402 | var _props = this.props, 1403 | attributes = _props.attributes, 1404 | insertBlocksAfter = _props.insertBlocksAfter, 1405 | setAttributes = _props.setAttributes, 1406 | onReplace = _props.onReplace; 1407 | 1408 | for (var _len = arguments.length, blocks = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { 1409 | blocks[_key - 2] = arguments[_key]; 1410 | } 1411 | 1412 | if (after) { 1413 | // Append "After" content as a new paragraph block to the end of 1414 | // any other blocks being inserted after the current paragraph. 1415 | blocks.push(createBlock('core/paragraph', { content: after })); 1416 | } 1417 | 1418 | if (blocks.length && insertBlocksAfter) { 1419 | insertBlocksAfter(blocks); 1420 | } 1421 | 1422 | var content = attributes.content; 1423 | 1424 | 1425 | if (!before) { 1426 | // If before content is omitted, treat as intent to delete block. 1427 | onReplace([]); 1428 | } else if (content !== before) { 1429 | // Only update content if it has in-fact changed. In case that user 1430 | // has created a new paragraph at end of an existing one, the value 1431 | // of before will be strictly equal to the current content. 1432 | setAttributes({ content: before }); 1433 | } 1434 | } 1435 | }, { 1436 | key: 'render', 1437 | value: function render() { 1438 | var _classnames; 1439 | 1440 | var _props2 = this.props, 1441 | attributes = _props2.attributes, 1442 | backgroundColor = _props2.backgroundColor, 1443 | className = _props2.className, 1444 | insertBlocksAfter = _props2.insertBlocksAfter, 1445 | isSelected = _props2.isSelected, 1446 | mergeBlocks = _props2.mergeBlocks, 1447 | onReplace = _props2.onReplace, 1448 | setAttributes = _props2.setAttributes, 1449 | setBackgroundColor = _props2.setBackgroundColor, 1450 | setTextColor = _props2.setTextColor, 1451 | textColor = _props2.textColor, 1452 | fallbackFontSize = _props2.fallbackFontSize, 1453 | fontSize = _props2.fontSize; 1454 | var content = attributes.content, 1455 | textAlign = attributes.textAlign; 1456 | 1457 | 1458 | return [React.createElement( 1459 | Fragment, 1460 | null, 1461 | isSelected && React.createElement(_controls2.default, this.props), 1462 | isSelected && React.createElement(_inspector2.default, this.props), 1463 | React.createElement( 1464 | 'p', 1465 | { className: className, style: { textAlign: textAlign } }, 1466 | React.createElement(RichText, { 1467 | tagName: 'mark', 1468 | placeholder: __('Add highlighted text...'), 1469 | value: content, 1470 | onChange: function onChange(value) { 1471 | return setAttributes({ content: value }); 1472 | }, 1473 | onMerge: mergeBlocks, 1474 | onSplit: this.splitBlock, 1475 | onRemove: function onRemove() { 1476 | return onReplace([]); 1477 | }, 1478 | className: (0, _classnames3.default)(className + '__content', (_classnames = { 1479 | 'has-background': backgroundColor.color 1480 | }, _defineProperty(_classnames, backgroundColor.class, backgroundColor.class), _defineProperty(_classnames, 'has-text-color', textColor.color), _defineProperty(_classnames, textColor.class, textColor.class), _defineProperty(_classnames, fontSize.class, fontSize.class), _classnames)), 1481 | style: { 1482 | backgroundColor: backgroundColor.color, 1483 | color: textColor.color, 1484 | fontSize: fontSize.size ? fontSize.size + 'px' : undefined 1485 | }, 1486 | keepPlaceholderOnFocus: true 1487 | }) 1488 | ) 1489 | )]; 1490 | } 1491 | }]); 1492 | 1493 | return Edit; 1494 | }(Component); 1495 | 1496 | ; 1497 | 1498 | exports.default = compose([_colors2.default, withFontSizes('fontSize')])(Edit); 1499 | 1500 | /***/ }), 1501 | /* 12 */ 1502 | /***/ (function(module, exports, __webpack_require__) { 1503 | 1504 | "use strict"; 1505 | 1506 | 1507 | Object.defineProperty(exports, "__esModule", { 1508 | value: true 1509 | }); 1510 | 1511 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1512 | 1513 | var _colors = __webpack_require__(2); 1514 | 1515 | var _colors2 = _interopRequireDefault(_colors); 1516 | 1517 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1518 | 1519 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1520 | 1521 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1522 | 1523 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 1524 | * Internal dependencies 1525 | */ 1526 | 1527 | 1528 | /** 1529 | * WordPress dependencies 1530 | */ 1531 | var __ = wp.i18n.__; 1532 | var _wp$element = wp.element, 1533 | Component = _wp$element.Component, 1534 | Fragment = _wp$element.Fragment; 1535 | var compose = wp.compose.compose; 1536 | var _wp$editor = wp.editor, 1537 | InspectorControls = _wp$editor.InspectorControls, 1538 | ContrastChecker = _wp$editor.ContrastChecker, 1539 | PanelColorSettings = _wp$editor.PanelColorSettings, 1540 | FontSizePicker = _wp$editor.FontSizePicker, 1541 | withFontSizes = _wp$editor.withFontSizes; 1542 | var _wp$components = wp.components, 1543 | PanelBody = _wp$components.PanelBody, 1544 | withFallbackStyles = _wp$components.withFallbackStyles; 1545 | 1546 | /** 1547 | * Contrast checker 1548 | */ 1549 | 1550 | var _window = window, 1551 | getComputedStyle = _window.getComputedStyle; 1552 | 1553 | 1554 | var ContrastCheckerWithFallbackStyles = withFallbackStyles(function (node, ownProps) { 1555 | var textColor = ownProps.textColor, 1556 | backgroundColor = ownProps.backgroundColor, 1557 | fontSize = ownProps.fontSize, 1558 | customFontSize = ownProps.customFontSize; 1559 | //avoid the use of querySelector if textColor color is known and verify if node is available. 1560 | 1561 | var textNode = !textColor && node ? node.querySelector('[contenteditable="true"]') : null; 1562 | return { 1563 | fallbackBackgroundColor: backgroundColor || !node ? undefined : getComputedStyle(node).backgroundColor, 1564 | fallbackTextColor: textColor || !textNode ? undefined : getComputedStyle(textNode).color, 1565 | fallbackFontSize: fontSize || customFontSize || !computedStyles ? undefined : parseInt(computedStyles.fontSize) || undefined 1566 | }; 1567 | })(ContrastChecker); 1568 | 1569 | /** 1570 | * Inspector controls 1571 | */ 1572 | 1573 | var Inspector = function (_Component) { 1574 | _inherits(Inspector, _Component); 1575 | 1576 | function Inspector(props) { 1577 | _classCallCheck(this, Inspector); 1578 | 1579 | return _possibleConstructorReturn(this, (Inspector.__proto__ || Object.getPrototypeOf(Inspector)).apply(this, arguments)); 1580 | } 1581 | 1582 | _createClass(Inspector, [{ 1583 | key: 'render', 1584 | value: function render() { 1585 | var _props = this.props, 1586 | attributes = _props.attributes, 1587 | backgroundColor = _props.backgroundColor, 1588 | textColor = _props.textColor, 1589 | setBackgroundColor = _props.setBackgroundColor, 1590 | setTextColor = _props.setTextColor, 1591 | setAttributes = _props.setAttributes, 1592 | fallbackBackgroundColor = _props.fallbackBackgroundColor, 1593 | fallbackTextColor = _props.fallbackTextColor, 1594 | setFontSize = _props.setFontSize, 1595 | fallbackFontSize = _props.fallbackFontSize, 1596 | fontSize = _props.fontSize; 1597 | 1598 | 1599 | return React.createElement( 1600 | Fragment, 1601 | null, 1602 | React.createElement( 1603 | InspectorControls, 1604 | null, 1605 | React.createElement( 1606 | PanelBody, 1607 | { title: __('Text Settings'), className: 'blocks-font-size' }, 1608 | React.createElement(FontSizePicker, { 1609 | fallbackFontSize: fallbackFontSize, 1610 | value: fontSize.size, 1611 | onChange: setFontSize 1612 | }) 1613 | ), 1614 | React.createElement( 1615 | PanelColorSettings, 1616 | { 1617 | title: __('Color Settings'), 1618 | initialOpen: false, 1619 | colorSettings: [{ 1620 | value: backgroundColor.color, 1621 | onChange: setBackgroundColor, 1622 | label: __('Background Color') 1623 | }, { 1624 | value: textColor.color, 1625 | onChange: setTextColor, 1626 | label: __('Text Color') 1627 | }] 1628 | }, 1629 | React.createElement(ContrastChecker, { 1630 | textColor: textColor.color, 1631 | backgroundColor: backgroundColor.color, 1632 | fallbackBackgroundColor: fallbackBackgroundColor, 1633 | fallbackTextColor: fallbackTextColor 1634 | }) 1635 | ) 1636 | ) 1637 | ); 1638 | } 1639 | }]); 1640 | 1641 | return Inspector; 1642 | }(Component); 1643 | 1644 | ; 1645 | 1646 | exports.default = compose([_colors2.default])(Inspector); 1647 | 1648 | /***/ }), 1649 | /* 13 */ 1650 | /***/ (function(module, exports, __webpack_require__) { 1651 | 1652 | "use strict"; 1653 | 1654 | 1655 | Object.defineProperty(exports, "__esModule", { 1656 | value: true 1657 | }); 1658 | 1659 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1660 | 1661 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1662 | 1663 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1664 | 1665 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 1666 | 1667 | /** 1668 | * WordPress dependencies 1669 | */ 1670 | var __ = wp.i18n.__; 1671 | var BlockControls = wp.editor.BlockControls; 1672 | var Component = wp.element.Component; 1673 | var _wp$components = wp.components, 1674 | IconButton = _wp$components.IconButton, 1675 | Toolbar = _wp$components.Toolbar; 1676 | 1677 | var Controls = function (_Component) { 1678 | _inherits(Controls, _Component); 1679 | 1680 | function Controls(props) { 1681 | _classCallCheck(this, Controls); 1682 | 1683 | return _possibleConstructorReturn(this, (Controls.__proto__ || Object.getPrototypeOf(Controls)).apply(this, arguments)); 1684 | } 1685 | 1686 | _createClass(Controls, [{ 1687 | key: 'onChangePluginClick', 1688 | value: function onChangePluginClick() { 1689 | this.props.setAttributes({ 1690 | pluginSlug: '' 1691 | }); 1692 | } 1693 | }, { 1694 | key: 'render', 1695 | value: function render() { 1696 | var _this2 = this; 1697 | 1698 | return React.createElement( 1699 | BlockControls, 1700 | null, 1701 | React.createElement( 1702 | Toolbar, 1703 | null, 1704 | React.createElement(IconButton, { 1705 | label: __('Change Plugin'), 1706 | icon: 'edit', 1707 | onClick: function onClick() { 1708 | return _this2.onChangePluginClick(); 1709 | } 1710 | }) 1711 | ) 1712 | ); 1713 | } 1714 | }]); 1715 | 1716 | return Controls; 1717 | }(Component); 1718 | 1719 | exports.default = Controls; 1720 | 1721 | /***/ }), 1722 | /* 14 */ 1723 | /***/ (function(module, exports, __webpack_require__) { 1724 | 1725 | "use strict"; 1726 | 1727 | 1728 | Object.defineProperty(exports, "__esModule", { 1729 | value: true 1730 | }); 1731 | 1732 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 1733 | 1734 | var _controls = __webpack_require__(13); 1735 | 1736 | var _controls2 = _interopRequireDefault(_controls); 1737 | 1738 | var _icons = __webpack_require__(3); 1739 | 1740 | var _icons2 = _interopRequireDefault(_icons); 1741 | 1742 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 1743 | 1744 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 1745 | 1746 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 1747 | 1748 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 1749 | * Internal dependencies 1750 | */ 1751 | 1752 | 1753 | /** 1754 | * WordPress dependencies 1755 | */ 1756 | var __ = wp.i18n.__; 1757 | var _wp$components = wp.components, 1758 | Placeholder = _wp$components.Placeholder, 1759 | Dashicon = _wp$components.Dashicon, 1760 | TextControl = _wp$components.TextControl, 1761 | Spinner = _wp$components.Spinner; 1762 | var _wp$element = wp.element, 1763 | Component = _wp$element.Component, 1764 | Fragment = _wp$element.Fragment; 1765 | 1766 | /** 1767 | * Block edit function 1768 | */ 1769 | 1770 | var Edit = function (_Component) { 1771 | _inherits(Edit, _Component); 1772 | 1773 | function Edit(props) { 1774 | _classCallCheck(this, Edit); 1775 | 1776 | var _this = _possibleConstructorReturn(this, (Edit.__proto__ || Object.getPrototypeOf(Edit)).apply(this, arguments)); 1777 | 1778 | _this.state = { 1779 | status: 'loading-plugin', 1780 | searchInput: '', 1781 | pluginList: [] 1782 | }; 1783 | return _this; 1784 | } 1785 | 1786 | _createClass(Edit, [{ 1787 | key: 'searchPlugins', 1788 | value: function searchPlugins(value) { 1789 | var _this2 = this; 1790 | 1791 | this.setState({ status: 'loading-results' }); 1792 | 1793 | wp.apiFetch({ path: 'machoblocks/v1/get_plugins?search=\'' + encodeURIComponent(value) }).then(function (response) { 1794 | _this2.setState({ 1795 | pluginList: response.data.plugins, 1796 | status: 'ready' 1797 | }); 1798 | }); 1799 | } 1800 | }, { 1801 | key: 'getPlugin', 1802 | value: function getPlugin(slug) { 1803 | var _this3 = this; 1804 | 1805 | this.setState({ status: 'loading-plugin' }); 1806 | 1807 | wp.apiFetch({ path: 'machoblocks/v1/get_plugins?slug=\'' + encodeURIComponent(slug) }).then(function (response) { 1808 | _this3.setPlugin(response.data); 1809 | _this3.setState({ status: 'ready' }); 1810 | }); 1811 | } 1812 | }, { 1813 | key: 'setPlugin', 1814 | value: function setPlugin(plugin) { 1815 | this.props.setAttributes({ 1816 | pluginSlug: plugin.slug, 1817 | pluginName: plugin.name, 1818 | pluginIcon: this.getPluginIcon(plugin), 1819 | pluginVersion: plugin.version, 1820 | pluginAuthor: plugin.author, 1821 | pluginRating: plugin.rating, 1822 | pluginDescription: plugin.short_description, 1823 | pluginActiveInstalls: plugin.active_installs, 1824 | pluginDownloadLink: plugin.download_link 1825 | }); 1826 | } 1827 | }, { 1828 | key: 'componentWillMount', 1829 | value: function componentWillMount() { 1830 | if (this.props.attributes.pluginSlug !== '') { 1831 | this.getPlugin(this.props.attributes.pluginSlug); 1832 | } else { 1833 | this.setState({ status: 'ready' }); 1834 | } 1835 | } 1836 | }, { 1837 | key: 'onPluginSelectClick', 1838 | value: function onPluginSelectClick(plugin) { 1839 | this.setPlugin(plugin); 1840 | this.setState({ pluginList: [] }); 1841 | } 1842 | }, { 1843 | key: 'onSearchChange', 1844 | value: function onSearchChange(value) { 1845 | var _this4 = this; 1846 | 1847 | this.setState({ searchInput: value }); 1848 | 1849 | clearTimeout(this.timeout); 1850 | 1851 | if (value.length < 3) { 1852 | this.setState({ pluginList: [] }); 1853 | } 1854 | 1855 | if (value.length >= 3 && this.state.status === 'ready') { 1856 | this.timeout = setTimeout(function () { 1857 | return _this4.searchPlugins(value); 1858 | }, 500); 1859 | } 1860 | } 1861 | }, { 1862 | key: 'getPluginIcon', 1863 | value: function getPluginIcon(plugin) { 1864 | var icon = ''; 1865 | if (plugin.icons['2x']) { 1866 | icon = plugin.icons['2x']; 1867 | } else if (plugin.icons['1x']) { 1868 | icon = plugin.icons['x']; 1869 | } else if (plugin.icons.default) { 1870 | icon = plugin.icons.default; 1871 | } 1872 | 1873 | return icon; 1874 | } 1875 | }, { 1876 | key: 'getNiceNumber', 1877 | value: function getNiceNumber(n) { 1878 | if (n > 1000000000) { 1879 | return Math.round(n / 1000000000) + '+' + ' billion'; 1880 | } else if (n > 1000000) { 1881 | return Math.round(n / 1000000) + '+' + ' million'; 1882 | } 1883 | 1884 | return n + '+'; 1885 | } 1886 | }, { 1887 | key: 'getStars', 1888 | value: function getStars(r) { 1889 | var rating = Math.round(r / 10) / 2; 1890 | var fullStars = Math.floor(rating); 1891 | var halfStars = Math.ceil(rating - fullStars); 1892 | var emptyStars = 5 - fullStars - halfStars; 1893 | 1894 | var output = []; 1895 | 1896 | _.times(fullStars, function () { 1897 | output.push(React.createElement('div', { 'class': 'wp-block-machoblocks-plugin__star-full', 'aria-hidden': 'true' })); 1898 | }); 1899 | 1900 | _.times(halfStars, function () { 1901 | output.push(React.createElement('div', { 'class': 'wp-block-machoblocks-plugin__star-half', 'aria-hidden': 'true' })); 1902 | }); 1903 | 1904 | _.times(emptyStars, function () { 1905 | output.push(React.createElement('div', { 'class': 'wp-block-machoblocks-plugin__star-empty', 'aria-hidden': 'true' })); 1906 | }); 1907 | 1908 | return output; 1909 | } 1910 | }, { 1911 | key: 'render', 1912 | value: function render() { 1913 | var _this5 = this; 1914 | 1915 | var _state = this.state, 1916 | status = _state.status, 1917 | pluginList = _state.pluginList, 1918 | searchInput = _state.searchInput; 1919 | var _props = this.props, 1920 | attributes = _props.attributes, 1921 | setAttributes = _props.setAttributes, 1922 | className = _props.className; 1923 | var pluginSlug = attributes.pluginSlug, 1924 | pluginName = attributes.pluginName, 1925 | pluginIcon = attributes.pluginIcon, 1926 | pluginVersion = attributes.pluginVersion, 1927 | pluginAuthor = attributes.pluginAuthor, 1928 | pluginRating = attributes.pluginRating, 1929 | pluginDescription = attributes.pluginDescription, 1930 | pluginActiveInstalls = attributes.pluginActiveInstalls, 1931 | pluginDownloadLink = attributes.pluginDownloadLink; 1932 | 1933 | 1934 | if (status === 'loading-plugin') { 1935 | return [React.createElement( 1936 | Placeholder, 1937 | { 1938 | icon: 'admin-plugins', 1939 | label: __('Plugin Card') 1940 | }, 1941 | React.createElement(Spinner, null) 1942 | )]; 1943 | } 1944 | 1945 | if (pluginSlug === '') { 1946 | return [React.createElement( 1947 | Placeholder, 1948 | { 1949 | label: __('Plugin Card') 1950 | }, 1951 | React.createElement( 1952 | 'div', 1953 | { 'class': className + '__placeholder' }, 1954 | React.createElement(Dashicon, { icon: 'search' }), 1955 | 'loading-results' === status && React.createElement(Spinner, null), 1956 | React.createElement(TextControl, { 1957 | type: 'text', 1958 | placeholder: __('Search for a plugin'), 1959 | value: searchInput, 1960 | onChange: function onChange(value) { 1961 | return _this5.onSearchChange(value); 1962 | } 1963 | }), 1964 | pluginList.length > 0 && React.createElement( 1965 | 'div', 1966 | { 'class': className + '__search-results' }, 1967 | pluginList.map(function (plugin, index) { 1968 | return [React.createElement( 1969 | 'div', 1970 | { 1971 | key: index, 1972 | onClick: function onClick() { 1973 | return _this5.onPluginSelectClick(plugin); 1974 | } 1975 | }, 1976 | React.createElement('img', { src: _this5.getPluginIcon(plugin) }), 1977 | React.createElement( 1978 | 'span', 1979 | null, 1980 | plugin.name 1981 | ) 1982 | )]; 1983 | }) 1984 | ) 1985 | ) 1986 | )]; 1987 | } 1988 | 1989 | return [React.createElement( 1990 | Fragment, 1991 | null, 1992 | React.createElement(_controls2.default, this.props), 1993 | React.createElement( 1994 | 'div', 1995 | { 'class': className }, 1996 | React.createElement( 1997 | 'div', 1998 | { 'class': className + '__details' }, 1999 | React.createElement( 2000 | 'div', 2001 | null, 2002 | React.createElement('img', { 'class': className + '__icon', src: pluginIcon, alt: pluginName }), 2003 | React.createElement( 2004 | 'a', 2005 | { 'class': className + '__download', href: pluginDownloadLink }, 2006 | 'Download' 2007 | ) 2008 | ), 2009 | React.createElement( 2010 | 'div', 2011 | null, 2012 | React.createElement( 2013 | 'h5', 2014 | { 'class': className + '__name' }, 2015 | pluginName 2016 | ), 2017 | React.createElement( 2018 | 'div', 2019 | { 'class': className + '__description' }, 2020 | React.createElement( 2021 | 'p', 2022 | null, 2023 | pluginDescription 2024 | ) 2025 | ), 2026 | React.createElement( 2027 | 'div', 2028 | { 'class': className + '__sub' }, 2029 | React.createElement( 2030 | 'div', 2031 | { 'class': className + '__author' }, 2032 | 'by ', 2033 | React.createElement('span', { dangerouslySetInnerHTML: { __html: pluginAuthor } }) 2034 | ) 2035 | ) 2036 | ) 2037 | ), 2038 | React.createElement( 2039 | 'div', 2040 | { 'class': className + '__stats' }, 2041 | React.createElement( 2042 | 'div', 2043 | { 'class': className + '__installs' }, 2044 | React.createElement( 2045 | 'strong', 2046 | null, 2047 | __('Active Installations') 2048 | ), 2049 | React.createElement( 2050 | 'div', 2051 | null, 2052 | this.getNiceNumber(pluginActiveInstalls) 2053 | ) 2054 | ), 2055 | React.createElement( 2056 | 'div', 2057 | null, 2058 | React.createElement( 2059 | 'strong', 2060 | null, 2061 | __('Rating') 2062 | ), 2063 | React.createElement( 2064 | 'div', 2065 | { 'class': className + '__rating' }, 2066 | this.getStars(pluginRating) 2067 | ) 2068 | ), 2069 | React.createElement( 2070 | 'div', 2071 | { 'class': className + '__version' }, 2072 | React.createElement( 2073 | 'strong', 2074 | null, 2075 | __('Plugin Version') 2076 | ), 2077 | React.createElement( 2078 | 'div', 2079 | null, 2080 | pluginVersion 2081 | ) 2082 | ) 2083 | ) 2084 | ) 2085 | )]; 2086 | } 2087 | }]); 2088 | 2089 | return Edit; 2090 | }(Component); 2091 | 2092 | exports.default = Edit; 2093 | ; 2094 | 2095 | /***/ }), 2096 | /* 15 */ 2097 | /***/ (function(module, exports, __webpack_require__) { 2098 | 2099 | "use strict"; 2100 | 2101 | 2102 | Object.defineProperty(exports, "__esModule", { 2103 | value: true 2104 | }); 2105 | 2106 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 2107 | 2108 | exports.registerBlocks = registerBlocks; 2109 | 2110 | var _highlight = __webpack_require__(5); 2111 | 2112 | var highlight = _interopRequireWildcard(_highlight); 2113 | 2114 | var _clickToTweet = __webpack_require__(4); 2115 | 2116 | var clickToTweet = _interopRequireWildcard(_clickToTweet); 2117 | 2118 | var _pluginCard = __webpack_require__(6); 2119 | 2120 | var pluginCard = _interopRequireWildcard(_pluginCard); 2121 | 2122 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } 2123 | 2124 | /** 2125 | * WordPress dependencies 2126 | */ 2127 | var registerBlockType = wp.blocks.registerBlockType; 2128 | 2129 | // Category slug and title 2130 | 2131 | var category = { 2132 | slug: 'machoblocks' 2133 | }; 2134 | 2135 | function registerBlocks() { 2136 | [highlight, clickToTweet, pluginCard].forEach(function (block) { 2137 | 2138 | if (!block) { 2139 | return; 2140 | } 2141 | 2142 | var name = block.name, 2143 | icon = block.icon, 2144 | settings = block.settings; 2145 | 2146 | 2147 | registerBlockType('machoblocks/' + name, _extends({ category: category.slug, icon: { src: icon, foreground: '#6939f4' } }, settings)); 2148 | }); 2149 | }; 2150 | registerBlocks(); 2151 | 2152 | /***/ }) 2153 | /******/ ]); --------------------------------------------------------------------------------