Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use new initial template selector #11

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Open

Use new initial template selector #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6c5fc5e
implemented template selector on initial add
scorewinner Jul 24, 2019
36e34eb
remove templateLock from templates
scorewinner Jul 24, 2019
5cdd03c
added custom template
scorewinner Jul 24, 2019
d06a2de
add template selector in inspector controls
scorewinner Jul 25, 2019
89faec4
use only lodash.times
scorewinner Jul 25, 2019
b9b3fb0
eslint fixes
scorewinner Jul 25, 2019
9d6a21b
create edit.js
scorewinner Jul 26, 2019
90856d0
eslint fixes
scorewinner Jul 26, 2019
7c2edfd
use withSelect / withDispatch instead of directly access functions
tschortsch Jul 28, 2019
c81e59f
fix code style
tschortsch Jul 28, 2019
f6dcf32
remove debug code
tschortsch Jul 28, 2019
337491b
fix setting attributes when first template is selected
tschortsch Jul 28, 2019
27d51dc
implement backwards compatibility for old template structure
tschortsch Jul 29, 2019
27e8018
show template name in template selector button
tschortsch Jul 30, 2019
0f5916c
add missing icon when template has no icon set
tschortsch Jul 30, 2019
663fa9b
pass wp version and gutenberg version to javascript to conditionally …
tschortsch Jul 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 49 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
},
"dependencies": {
"cgb-scripts": "^1.18.1",
"lodash.noop": "^3.0.1"
"lodash.noop": "^3.0.1",
"lodash.times": "^4.3.2",
"semver": "^6.3.0"
}
}
14 changes: 13 additions & 1 deletion src/class-wp-bootstrap-blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ public function enqueue_block_assets() {
*/
public function enqueue_block_editor_assets() {
// Scripts.
wp_enqueue_script(
wp_register_script(
$this->token . '-js', // Handle.
esc_url( $this->assets_url ) . 'blocks.build.js', // block.build.js: We register the block here. Built with Webpack.
array(
Expand All @@ -157,6 +157,18 @@ public function enqueue_block_editor_assets() {
true // Enqueue the script in the footer.
);

global $wp_version;
wp_localize_script(
$this->token . '-js',
'wpBootstrapBlocks',
array(
'gutenbergVersion' => defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : false,
'wpVersion' => $wp_version,
)
);

wp_enqueue_script( $this->token . '-js' );

// Styles.
wp_enqueue_style(
$this->token . '-editor-styles', // Handle.
Expand Down
215 changes: 4 additions & 211 deletions src/row/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,120 +2,15 @@
* BLOCK: wp-bootstrap-blocks/row
*/

import edit from './edit';

// Import CSS.
import './style.scss';
import './editor.scss';

import { alignBottom, alignCenter, alignTop } from './icons';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks
const { InnerBlocks, InspectorControls, BlockControls, AlignmentToolbar } = wp.editor;
const { SelectControl, CheckboxControl, PanelBody } = wp.components;
const { Fragment } = wp.element;
const { dispatch, select } = wp.data;
const { applyFilters } = wp.hooks;

const ALLOWED_BLOCKS = [ 'wp-bootstrap-blocks/column' ];
let templates = {
'1-1': {
label: __( '2 Columns (1:1)', 'wp-bootstrap-blocks' ),
templateLock: 'all',
blocks: [
[
'wp-bootstrap-blocks/column',
{
sizeMd: 6,
},
],
[
'wp-bootstrap-blocks/column',
{
sizeMd: 6,
},
],
],
},
'1-2': {
label: __( '2 Columns (1:2)', 'wp-bootstrap-blocks' ),
templateLock: 'all',
blocks: [
[
'wp-bootstrap-blocks/column',
{
sizeMd: 4,
},
],
[
'wp-bootstrap-blocks/column',
{
sizeMd: 8,
},
],
],
},
'2-1': {
label: __( '2 Columns (2:1)', 'wp-bootstrap-blocks' ),
templateLock: 'all',
blocks: [
[
'wp-bootstrap-blocks/column',
{
sizeMd: 8,
},
],
[
'wp-bootstrap-blocks/column',
{
sizeMd: 4,
},
],
],
},
'1-1-1': {
label: __( '3 Columns (1:1:1)', 'wp-bootstrap-blocks' ),
templateLock: 'all',
blocks: [
[
'wp-bootstrap-blocks/column',
{
sizeMd: 4,
},
],
[
'wp-bootstrap-blocks/column',
{
sizeMd: 4,
},
],
[
'wp-bootstrap-blocks/column',
{
sizeMd: 4,
},
],
],
},
};
templates = applyFilters( 'wpBootstrapBlocks.row.templates', templates );

const enableCustomTemplate = applyFilters( 'wpBootstrapBlocks.row.enableCustomTemplate', true );
if ( enableCustomTemplate ) {
templates.custom = {
label: __( 'Custom', 'wp-bootstrap-blocks' ),
templateLock: false,
blocks: [
[ 'wp-bootstrap-blocks/column' ],
],
};
}

const getColumnsTemplate = ( template ) => {
return templates[ template ] ? templates[ template ].blocks : [];
};
const getColumnsTemplateLock = ( template ) => {
return templates[ template ] ? templates[ template ].templateLock : false;
};
const { InnerBlocks } = wp.editor;

registerBlockType( 'wp-bootstrap-blocks/row', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
Expand All @@ -141,109 +36,7 @@ registerBlockType( 'wp-bootstrap-blocks/row', {
};
},

edit( { className, attributes, setAttributes, clientId } ) {
const { template, noGutters, alignment, verticalAlignment } = attributes;
const templateOptions = [];
Object.keys( templates ).forEach( ( templateName ) => {
templateOptions.push( {
label: templates[ templateName ].label,
value: templateName,
} );
} );
const onTemplateChange = ( selectedTemplate ) => {
// Grab columns of existing block
const cols = select( 'core/editor' ).getBlocksByClientId( clientId )[ 0 ].innerBlocks;

// Update sizes to fit with selected template
cols.forEach( ( col, index ) => {
if ( templates[ selectedTemplate ] && templates[ selectedTemplate ].blocks.length > index ) {
const newAttributes = templates[ selectedTemplate ].blocks[ index ][ 1 ];
dispatch( 'core/editor' ).updateBlockAttributes( col.clientId, newAttributes );
}
} );

setAttributes( {
template: selectedTemplate,
} );
};

const alignmentControls = [
{
icon: 'editor-alignleft',
title: __( 'Align columns left', 'wp-bootstrap-blocks' ),
align: 'left',
},
{
icon: 'editor-aligncenter',
title: __( 'Align columns center', 'wp-bootstrap-blocks' ),
align: 'center',
},
{
icon: 'editor-alignright',
title: __( 'Align columns right', 'wp-bootstrap-blocks' ),
align: 'right',
},
];

const verticalAlignmentControls = [
{
icon: alignTop,
title: __( 'Align columns top', 'wp-bootstrap-blocks' ),
align: 'top',
},
{
icon: alignCenter,
title: __( 'Align columns center', 'wp-bootstrap-blocks' ),
align: 'center',
},
{
icon: alignBottom,
title: __( 'Align columns bottom', 'wp-bootstrap-blocks' ),
align: 'bottom',
},
];

return (
<Fragment>
<InspectorControls>
<PanelBody>
<SelectControl
label={ __( 'Template', 'wp-bootstrap-blocks' ) }
value={ template }
options={ templateOptions }
onChange={ selectedTemplate => {
onTemplateChange( selectedTemplate );
} }
/>
<CheckboxControl
label={ __( 'No Gutters', 'wp-bootstrap-blocks' ) }
checked={ noGutters }
onChange={ isChecked => setAttributes( { noGutters: isChecked } ) }
/>
</PanelBody>
</InspectorControls>
<BlockControls>
<AlignmentToolbar
value={ alignment }
onChange={ newAlignment => setAttributes( { alignment: newAlignment } ) }
alignmentControls={ alignmentControls }
/>
<AlignmentToolbar
value={ verticalAlignment }
onChange={ newVerticalAlignment => setAttributes( { verticalAlignment: newVerticalAlignment } ) }
alignmentControls={ verticalAlignmentControls }
/>
</BlockControls>
<div className={ className }>
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
template={ getColumnsTemplate( template ) }
templateLock={ getColumnsTemplateLock( template ) }
/>
</div>
</Fragment>
);
},
edit,

save() {
return (
Expand Down
Loading