This repository has been archived by the owner on Mar 18, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
APPLE
authored and
APPLE
committed
Mar 5, 2018
1 parent
1cc217c
commit 0d94c16
Showing
9 changed files
with
4,256 additions
and
41 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
Binary file not shown.
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
Binary file not shown.
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,73 @@ | ||
| /** | ||
| * Internal block libraries | ||
| */ | ||
| const { __ } = wp.i18n; | ||
| const { Component } = wp.element; | ||
| const { | ||
| InspectorControls, | ||
| BlockDescription, | ||
| ColorPalette, | ||
| } = wp.blocks; | ||
| const { | ||
| PanelBody, | ||
| PanelRow, | ||
| PanelColor, | ||
| TextControl, | ||
| } = wp.components; | ||
|
|
||
| /** | ||
| * Create an Inspector Controls wrapper Component | ||
| */ | ||
| export default class Inspector extends Component { | ||
|
|
||
| constructor( props ) { | ||
| super( ...arguments ); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <InspectorControls key="inspector"> | ||
| <PanelBody title={__("Section Spacings")}> | ||
| <PanelRow> | ||
| <TextControl | ||
| label={__("Vertical padding (rem)")} | ||
| value={this.props.attributes.verticalPadding} | ||
| onChange={this.props.onChangePadding} | ||
| /> | ||
| </PanelRow> | ||
| <PanelRow> | ||
| <TextControl | ||
| label={__("Top Margin (rem)")} | ||
| value={this.props.attributes.topMargin} | ||
| onChange={this.props.onChangeMarginTop} | ||
| /> | ||
| <TextControl | ||
| label={__("Bottom Margin (rem)")} | ||
| value={this.props.attributes.bottomMargin} | ||
| onChange={this.props.onChangeMarginBottom} | ||
| /> | ||
| </PanelRow> | ||
|
|
||
| <PanelColor | ||
| title={__("Section Background Color")} | ||
| colorValue={this.props.attributes.sectionBackgroundColor} | ||
| > | ||
| <ColorPalette | ||
| value={this.props.attributes.sectionBackgroundColor} | ||
| onChange={this.props.onChangeSectionBackgroundColor} | ||
| /> | ||
| </PanelColor> | ||
|
|
||
| <PanelRow> | ||
| <TextControl | ||
| label={__("Section ID")} | ||
| value={this.props.attributes.id} | ||
| onChange={this.props.onChangeSectionID} | ||
| /> | ||
| </PanelRow> | ||
| </PanelBody> | ||
| </InspectorControls> | ||
| ); | ||
| } | ||
|
|
||
| } |
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,163 @@ | ||
| /** | ||
| * BLOCK: Two Columns | ||
| * | ||
| * A temporary block to show 2 columns until the native columns block improves | ||
| */ | ||
|
|
||
| /** | ||
| * Block Dependencies | ||
| */ | ||
| import icons from "../icons"; | ||
| import Inspector from './inspector'; | ||
| import { times } from 'lodash'; | ||
| import memoize from 'memize'; | ||
| /** | ||
| * Internal block libraries | ||
| */ | ||
|
|
||
| const { __, sprintf } = wp.i18n; // Import __() from wp.i18n | ||
| const { | ||
| registerBlockType, | ||
| BlockControls, | ||
| InnerBlocks, | ||
| InspectorControls | ||
| } = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE | ||
| const { | ||
| Button, | ||
| Toolbar, | ||
| Tooltip, | ||
| Dashicon, | ||
| PanelBody, | ||
| PanelRow, | ||
| TextControl | ||
| } = wp.components; | ||
|
|
||
| /** | ||
| * Returns the layouts configuration for a given number of columns. | ||
| * | ||
| * @param {number} columns Number of columns. | ||
| * | ||
| * @return {Object[]} Columns layout configuration. | ||
| */ | ||
| const getColumnLayouts = memoize( ( columns ) => { | ||
| return times( columns, ( n ) => ( { | ||
| name: `column-${ n + 1 }`, | ||
| label: sprintf( __( 'Column %d' ), n + 1 ), | ||
| icon: 'columns', | ||
| } ) ); | ||
| } ); | ||
|
|
||
| /** | ||
| * Register: aa Gutenberg Block. | ||
| * | ||
| * Registers a new block provided a unique name and an object defining its | ||
| * behavior. Once registered, the block is made editor as an option to any | ||
| * editor interface where blocks are implemented. | ||
| * | ||
| * @param {string} name Block name. | ||
| * @param {Object} settings Block settings. | ||
| * @return {?WPBlock} The block, if it has been successfully | ||
| * registered; otherwise `undefined`. | ||
| */ | ||
| registerBlockType("cgb/block-two-columns", { | ||
| // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block. | ||
| title: __("Two Columns", "CGB"), // Block title. | ||
| icon: "dashicons-screenoptions", // Block icon from Dashicons | ||
| category: "layout", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed. | ||
| keywords: [__("two-columns — CGB Block"), __("Two Columns")], | ||
| attributes: { | ||
| columns: { | ||
| type: 'number', | ||
| default: 2, | ||
| }, | ||
| textFirstAlignment: { | ||
| type: "boolean", | ||
| default: false | ||
| }, | ||
| columnWidth: { | ||
| type: "number", | ||
| default: 50, | ||
| } | ||
| }, | ||
|
|
||
| // The "edit" property must be a valid function. | ||
| edit: props => { | ||
|
|
||
| const toggleTextFirstAlignment = () => { | ||
| props.setAttributes({ | ||
| textFirstAlignment: !props.attributes.textFirstAlignment | ||
| }); | ||
| }; | ||
| const onChangeColumnWidth = value => { | ||
| props.setAttributes({ | ||
| columnWidth: value | ||
| }) | ||
| }; | ||
| return [ | ||
| !! props.focus && ( | ||
| <Inspector | ||
| { ...{ onChangeColumnWidth, ...props } } | ||
| /> | ||
| ), | ||
| <div className={props.className}> | ||
| {!!props.focus && ( | ||
| <BlockControls key="custom-controls"> | ||
| <Toolbar className="components-toolbar"> | ||
| <Tooltip text={__("Switch image/text alignment")}> | ||
| <Button | ||
| className="components-button components-icon-button components-toolbar__control" | ||
| onClick={toggleTextFirstAlignment} | ||
| > | ||
| <Dashicon icon="image-flip-horizontal" /> | ||
| </Button> | ||
| </Tooltip> | ||
| </Toolbar> | ||
| </BlockControls> | ||
| )} | ||
|
|
||
| <div | ||
| className="flex row" | ||
| style={{ | ||
| flexDirection: props.attributes.textFirstAlignment | ||
| ? "row-reverse" | ||
| : "row" | ||
| }} | ||
| > | ||
| <div className="col-1" key="container" style={{ | ||
| width: props.attributes.columnWidth + '%' | ||
| }}> | ||
| <InnerBlocks layouts={ getColumnLayouts( props.attributes.columns ) }/> | ||
| </div> | ||
| <div class="col-2" key="container" style={{ | ||
| flex: 1, | ||
| }}> | ||
| <InnerBlocks layouts={ getColumnLayouts( props.attributes.columns ) }/> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ]; | ||
| }, | ||
|
|
||
| // The "save" property must be specified and must be a valid function. | ||
| save: function(props) { | ||
| const colOrder = props.attributes.textFirstAlignment | ||
| ? "row-reverse" | ||
| : "row"; | ||
| return ( | ||
| <div className={props.className}> | ||
| <div className="flex row" style={{ flexDirection: colOrder }}> | ||
| <div className="col-1" style={{ | ||
| width: props.attributes.columnWidth + '%' | ||
| }}> | ||
| <InnerBlocks.Content /> | ||
| </div> | ||
| <div className="col-2" style={{ | ||
| flex: 1, | ||
| }}> | ||
| <InnerBlocks.Content /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| }); |
Oops, something went wrong.