diff --git a/src/blocks-library/button-group/attributes.js b/src/blocks-library/button-group/attributes.js new file mode 100755 index 0000000..215d803 --- /dev/null +++ b/src/blocks-library/button-group/attributes.js @@ -0,0 +1,47 @@ +const attributes = { + spacing: { + type: 'string', + default: '' + }, + + alignment: { + type: 'string', + default: 'left' + }, + alignmentTablet: { + type: 'string', + default: '' + }, + alignmentMobile: { + type: 'string', + default: '' + }, + + direction: { + type: 'string', + default: 'row' + }, + directionTablet: { + type: 'string', + default: '' + }, + directionMobile: { + type: 'string', + default: '' + }, + + width: { + type: 'string', + default: 'auto' + }, + widthTablet: { + type: 'string', + default: 'auto' + }, + widthMobile: { + type: 'string', + default: 'auto' + }, +}; + +export default attributes; \ No newline at end of file diff --git a/src/blocks-library/button-group/edit.js b/src/blocks-library/button-group/edit.js new file mode 100755 index 0000000..679d6f7 --- /dev/null +++ b/src/blocks-library/button-group/edit.js @@ -0,0 +1,105 @@ +/** +* External dependencies +*/ +import classnames from "classnames"; +import Inspector from './inspector'; +import './editor.scss'; + + +/** +* WordPress dependencies +*/ +import { __ } from '@wordpress/i18n'; +import { + Fragment, + Component +} from '@wordpress/element'; +import { InnerBlocks } from '@wordpress/block-editor'; + + +/** +* Module Constants +*/ +const baseClass = 'wp-block-getwid-button-group'; + + +/** +* Module Constants +*/ +const TEMPLATE = [ + ['core/button', {text: __('Button', 'getwid') }], + ['core/button', {text: __('Button', 'getwid') }] +]; + + +/** +* Create an Component +*/ +class Edit extends Component{ + + constructor(){ + super( ...arguments ); + } + + render(){ + const { + attributes:{ + spacing, + + alignment, + alignmentTablet, + alignmentMobile, + + direction, + directionTablet, + directionMobile, + + width, + widthTablet, + widthMobile, + }, + setAttributes, + className + } = this.props; + + const wrapperClasses = classnames( + `${baseClass}__wrapper`, + { + [`has-spacing-${spacing}`]: spacing !== '', + + [`has-alignment-${alignment}`]: alignment !== 'left', + [`has-alignment-tablet-${alignmentTablet}`]: alignmentTablet !== '', + [`has-alignment-mobile-${alignmentMobile}`]: alignmentMobile !== '', + + [`has-direction-${direction}`]: direction !== 'row', + [`has-direction-tablet-${directionTablet}`]: directionTablet !== '', + [`has-direction-mobile-${directionMobile}`]: directionMobile !== '', + + [`has-width-${width}`]: width !== 'auto', + [`has-width-tablet-${widthTablet}`]: widthTablet !== 'auto', + [`has-width-mobile-${widthMobile}`]: widthMobile !== 'auto', + } + ); + + return( + + + + +
+
+ +
+
+ + + ) + + } +} + +export default Edit; \ No newline at end of file diff --git a/src/blocks-library/button-group/editor.scss b/src/blocks-library/button-group/editor.scss new file mode 100755 index 0000000..c0bcd6a --- /dev/null +++ b/src/blocks-library/button-group/editor.scss @@ -0,0 +1,285 @@ +.wp-block-getwid-button-group { + overflow: initial !important; + + .wp-block-button { + width: auto; + max-width: none; + + &__link { + display: block; + width: 100%; + } + } + + .wp-block-getwid-button-group__wrapper { + display: block !important; + + .wp-block[data-type="core/button"] { + max-width: none; + + .wp-block-button { + width: 100%; + } + } + + &.has-spacing-small { + margin-bottom: 0 !important; + + .block-list-appender { + padding: 0 10px 10px 10px; + } + } + + &.has-spacing-medium { + margin-bottom: 0 !important; + + .block-list-appender { + padding: 0 15px 15px 15px; + } + } + + &.has-spacing-normal { + margin-bottom: 0 !important; + + .block-list-appender { + padding: 0 20px 20px 20px; + } + } + + &.has-spacing-large { + margin-bottom: 0 !important; + + .block-list-appender { + padding: 0 25px 25px 25px; + } + } + + &.has-alignment-center .block-editor-block-list__layout { + justify-content: center; + } + + &.has-alignment-right .block-editor-block-list__layout { + justify-content: flex-end; + } + + &.has-alignment-tablet-center .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + justify-content: center; + } + } + + &.has-alignment-tablet-right .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + justify-content: flex-end; + } + } + + &.has-alignment-tablet-left .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + justify-content: flex-start; + } + } + + &.has-alignment-mobile-center .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + justify-content: center; + } + } + + &.has-alignment-mobile-right .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + justify-content: flex-end; + } + } + + &.has-alignment-mobile-left .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + justify-content: flex-start; + } + } + + &.has-direction-column { + .block-editor-block-list__layout { + flex-direction: column; + align-items: flex-start; + } + + &.has-alignment-center .block-editor-block-list__layout { + align-items: center; + } + + &.has-alignment-right .block-editor-block-list__layout { + align-items: flex-end; + } + + &.has-alignment-tablet-center .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: center; + } + } + + &.has-alignment-tablet-right .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: flex-end; + } + } + + &.has-alignment-tablet-left .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: flex-start; + } + } + + &.has-alignment-mobile-center .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + align-items: center; + } + } + + &.has-alignment-mobile-right .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + align-items: flex-end; + } + } + + &.has-alignment-mobile-left .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + align-items: flex-start; + } + } + } + + &.has-direction-tablet-column { + .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + flex-direction: column; + } + } + + &.has-alignment-tablet-center .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: center; + } + } + + &.has-alignment-tablet-right .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: flex-end; + } + } + + &.has-alignment-tablet-left .block-editor-block-list__layout { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: flex-start; + } + } + } + + &.has-direction-mobile-column { + .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + flex-direction: column; + } + } + + &.has-alignment-mobile-center .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + align-items: center; + } + } + + &.has-alignment-mobile-right .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + align-items: flex-end; + } + } + + &.has-alignment-mobile-left .block-editor-block-list__layout { + @media screen and (max-width: 767px) { + align-items: flex-start; + } + } + } + + &.has-width-100 { + // @todo delete the code below after the minimum WP version is raised to 5.5 + .wp-block[data-type="core/button"]:not(.wp-block-button) { + width: 100%; + + .wp-block-button__link, + .wp-block-button, + .wp-block-button > .block-editor-rich-text { + display: block; + } + } + + .block-list-appender { + width: 100%; + } + } + + &.has-width-50 { + // @todo delete the code below after the minimum WP version is raised to 5.5 + .wp-block[data-type="core/button"]:not(.wp-block-button) { + width: 50%; + + .wp-block-button__link, + .wp-block-button, + .wp-block-button > .block-editor-rich-text { + display: block; + } + } + } + + &.has-width-33 { + // @todo delete the code below after the minimum WP version is raised to 5.5 + .wp-block[data-type="core/button"]:not(.wp-block-button) { + width: 33.3333%; + + .wp-block-button__link, + .wp-block-button, + .wp-block-button > .block-editor-rich-text { + display: block; + } + } + } + + &.has-width-25 { + // @todo delete the code below after the minimum WP version is raised to 5.5 + .wp-block[data-type="core/button"]:not(.wp-block-button) { + width: 25%; + + .wp-block-button__link, + .wp-block-button, + .wp-block-button > .block-editor-rich-text { + display: block; + } + } + } + + &.has-width-20 { + // @todo delete the code below after the minimum WP version is raised to 5.5 + .wp-block[data-type="core/button"]:not(.wp-block-button) { + width: 20%; + + .wp-block-button__link, + .wp-block-button, + .wp-block-button > .block-editor-rich-text { + display: block; + } + } + } + + } + + .block-editor-block-list__layout { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + + > .wp-block { + margin: 0; + } + } +} diff --git a/src/blocks-library/button-group/index.js b/src/blocks-library/button-group/index.js new file mode 100755 index 0000000..808728a --- /dev/null +++ b/src/blocks-library/button-group/index.js @@ -0,0 +1,66 @@ +/** +* Internal dependencies +*/ +import attributes from './attributes'; +import Edit from './edit'; +import save from './save'; +import './style.scss'; + +/** +* External dependencies +*/ +import { __ } from '@wordpress/i18n'; + +import { registerBlockType, createBlock } from '@wordpress/blocks'; +import { select } from '@wordpress/data'; + +/** +* Module Constants +*/ +const blockName = 'getwid/button-group'; + +/** +* Register the block +*/ +registerBlockType('getwid/button-group', { + title: __( 'Button Group', 'getwid' ), + icon: , + category: 'getwid-blocks', + keywords: [ + ], + supports: { + inserter: true + }, + transforms: { + to: [ + { + type: 'block', + blocks: [ 'core/button' ], + transform: ( attributes ) => { + const clientId = select('core/block-editor').getSelectedBlockClientId(); + const innerBlocksArr = select('core/block-editor').getBlock(clientId).innerBlocks; + let inner_attributes = []; + + if (innerBlocksArr.length){ + innerBlocksArr.forEach( (item, index) => { + if (item.attributes.text != ''){ + inner_attributes.push({ + text: item.attributes.text, + url: item.attributes.url, + }); + } + }); + } + + return inner_attributes.map( ( { text, url } ) => createBlock( 'core/button', { + text, + url, + } ) ); + } + } + ] + }, + attributes, + edit: Edit, + save +}); diff --git a/src/blocks-library/button-group/inspector.js b/src/blocks-library/button-group/inspector.js new file mode 100755 index 0000000..085f54d --- /dev/null +++ b/src/blocks-library/button-group/inspector.js @@ -0,0 +1,214 @@ +/** +* WordPress dependencies +*/ +import { __ } from '@wordpress/i18n'; +import {Component, Fragment} from '@wordpress/element'; +import { + InspectorControls, +} from '@wordpress/block-editor'; +import { + PanelBody, + SelectControl, + TabPanel, + RadioControl +} from '@wordpress/components'; + + +/** +* Create an Inspector Controls +*/ +export default class Inspector extends Component { + + render() { + + const { + attributes: { + spacing, + + alignment, + alignmentTablet, + alignmentMobile, + + direction, + directionTablet, + directionMobile, + + width, + widthTablet, + widthMobile, + }, + setAttributes + } = this.props; + + return ( + + + setAttributes({spacing})} + options={[ + {value: '', label: __('Default', 'getwid')}, + {value: 'small', label: __('Small', 'getwid')}, + {value: 'medium', label: __('Medium', 'getwid')}, + {value: 'normal', label: __('Normal', 'getwid')}, + {value: 'large', label: __('Large', 'getwid')}, + {value: 'none', label: __('None', 'getwid')}, + ]} + /> + + + { + (tab) => { + switch (tab.name){ + case 'desktop': { + return ( + + setAttributes({alignment})} + options={[ + {value: 'left', label: __('Left', 'getwid')}, + {value: 'center', label: __('Center', 'getwid')}, + {value: 'right', label: __('Right', 'getwid')}, + ]} + /> + setAttributes({direction})} + options={[ + {value: 'row', label: __('Horizontal', 'getwid')}, + {value: 'column', label: __('Vertical', 'getwid')}, + ]} + /> + setAttributes({width})} + options={[ + {value: 'auto', label: __('Auto', 'getwid')}, + {value: '100', label: __('100%', 'getwid')}, + {value: '50', label: __('50%', 'getwid')}, + {value: '33', label: __('33%', 'getwid')}, + {value: '25', label: __('25%', 'getwid')}, + {value: '20', label: __('20%', 'getwid')}, + ]} + /> + + ) + } + case 'tablet': { + return( + + setAttributes({alignmentTablet})} + options={[ + {value: '', label: __('Default', 'getwid')}, + {value: 'left', label: __('Left', 'getwid')}, + {value: 'center', label: __('Center', 'getwid')}, + {value: 'right', label: __('Right', 'getwid')}, + ]} + /> + setAttributes({directionTablet})} + options={[ + {value: '', label: __('Default', 'getwid')}, + {value: 'row', label: __('Horizontal', 'getwid')}, + {value: 'column', label: __('Vertical', 'getwid')}, + ]} + /> + setAttributes({widthTablet})} + options={[ + {value: 'auto', label: __('Auto', 'getwid')}, + {value: '100', label: __('100%', 'getwid')}, + {value: '50', label: __('50%', 'getwid')}, + {value: '33', label: __('33%', 'getwid')}, + {value: '25', label: __('25%', 'getwid')}, + {value: '20', label: __('20%', 'getwid')}, + ]} + /> + + ) + } + case 'mobile': { + return( + + setAttributes({alignmentMobile})} + options={[ + {value: '', label: __('Default', 'getwid')}, + {value: 'left', label: __('Left', 'getwid')}, + {value: 'center', label: __('Center', 'getwid')}, + {value: 'right', label: __('Right', 'getwid')}, + ]} + /> + setAttributes({directionMobile})} + options={[ + {value: '', label: __('Default', 'getwid')}, + {value: 'row', label: __('Horizontal', 'getwid')}, + {value: 'column', label: __('Vertical', 'getwid')}, + ]} + /> + setAttributes({widthMobile})} + options={[ + {value: 'auto', label: __('Auto', 'getwid')}, + {value: '100', label: __('100%', 'getwid')}, + {value: '50', label: __('50%', 'getwid')}, + {value: '33', label: __('33%', 'getwid')}, + {value: '25', label: __('25%', 'getwid')}, + {value: '20', label: __('20%', 'getwid')}, + ]} + /> + + + ) + } + } + } + + } + + + + + ); + } + +} \ No newline at end of file diff --git a/src/blocks-library/button-group/save.js b/src/blocks-library/button-group/save.js new file mode 100755 index 0000000..94ba60c --- /dev/null +++ b/src/blocks-library/button-group/save.js @@ -0,0 +1,79 @@ +/** +* External dependencies +*/ +import classnames from "classnames"; + + +/** +* WordPress dependencies +*/ +import { + Component +} from '@wordpress/element' +import { + InnerBlocks +} from '@wordpress/block-editor' + + +/** +* Module Constants +*/ +const baseClass = 'wp-block-getwid-button-group'; + + +/** +* Component Output +*/ +class Save extends Component{ + render() { + const { + attributes:{ + spacing, + + alignment, + alignmentTablet, + alignmentMobile, + + direction, + directionTablet, + directionMobile, + + width, + widthTablet, + widthMobile, + + className, + } + } = this.props; + + + const wrapperClasses = classnames( + `${baseClass}__wrapper`, + { + [`has-spacing-${spacing}`]: spacing !== '', + + [`has-alignment-${alignment}`]: alignment !== 'left', + [`has-alignment-tablet-${alignmentTablet}`]: alignmentTablet !== '', + [`has-alignment-mobile-${alignmentMobile}`]: alignmentMobile !== '', + + [`has-direction-${direction}`]: direction !== 'row', + [`has-direction-tablet-${directionTablet}`]: directionTablet !== '', + [`has-direction-mobile-${directionMobile}`]: directionMobile !== '', + + [`has-width-${width}`]: width !== 'auto', + [`has-width-tablet-${widthTablet}`]: widthTablet !== 'auto', + [`has-width-mobile-${widthMobile}`]: widthMobile !== 'auto', + } + ); + + return ( +
+
+ +
+
+ ); + } +} + +export default Save; \ No newline at end of file diff --git a/src/blocks-library/button-group/style.scss b/src/blocks-library/button-group/style.scss new file mode 100755 index 0000000..10590ad --- /dev/null +++ b/src/blocks-library/button-group/style.scss @@ -0,0 +1,347 @@ +/*! + * getwid-button-group + */ + +.wp-block-getwid-button-group { + overflow: hidden; + + .wp-block-button { + margin: 0; + padding: 0 5px 5px 5px; + + &__link { + width: 100%; + } + + &.wp-block-button__width { + + &-25 { + width: 25%; + } + + &-50 { + width: 50%; + } + + &-75 { + width: 75%; + } + + &-100 { + width: 100%; + } + } + } + + &__wrapper { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start #{'/*rtl: flex-end*/'}; + margin: 0 -5px -5px -5px !important; + + &.has-spacing-none { + margin: 0 !important; + + .wp-block-button { + margin: 0; + } + } + + &.has-spacing-small { + margin: 0 -10px -10px -10px !important; + //padding: 0 10px 10px 10px; + .wp-block-button { + padding: 0 10px 10px 10px; + } + } + + &.has-spacing-medium { + margin: 0 -15px -15px -15px !important; + //padding: 0 15px 15px 15px; + .wp-block-button { + padding: 0 15px 15px 15px; + } + } + + &.has-spacing-normal { + margin: 0 -20px -20px -20px !important; + //padding: 0 20px 20px 20px; + .wp-block-button { + padding: 0 20px 20px 20px; + } + } + + &.has-spacing-large { + margin: 0 -25px -25px -25px !important; + //padding: 0 25px 25px 25px; + .wp-block-button { + padding: 0 25px 25px 25px; + } + } + + + &.has-alignment-center { + justify-content: center; + } + + &.has-alignment-right { + justify-content: flex-end #{'/*rtl: flex-start*/'}; + } + + &.has-alignment-tablet-center { + @media screen and (min-width: 768px) and(max-width: 991px) { + justify-content: center; + } + } + + &.has-alignment-tablet-right { + @media screen and (min-width: 768px) and(max-width: 991px) { + justify-content: flex-end #{'/*rtl: flex-start*/'}; + } + } + + &.has-alignment-tablet-left { + @media screen and (min-width: 768px) and(max-width: 991px) { + justify-content: flex-start #{'/*rtl: flex-end*/'}; + } + } + + &.has-alignment-mobile-center { + @media screen and (max-width: 767px) { + justify-content: center; + } + } + + &.has-alignment-mobile-right { + @media screen and (max-width: 767px) { + justify-content: flex-end #{'/*rtl: flex-start*/'}; + } + } + + &.has-alignment-mobile-left { + @media screen and (max-width: 767px) { + justify-content: flex-start #{'/*rtl: flex-end*/'}; + } + } + + &.has-direction-column { + flex-direction: column; + align-items: flex-start #{'/*rtl: flex-end*/'}; + + &.has-alignment-center { + align-items: center; + } + + &.has-alignment-right { + align-items: flex-end #{'/*rtl: flex-start*/'}; + } + + &.has-alignment-tablet-center { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: center; + } + } + + &.has-alignment-tablet-right { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: flex-end #{'/*rtl: flex-start*/'}; + } + } + + &.has-alignment-tablet-left { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: flex-start #{'/*rtl: flex-end*/'}; + } + } + + &.has-alignment-mobile-center { + @media screen and (max-width: 767px) { + align-items: center; + } + } + + &.has-alignment-mobile-right { + @media screen and (max-width: 767px) { + align-items: flex-end #{'/*rtl: flex-start*/'}; + } + } + + &.has-alignment-mobile-left { + @media screen and (max-width: 767px) { + align-items: flex-start #{'/*rtl: flex-end*/'}; + } + } + } + + &.has-direction-tablet-column { + @media screen and (min-width: 768px) and(max-width: 991px) { + flex-direction: column; + } + + &.has-alignment-tablet-center { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: center; + } + } + + &.has-alignment-tablet-right { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: flex-end #{'/*rtl: flex-start*/'}; + } + } + + &.has-alignment-tablet-left { + @media screen and (min-width: 768px) and(max-width: 991px) { + align-items: flex-start #{'/*rtl: flex-end*/'}; + } + } + } + + &.has-direction-tablet-row { + @media screen and (min-width: 768px) and(max-width: 991px) { + flex-direction: row; + } + } + + &.has-direction-mobile-column { + @media screen and (max-width: 767px) { + flex-direction: column; + } + + &.has-alignment-mobile-center { + @media screen and (max-width: 767px) { + align-items: center; + } + } + + &.has-alignment-mobile-right { + @media screen and (max-width: 767px) { + align-items: flex-end #{'/*rtl: flex-start*/'}; + } + } + + &.has-alignment-mobile-left { + @media screen and (max-width: 767px) { + align-items: flex-start #{'/*rtl: flex-end*/'}; + } + } + } + + &.has-direction-mobile-row { + @media screen and (max-width: 767px) { + flex-direction: row; + } + } + } +} + +.has-width-100 { + .wp-block-button { + width: 100%; + } +} + +.has-width-50 { + .wp-block-button { + width: 50%; + } +} + +.has-width-33 { + .wp-block-button { + width: 33.3333%; + } +} + +.has-width-25 { + .wp-block-button { + width: 25%; + } +} + +.has-width-20 { + .wp-block-button { + width: 20%; + } +} + +.has-width-tablet-100 { + @media screen and (min-width: 768px) and(max-width: 991px) { + .wp-block-button { + width: 100%; + } + } +} + +.has-width-tablet-50 { + @media screen and (min-width: 768px) and(max-width: 991px) { + .wp-block-button { + width: 50%; + } + } +} + +.has-width-tablet-33 { + @media screen and (min-width: 768px) and(max-width: 991px) { + .wp-block-button { + width: 33.3333%; + } + } +} + +.has-width-tablet-25 { + @media screen and (min-width: 768px) and(max-width: 991px) { + .wp-block-button { + width: 25%; + } + } +} + +.has-width-tablet-20 { + @media screen and (min-width: 768px) and(max-width: 991px) { + .wp-block-button { + width: 20%; + } + } +} + +.has-width-mobile-100 { + @media screen and (max-width: 767px) { + .wp-block-button { + width: 100%; + } + } +} + +.has-width-mobile-50 { + @media screen and (max-width: 767px) { + .wp-block-button { + width: 50%; + } + } +} + +.has-width-mobile-33 { + @media screen and (max-width: 767px) { + .wp-block-button { + width: 33.3333%; + } + } +} + +.has-width-mobile-25 { + @media screen and (max-width: 767px) { + .wp-block-button { + width: 25%; + } + } +} + +.has-width-mobile-20 { + @media screen and (max-width: 767px) { + .wp-block-button { + width: 20%; + } + } +} diff --git a/src/blocks-library/index.js b/src/blocks-library/index.js index a210065..52ad6e2 100644 --- a/src/blocks-library/index.js +++ b/src/blocks-library/index.js @@ -2,3 +2,4 @@ * Blocks */ import './shields-badge'; +import './button-group'; diff --git a/src/handlers/github.js b/src/handlers/github.js index 2d7318e..071f73e 100644 --- a/src/handlers/github.js +++ b/src/handlers/github.js @@ -72,7 +72,8 @@ function attachEditor( dom ) { 'core/table', 'core/paragraph', - 'gitenberg/shields-badge' + 'gitenberg/shields-badge', + 'getwid/button-group' ] } }