-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Issue #27 - Start build the Block list block oik-blocklist
- Loading branch information
1 parent
93410a5
commit 9de6d04
Showing
6 changed files
with
357 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
/* | ||
* Block info renderer - displays the fields for the block info block | ||
* | ||
* @copyright (C) Copyright Bobbing Wide 2019 | ||
* @author Herb Miller @bobbingwide | ||
* | ||
*/ | ||
|
||
const { getBlockType } = wp.blocks; | ||
|
||
import { BlockiconStyled } from '../oik-blockicon/blockicons.js'; | ||
|
||
function BlockListStyled( prefix, showBlockTypeName, showTitle, showDescription, ...props ) { | ||
//var block = getBlockType( blockname ) ; | ||
//var blockicon = BlockiconStyled( blockname, props ); | ||
//var blockTypeName = showBlockTypeName ? <div>{ blockname }</div> : null; | ||
//var blockTitle = showTitle ? <div> {block.title } </div> : null; | ||
//var blockDescription = showDescription ? <div> { block.description } </div> : null; | ||
|
||
var prefix_array = prefix.split( '/' ); | ||
var namespace = prefix_array[0]; | ||
return( | ||
<ul><li>Blocks for {namespace}</li></ul> | ||
|
||
); | ||
|
||
|
||
} | ||
|
||
export { BlockListStyled }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
/* | ||
* Block prefix select control | ||
* | ||
* @TODO Reduce the list to just the prefixes | ||
* For the time being you select a block and we determine the prefix from the chosen block. | ||
* The onChange function will have to do that. | ||
* | ||
* | ||
* @copyright (C) Copyright Bobbing Wide 2019 | ||
* @author Herb Miller @bobbingwide | ||
* | ||
*/ | ||
|
||
const { Component } = wp.element; | ||
const{ getBlockTypes, getBlockType } = wp.blocks; | ||
const { BlockIcon } = wp.editor; | ||
const { SelectControl } = wp.components; | ||
|
||
function BlockPrefixSelect( { value, onChange, ...props } ) { | ||
|
||
const options = getOptions(); | ||
//console.log( options ); | ||
options.sort( compareValues ); | ||
//console.log( options ); | ||
|
||
return ( | ||
|
||
|
||
<SelectControl label="Prefix" value={ value } options={ options } onChange={ onChange } /> | ||
); | ||
//this.renderBlockiconList(); | ||
|
||
} | ||
|
||
function compareValues(a, b) { | ||
if (a.value < b.value ) | ||
return -1; | ||
if (a.value > b.value ) | ||
return 1; | ||
return 0; | ||
} | ||
|
||
|
||
/** | ||
* How do we reduce the list of Block types to a smaller array of Prefixes? | ||
* @returns {*} | ||
*/ | ||
|
||
function getOptions() { | ||
var block_types = getBlockTypes(); | ||
const namespaces = getNameSpaces( block_types ); | ||
const options = namespaces.map ( ( namespace ) => getBlockPrefixOption( namespace ) ); | ||
console.log( options ); | ||
return options; | ||
} | ||
|
||
function getBlockPrefixOption( namespace ) { | ||
return {'label': namespace, 'value': namespace }; | ||
} | ||
|
||
function onlyUnique(value, index, self) { | ||
return self.indexOf(value) === index; | ||
} | ||
|
||
function getNameSpaces( block_types) { | ||
var namespaces = block_types.map( ( block ) => getNameSpace( block )); | ||
var unique_namespaces = namespaces.filter( onlyUnique ); | ||
|
||
console.log( namespaces ); | ||
console.log( unique_namespaces ); | ||
return unique_namespaces; | ||
|
||
} | ||
|
||
function getNameSpace( block ) { | ||
var block_name = block.name; | ||
var prefix_array = block_name.split( '/' ); | ||
var namespace = prefix_array[0]; | ||
return namespace; | ||
} | ||
|
||
/** | ||
* So how do I get the icon into the option label? | ||
* It seems it's not possible. | ||
* | ||
* @param block | ||
* @returns {string} | ||
*/ | ||
|
||
function getOptionLabel( block ) { | ||
var label = `${block.name} - ${ block.title }`; | ||
return label; | ||
} | ||
|
||
|
||
|
||
|
||
export { BlockPrefixSelect }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
.wp-block-oik-block-blockicon { | ||
.is-style-svg64 { | ||
svg { | ||
width: 64px; | ||
height: 64px; | ||
max-height: 64px; | ||
max-width: 64px; | ||
} | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,191 @@ | ||
/** | ||
* Implements the Block list block | ||
* | ||
* This block displays a list of blocks associated with a block type name prefix e.g. core, core-embed, oik-block | ||
* I intend to use it to help populate the list of blocks for each component that we want to document. | ||
* | ||
* | ||
* | ||
* @copyright (C) Copyright Bobbing Wide 2019 | ||
* @author Herb Miller @bobbingwide | ||
*/ | ||
import './style.scss'; | ||
import './editor.scss'; | ||
|
||
// Get just the __() localization function from wp.i18n | ||
const { __ } = wp.i18n; | ||
// Get registerBlockType from wp.blocks | ||
const { | ||
registerBlockType, | ||
createBlock, | ||
} = wp.blocks; | ||
const { | ||
BlockIcon, | ||
InspectorControls, | ||
} = wp.editor; | ||
|
||
const { | ||
Toolbar, | ||
PanelBody, | ||
PanelRow, | ||
FormToggle, | ||
ServerSideRender, | ||
TextControl, | ||
ToggleControl, | ||
Dashicon, | ||
|
||
} = wp.components; | ||
const { Fragment } = wp.element; | ||
|
||
|
||
//import { DashiconsSelect } from './dashicons.js'; | ||
import { BlockiconsSelect, BlockiconStyled } from '../oik-blockicon/blockicons.js'; | ||
import { BlockListStyled } from './blocklist.js' | ||
import { BlockPrefixSelect } from './blockprefix.js'; | ||
//import {ToggleControl} from "../../../gutenberg-source/packages/components/build-module"; | ||
|
||
/** | ||
* Register the WordPress block | ||
*/ | ||
export default registerBlockType( | ||
// Namespaced, hyphens, lowercase, unique name | ||
'oik-block/blocklist', | ||
{ | ||
// Localize title using wp.i18n.__() | ||
title: __( 'Block list' ), | ||
|
||
description: 'Displays a list of Blocks for a chosen prefix', | ||
|
||
// Category Options: common, formatting, layout, widgets, embed | ||
category: 'widgets', | ||
|
||
// Dashicons Options - https://goo.gl/aTM1DQ | ||
icon: 'block-default', | ||
|
||
// Limit to 3 Keywords / Phrases | ||
keywords: [ | ||
__( 'list' ), | ||
__( 'oik' ), | ||
__( 'block'), | ||
], | ||
|
||
// Set for each piece of dynamic data used in your block | ||
|
||
attributes: { | ||
|
||
prefix: { | ||
type: 'string', | ||
default: 'oik-block' | ||
}, | ||
|
||
showBlockTypeName: { | ||
type: 'boolean', | ||
default: true | ||
}, | ||
|
||
showTitle: { | ||
type: 'boolean', | ||
default: true | ||
}, | ||
|
||
showDescription: { | ||
type: 'boolean', | ||
default: true | ||
} | ||
|
||
}, | ||
|
||
|
||
|
||
edit: props => { | ||
|
||
|
||
const onChangePrefix = ( event ) => { | ||
console.log( event ); | ||
props.setAttributes( { prefix: event } ); | ||
} | ||
|
||
const onChangeShowBlockTypeName = ( event ) => { | ||
props.setAttributes( { showBlockTypeName: ! props.attributes.showBlockTypeName } ); | ||
} | ||
const onChangeShowTitle = ( event ) => { | ||
props.setAttributes( { showTitle: ! props.attributes.showTitle } ); | ||
} | ||
|
||
const onChangeShowDescription = ( event ) => { | ||
props.setAttributes( { showDescription: ! props.attributes.showDescription } ); | ||
} | ||
|
||
var blocklist = BlockListStyled( props.attributes.prefix, | ||
props.attributes.showBlockTypeName, | ||
props.attributes.showTitle, | ||
props.attributes.showDescription, | ||
props ); | ||
|
||
|
||
return [ | ||
<InspectorControls > | ||
<PanelBody> | ||
|
||
<PanelRow> | ||
<TextControl | ||
label="Prefix" | ||
value={ props.attributes.prefix } | ||
onChange={ onChangePrefix } | ||
onFocus={ focus } | ||
/> | ||
</PanelRow> | ||
|
||
<PanelRow> | ||
<BlockPrefixSelect value={ props.attributes.prefix } onChange={ onChangePrefix } /> | ||
</PanelRow> | ||
<PanelRow> | ||
<ToggleControl | ||
label={ __( 'Show block type name' ) } | ||
checked={ !! props.attributes.showBlockTypeName } | ||
onChange={ onChangeShowBlockTypeName } | ||
|
||
/> | ||
</PanelRow> | ||
<PanelRow> | ||
<ToggleControl | ||
label={ __( 'Show block title' ) } | ||
checked={ !! props.attributes.showTitle } | ||
onChange={ onChangeShowTitle } | ||
|
||
/> | ||
|
||
</PanelRow> | ||
<PanelRow> | ||
<ToggleControl | ||
label={ __( 'Show block description' ) } | ||
checked={ !! props.attributes.showDescription } | ||
onChange={ onChangeShowDescription } | ||
|
||
/> | ||
|
||
</PanelRow> | ||
|
||
|
||
|
||
</PanelBody> | ||
|
||
</InspectorControls> | ||
, | ||
<div className={ props.className }> | ||
{ blocklist } | ||
</div> | ||
|
||
|
||
]; | ||
}, | ||
/* | ||
<ServerSideRender | ||
block="oik-block/dashicon" attributes={ props.attributes } | ||
/> | ||
*/ | ||
save: props => { | ||
return BlockListStyled( props.attributes.prefix, props.attributes.showBlockTypeName, props.attributes.showTitle, props.attributes.showDescription, props ); | ||
}, | ||
}, | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
|
||
/* oik-blockicon/style.scss */ | ||
.wp-block-oik-block-blockicon.svg64 svg { | ||
width: 64px; | ||
height: 64px; | ||
} | ||
|
||
.svg64 .editor-block-icon, | ||
.svg64 .editor-block-icon svg { | ||
width: 64px; | ||
height: 64px; | ||
max-height: 64px; | ||
max-width: 64px; | ||
} | ||
|
||
|
||
.wp-block-oik-block-blockicon .is-style-svg64 { | ||
svg { | ||
width: 64px; | ||
height: 64px; | ||
max-height: 64px; | ||
max-width: 64px; | ||
} | ||
|
||
|
||
} |