Browse Source

Adiciona scripts de customização do bloco de colunas

master
Guilherme Capanema 6 years ago
parent
commit
0ced65022c
9 changed files with 299 additions and 5 deletions
  1. +26
    -4
      admin/class-reuna-blocos-admin.php
  2. +2
    -0
      admin/dist/js/editor.js
  3. +14
    -0
      admin/dist/js/editor.js.LICENSE.txt
  4. +137
    -0
      admin/js/editor.jsx
  5. +2
    -1
      includes/class-reuna-blocos.php
  6. +1
    -0
      mix-manifest.json
  7. +112
    -0
      package-lock.json
  8. +3
    -0
      package.json
  9. +2
    -0
      webpack.mix.js

+ 26
- 4
admin/class-reuna-blocos-admin.php View File

@ -76,20 +76,42 @@ class Reuna_Blocos_Admin {
{
}
public function register_material_block()
/**
* Register the assets for the block editor.
*
* @since 1.5.0
*/
public function enqueue_block_editor_assets()
{
wp_enqueue_script('reuna-blocos/editor.js', plugin_dir_url(__FILE__) . 'dist/js/editor.js', ['wp-blocks', 'wp-dom-ready', 'wp-edit-post'], $this->version, true);
}
/**
* Register the material block.
*
* @since 1.0.0
*/
public function register_material_block_type()
{
acf_register_block([
acf_register_block_type([
'name' => 'material',
'title' => __('Material', 'reuna-blocos'),
'description' => __('Material para download', 'reuna-blocos'),
'category' => 'common',
'icon' => 'media-default',
'keywords' => ['material', 'reuna'],
'render_template' => plugin_dir_path( __FILE__ ) . 'views/material.php',
'enqueue_style' => plugin_dir_url( __FILE__ ) . 'dist/css/blocos.css'
'render_template' => plugin_dir_path(__FILE__) . 'views/material.php',
'enqueue_assets' => function() {
wp_enqueue_style('reuna-blocos/material.css', plugin_dir_url(__FILE__) . 'dist/css/blocos.css', [], $this->version);
},
]);
}
/**
* Register the custom fields for the material block.
*
* @since 1.0.0
*/
public function register_material_fields()
{
register_extended_field_group([


+ 2
- 0
admin/dist/js/editor.js
File diff suppressed because it is too large
View File


+ 14
- 0
admin/dist/js/editor.js.LICENSE.txt View File

@ -0,0 +1,14 @@
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/**
* @license
* Lodash <https://lodash.com/>
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/

+ 137
- 0
admin/js/editor.jsx View File

@ -0,0 +1,137 @@
import classnames from 'classnames';
import { assign } from 'lodash';
const { addFilter } = wp.hooks;
const { __ } = wp.i18n;
const { Fragment } = wp.element;
const { InspectorControls, InspectorAdvancedControls } = wp.editor
const { createHigherOrderComponent } = wp.compose;
const { SelectControl, ToggleControl } = wp.components
const spacingOptions = [
{
label: __('Normal'),
value: '',
},
{
label: __('Pequeno'),
value: 'sm',
},
{
label: __('Médio'),
value: 'md',
},
{
label: __('Grande'),
value: 'lg',
},
];
/**
* Add spacing control attribute to block.
*
* @param {object} settings Current block settings.
* @param {string} name Name of block.
*
* @returns {object} Modified block settings.
*/
addFilter('blocks.registerBlockType', 'reuna/columns/attribute/spacing', function(settings, name) {
if (name !== 'core/columns') {
return settings;
}
settings.attributes = assign(settings.attributes, {
invertOnMobile: {
type: 'boolean',
default: false,
},
keepOnMobile: {
type: 'boolean',
default: false,
},
spacing: {
type: 'string',
default: spacingOptions[0].value,
},
});
return settings;
});
addFilter('editor.BlockEdit', 'reuna-blocos/custom-column-controls', createHigherOrderComponent(function(BlockEdit) {
return function(props) {
if (props.name !== 'core/columns') {
return (
<BlockEdit {...props} />
);
}
const { invertOnMobile, keepOnMobile, spacing } = props.attributes;
return (
<Fragment>
<BlockEdit {...props} />
<InspectorControls>
<PanelBody
title={ __('Responsividade') }
initialOpen={ false }
>
<ToggleControl
label={ __('Inverter ordem das colunas em celulares') }
checked={ invertOnMobile }
onChange={ () => setAttributes({ invertOnMobile: ! invertOnMobile }) }
/>
<ToggleControl
label={ __('Manter colunas em celulares') }
checked={ keepOnMobile }
onChange={ () => setAttributes({ keepOnMobile: ! keepOnMobile }) }
/>
</PanelBody>
</InspectorControls>
<InspectorAdvancedControls>
<SelectControl
label={ __('Espaçamento entre colunas') }
value={ spacing }
options={ spacingOptions }
onChange={ () => setAttributes({ spacing: spacing }) }
/>
</InspectorAdvancedControls>
</Fragment>
);
};
}, 'customColumnControls'));
/**
* Add custom element class in save element.
*
* @param {Object} extraProps Block element.
* @param {Object} blockType Blocks object.
* @param {Object} attributes Blocks attributes.
*
* @return {Object} extraProps Modified block element.
*/
addFilter('blocks.getSaveContent.extraProps', 'reuna-blocos/add-custom-columns-classes', function(extraProps, blockType, attributes) {
if (blockType.name !== 'core/columns') {
return extraProps;
}
const { invertOnMobile, keepOnMobile, spacing } = attributes;
if (invertOnMobile) {
extraProps.className = classnames(extraProps.className, 'invert-on-mobile');
}
if (keepOnMobile) {
extraProps.className = classnames(extraProps.className, 'keep-on-mobile');
}
if (spacing) {
extraProps.className = classnames(extraProps.className, `has-spacing-${spacing}`);
}
return extraProps;
});

+ 2
- 1
includes/class-reuna-blocos.php View File

@ -156,7 +156,8 @@ class Reuna_Blocos {
$this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_styles' );
$this->loader->add_action( 'admin_enqueue_scripts', $plugin_admin, 'enqueue_scripts' );
$this->loader->add_action( 'acf/init', $plugin_admin, 'register_material_block' );
$this->loader->add_action( 'enqueue_block_editor_assets', $plugin_admin, 'enqueue_block_editor_assets' );
$this->loader->add_action( 'acf/init', $plugin_admin, 'register_material_block_type' );
$this->loader->add_action( 'acf/init', $plugin_admin, 'register_material_fields' );
}


+ 1
- 0
mix-manifest.json View File

@ -1,3 +1,4 @@
{
"/admin/dist/js/editor.js": "/admin/dist/js/editor.js",
"/admin/dist/css/blocos.css": "/admin/dist/css/blocos.css"
}

+ 112
- 0
package-lock.json View File

@ -79,6 +79,27 @@
"@babel/types": "^7.10.3"
}
},
"@babel/helper-builder-react-jsx": {
"version": "7.10.3",
"resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.3.tgz",
"integrity": "sha512-vkxmuFvmovtqTZknyMGj9+uQAZzz5Z9mrbnkJnPkaYGfKTaSsYcjQdXP0lgrWLVh8wU6bCjOmXOpx+kqUi+S5Q==",
"dev": true,
"requires": {
"@babel/helper-annotate-as-pure": "^7.10.1",
"@babel/types": "^7.10.3"
}
},
"@babel/helper-builder-react-jsx-experimental": {
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.1.tgz",
"integrity": "sha512-irQJ8kpQUV3JasXPSFQ+LCCtJSc5ceZrPFVj6TElR6XCHssi3jV8ch3odIrNtjJFRZZVbrOEfJMI79TPU/h1pQ==",
"dev": true,
"requires": {
"@babel/helper-annotate-as-pure": "^7.10.1",
"@babel/helper-module-imports": "^7.10.1",
"@babel/types": "^7.10.1"
}
},
"@babel/helper-compilation-targets": {
"version": "7.10.2",
"resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.2.tgz",
@ -462,6 +483,15 @@
"@babel/helper-plugin-utils": "^7.8.0"
}
},
"@babel/plugin-syntax-jsx": {
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.1.tgz",
"integrity": "sha512-+OxyOArpVFXQeXKLO9o+r2I4dIoVoy6+Uu0vKELrlweDM3QJADZj+Z+5ERansZqIZBcLj42vHnDI8Rz9BnRIuQ==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.10.1"
}
},
"@babel/plugin-syntax-nullish-coalescing-operator": {
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
@ -747,6 +777,68 @@
"@babel/helper-plugin-utils": "^7.10.1"
}
},
"@babel/plugin-transform-react-display-name": {
"version": "7.10.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.3.tgz",
"integrity": "sha512-dOV44bnSW5KZ6kYF6xSHBth7TFiHHZReYXH/JH3XnFNV+soEL1F5d8JT7AJ3ZBncd19Qul7SN4YpBnyWOnQ8KA==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.10.3"
}
},
"@babel/plugin-transform-react-jsx": {
"version": "7.10.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.3.tgz",
"integrity": "sha512-Y21E3rZmWICRJnvbGVmDLDZ8HfNDIwjGF3DXYHx1le0v0mIHCs0Gv5SavyW5Z/jgAHLaAoJPiwt+Dr7/zZKcOQ==",
"dev": true,
"requires": {
"@babel/helper-builder-react-jsx": "^7.10.3",
"@babel/helper-builder-react-jsx-experimental": "^7.10.1",
"@babel/helper-plugin-utils": "^7.10.3",
"@babel/plugin-syntax-jsx": "^7.10.1"
}
},
"@babel/plugin-transform-react-jsx-development": {
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.10.1.tgz",
"integrity": "sha512-XwDy/FFoCfw9wGFtdn5Z+dHh6HXKHkC6DwKNWpN74VWinUagZfDcEJc3Y8Dn5B3WMVnAllX8Kviaw7MtC5Epwg==",
"dev": true,
"requires": {
"@babel/helper-builder-react-jsx-experimental": "^7.10.1",
"@babel/helper-plugin-utils": "^7.10.1",
"@babel/plugin-syntax-jsx": "^7.10.1"
}
},
"@babel/plugin-transform-react-jsx-self": {
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.1.tgz",
"integrity": "sha512-4p+RBw9d1qV4S749J42ZooeQaBomFPrSxa9JONLHJ1TxCBo3TzJ79vtmG2S2erUT8PDDrPdw4ZbXGr2/1+dILA==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.10.1",
"@babel/plugin-syntax-jsx": "^7.10.1"
}
},
"@babel/plugin-transform-react-jsx-source": {
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.1.tgz",
"integrity": "sha512-neAbaKkoiL+LXYbGDvh6PjPG+YeA67OsZlE78u50xbWh2L1/C81uHiNP5d1fw+uqUIoiNdCC8ZB+G4Zh3hShJA==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.10.1",
"@babel/plugin-syntax-jsx": "^7.10.1"
}
},
"@babel/plugin-transform-react-pure-annotations": {
"version": "7.10.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.3.tgz",
"integrity": "sha512-n/fWYGqvTl7OLZs/QcWaKMFdADPvC3V6jYuEOpPyvz97onsW9TXn196fHnHW1ZgkO20/rxLOgKnEtN1q9jkgqA==",
"dev": true,
"requires": {
"@babel/helper-annotate-as-pure": "^7.10.1",
"@babel/helper-plugin-utils": "^7.10.3"
}
},
"@babel/plugin-transform-regenerator": {
"version": "7.10.3",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.3.tgz",
@ -928,6 +1020,21 @@
"esutils": "^2.0.2"
}
},
"@babel/preset-react": {
"version": "7.10.1",
"resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.10.1.tgz",
"integrity": "sha512-Rw0SxQ7VKhObmFjD/cUcKhPTtzpeviEFX1E6PgP+cYOhQ98icNqtINNFANlsdbQHrmeWnqdxA4Tmnl1jy5tp3Q==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.10.1",
"@babel/plugin-transform-react-display-name": "^7.10.1",
"@babel/plugin-transform-react-jsx": "^7.10.1",
"@babel/plugin-transform-react-jsx-development": "^7.10.1",
"@babel/plugin-transform-react-jsx-self": "^7.10.1",
"@babel/plugin-transform-react-jsx-source": "^7.10.1",
"@babel/plugin-transform-react-pure-annotations": "^7.10.1"
}
},
"@babel/runtime": {
"version": "7.10.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.3.tgz",
@ -2198,6 +2305,11 @@
}
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",


+ 3
- 0
package.json View File

@ -15,12 +15,15 @@
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/preset-react": "^7.10.1",
"cross-env": "^7.0.2",
"laravel-mix": "^5.0.4",
"sass": "^1.26.9",
"sass-loader": "^8.0.2"
},
"dependencies": {
"classnames": "^2.2.6",
"lodash": "^4.17.15",
"tailwindcss": "^1.4.6"
}
}

+ 2
- 0
webpack.mix.js View File

@ -17,3 +17,5 @@ mix.sass('admin/sass/blocos.scss', 'admin/dist/css')
processCssUrls: false,
postCss: [ tailwindcss('tailwind.config.js') ],
});
mix.react('admin/js/editor.jsx', 'admin/dist/js');