Skip to content

Commit

Permalink
Refactor oik-block/person for wp-scripts and block.json #47
Browse files Browse the repository at this point in the history
  • Loading branch information
@bobbingwide
bobbingwide committed Aug 12, 2021
1 parent f6c3053 commit 7d0a68f
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 148 deletions.
2 changes: 1 addition & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@ import './oik-blocklist'; // Displays a list of Blocks for a selected prefix
import './oik-content'; // Dynamic content block
import './oik-fields'; // From oik-fields - [bw_fields] and [bw_field] shortcode
import './oik-nivo'; // From oik-nivo-slider nivo
import './oik-person'; // From oik-user bw_user and bw_follow_me etc
import './oik-person'; // From oik-user bw_user and bw_follow_me etc
Empty file added src/oik-person/block.json
View file
Empty file.
192 changes: 45 additions & 147 deletions src/oik-person/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,109 +3,56 @@
*
* - Depends on oik-user
*
* @copyright (C) Copyright Bobbing Wide 2018,2019, 2020
* @copyright (C) Copyright Bobbing Wide 2018,2019,2020,2021
* @author Herb Miller @bobbingwide
*/

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

//import Input from './input';
//import TextControl from '@wordpress/components-text

// Get just the __() localization function from wp.i18n
const { __ } = wp.i18n;
// Get registerBlockType and Editable from wp.blocks
const {
registerBlockType,
} = wp.blocks;
const {
Editable,

InnerBlocks,
ServerSideRender,
} = wp.editor;
const {
InspectorControls,
} = wp.blockEditor;

const {
Toolbar,
Button,
Tooltip,
PanelBody,
PanelRow,
FormToggle,
SelectControl,
TextControl,

} = wp.components;

const Fragment = wp.element.Fragment;

import { map } from 'lodash';
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

import { registerBlockType, createBlock } from '@wordpress/blocks';
import {AlignmentControl, BlockControls, InspectorControls, useBlockProps, PlainText, BlockIcon} from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import {
Toolbar,
PanelBody,
PanelRow,
FormToggle,
TextControl,
TextareaControl,
ToggleControl,
SelectControl } from '@wordpress/components';
import { Fragment} from '@wordpress/element';
import { map, partial } from 'lodash';

var themeOptions = {
none: "Logos",
//dash: "Dashicons",
gener: "Genericons",

};
themeOptions = map( themeOptions, ( key, label ) => ( { value: label, label: key } ) );
//console.log( themeOptions );



//var TextControl = wp.blocks.InspectorControls.TextControl;

/**
* Register e
* Register
*/
export default registerBlockType(
// Namespaced, hyphens, lowercase, unique name
'oik-block/person',
{
// Localize title using wp.i18n.__()
title: __( 'Person' ),

description: 'Displays a person\'s information',

// Category Options: common, formatting, layout, widgets, embed
category: 'common',

// Dashicons Options - https://goo.gl/aTM1DQ
icon: 'admin-users',

// Limit to 3 Keywords / Phrases
keywords: [
__( 'Person' ),
__( 'oik' ),
],

// Set for each piece of dynamic data used in your block
attributes: {

user: {
type: 'string',
default: '',
},

fields: {
type: 'string',
default: 'gravatar/about,bio,follow_me',
},

theme: {
type: 'string',
default: '',
}

},

edit: props => {
const onChangeInput = ( event ) => {
props.setAttributes( { issue: event.target.value } );

const { attributes, setAttributes, instanceId, focus, isSelected } = props;
const { textAlign, label } = props.attributes;
const blockProps = useBlockProps( {
className: classnames( {
[ `has-text-align-${ textAlign }` ]: textAlign,
} ),
} );
const onChangeFields = ( event ) => {
props.setAttributes( { fields: event } );
};

const onChangeUser = ( event ) => {
Expand All @@ -116,85 +63,36 @@ export default registerBlockType(
props.setAttributes( { theme: event } );
}

var lsb = '['; // [
var rsb = ']'; // ]
var user = props.attributes.user;


var equivalent_shortcode = `${lsb}bw_user user="${user}" fields="${ props.attributes.fields }"
theme="${ props.attributes.theme }"${rsb}`;


return [




<InspectorControls>
<PanelBody key="pb">
<PanelRow key="pruser">
<TextControl label="User"
value={ props.attributes.user }
id="user"
return (
<Fragment>
<InspectorControls>
<PanelBody>
<PanelRow>
<TextControl label="User"
value={ props.attributes.user }
onChange={ onChangeUser }
/>
</PanelRow>
/>
</PanelRow>
<PanelRow>
<SelectControl label="Follow me icons style" value={ props.attributes.theme } options={ themeOptions } onChange={ onChangeTheme } />
</PanelRow>

<PanelRow>
Equivalent shortcode<br />
{equivalent_shortcode}
<TextControl label="Fields"
value={ props.attributes.fields }
onChange={ onChangeFields }
/>
</PanelRow>

</PanelBody>


</InspectorControls>
,
<div className={ props.className } key="perinspector">


<Fragment>

{equivalent_shortcode}

<hr />

{!props.isSelected &&


<div {...blockProps}>
<ServerSideRender
block="oik-block/person" attributes={props.attributes}
block="oik-block/person" attributes={props.attributes}
/>
}
</Fragment>

</div>
];
},


saver: props => {
// console.log( props );
//var shortcode = {props.attributes.issue} ;
var lsb = '[';
var rsb = ']';
var user = props.attributes.user;



return (
<div className={props.className } key="person">

<Fragment>
{lsb}
bw_user user="{user}" fields=gravatar/about,bio,follow_me
{rsb}
<hr />
</Fragment>
</div>
</div>
</Fragment>
);
},

Expand Down

0 comments on commit 7d0a68f

Please sign in to comment.