diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/business-hours')
7 files changed, 9 insertions, 599 deletions
diff --git a/plugins/jetpack/extensions/blocks/business-hours/business-hours.php b/plugins/jetpack/extensions/blocks/business-hours/business-hours.php index e8a5e261..d3afa01d 100644 --- a/plugins/jetpack/extensions/blocks/business-hours/business-hours.php +++ b/plugins/jetpack/extensions/blocks/business-hours/business-hours.php @@ -105,36 +105,39 @@ function jetpack_business_hours_render( $attributes ) { } foreach ( $attributes['days'] as $day ) { - $content .= '<dt class="' . esc_attr( $day['name'] ) . '">' . + $content .= '<div class="jetpack-business-hours__item"><dt class="' . esc_attr( $day['name'] ) . '">' . ucfirst( $wp_locale->get_weekday( array_search( $day['name'], $days, true ) ) ) . '</dt>'; $content .= '<dd class="' . esc_attr( $day['name'] ) . '">'; $days_hours = ''; - foreach ( $day['hours'] as $hour ) { + foreach ( $day['hours'] as $key => $hour ) { $opening = strtotime( $hour['opening'] ); $closing = strtotime( $hour['closing'] ); if ( ! $opening || ! $closing ) { continue; } $days_hours .= sprintf( - /* Translators: Business opening hours info. */ - _x( 'From %1$s to %2$s', 'from business opening hour to closing hour', 'jetpack' ), + '%1$s - %2$s', date( $time_format, $opening ), date( $time_format, $closing ) ); - $days_hours .= '<br />'; + if ( $key + 1 < count( $day['hours'] ) ) { + $days_hours .= ', '; + } } if ( empty( $days_hours ) ) { $days_hours = esc_html__( 'Closed', 'jetpack' ); } $content .= $days_hours; - $content .= '</dd>'; + $content .= '</dd></div>'; } $content .= '</dl>'; + Jetpack_Gutenberg::load_assets_as_required( 'business-hours' ); + /** * Allows folks to filter the HTML content for the Business Hours block * diff --git a/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js b/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js deleted file mode 100644 index bab6958a..00000000 --- a/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js +++ /dev/null @@ -1,200 +0,0 @@ -/** - * External dependencies - */ -import classNames from 'classnames'; -import { __ } from '@wordpress/i18n'; -import { Component, Fragment } from '@wordpress/element'; -import { IconButton, TextControl, ToggleControl } from '@wordpress/components'; -import { isEmpty } from 'lodash'; - -const defaultOpen = '09:00'; -const defaultClose = '17:00'; - -class DayEdit extends Component { - renderInterval = ( interval, intervalIndex ) => { - const { day } = this.props; - const { opening, closing } = interval; - return ( - <Fragment key={ intervalIndex }> - <div className="business-hours__row"> - <div className={ classNames( day.name, 'business-hours__day' ) }> - { intervalIndex === 0 && this.renderDayToggle() } - </div> - <div className={ classNames( day.name, 'business-hours__hours' ) }> - <TextControl - type="time" - label={ __( 'Opening', 'jetpack' ) } - value={ opening } - className="business-hours__open" - placeholder={ defaultOpen } - onChange={ value => { - this.setHour( value, 'opening', intervalIndex ); - } } - /> - <TextControl - type="time" - label={ __( 'Closing', 'jetpack' ) } - value={ closing } - className="business-hours__close" - placeholder={ defaultClose } - onChange={ value => { - this.setHour( value, 'closing', intervalIndex ); - } } - /> - </div> - <div className="business-hours__remove"> - { day.hours.length > 1 && ( - <IconButton - isSmall - isLink - icon="trash" - onClick={ () => { - this.removeInterval( intervalIndex ); - } } - /> - ) } - </div> - </div> - { intervalIndex === day.hours.length - 1 && ( - <div className="business-hours__row business-hours-row__add"> - <div className={ classNames( day.name, 'business-hours__day' ) }> </div> - <div className={ classNames( day.name, 'business-hours__hours' ) }> - <IconButton - isLink - label={ __( 'Add Hours', 'jetpack' ) } - onClick={ this.addInterval } - > - { __( 'Add Hours', 'jetpack' ) } - </IconButton> - </div> - <div className="business-hours__remove"> </div> - </div> - ) } - </Fragment> - ); - }; - - setHour = ( hourValue, hourType, hourIndex ) => { - const { day, attributes, setAttributes } = this.props; - const { days } = attributes; - setAttributes( { - days: days.map( value => { - if ( value.name === day.name ) { - return { - ...value, - hours: value.hours.map( ( hour, index ) => { - if ( index === hourIndex ) { - return { - ...hour, - [ hourType ]: hourValue, - }; - } - return hour; - } ), - }; - } - return value; - } ), - } ); - }; - - toggleClosed = nextValue => { - const { day, attributes, setAttributes } = this.props; - const { days } = attributes; - - setAttributes( { - days: days.map( value => { - if ( value.name === day.name ) { - const hours = nextValue - ? [ - { - opening: defaultOpen, - closing: defaultClose, - }, - ] - : []; - return { - ...value, - hours, - }; - } - return value; - } ), - } ); - }; - - addInterval = () => { - const { day, attributes, setAttributes } = this.props; - const { days } = attributes; - day.hours.push( { opening: '', closing: '' } ); - setAttributes( { - days: days.map( value => { - if ( value.name === day.name ) { - return { - ...value, - hours: day.hours, - }; - } - return value; - } ), - } ); - }; - - removeInterval = hourIndex => { - const { day, attributes, setAttributes } = this.props; - const { days } = attributes; - - setAttributes( { - days: days.map( value => { - if ( day.name === value.name ) { - return { - ...value, - hours: value.hours.filter( ( hour, index ) => { - return hourIndex !== index; - } ), - }; - } - return value; - } ), - } ); - }; - - isClosed() { - const { day } = this.props; - return isEmpty( day.hours ); - } - - renderDayToggle() { - const { day, localization } = this.props; - return ( - <Fragment> - <span className="business-hours__day-name">{ localization.days[ day.name ] }</span> - <ToggleControl - label={ this.isClosed() ? __( 'Closed', 'jetpack' ) : __( 'Open', 'jetpack' ) } - checked={ ! this.isClosed() } - onChange={ this.toggleClosed } - /> - </Fragment> - ); - } - - renderClosed() { - const { day } = this.props; - return ( - <div className="business-hours__row business-hours-row__closed"> - <div className={ classNames( day.name, 'business-hours__day' ) }> - { this.renderDayToggle() } - </div> - <div className={ classNames( day.name, 'closed', 'business-hours__hours' ) }> </div> - <div className="business-hours__remove"> </div> - </div> - ); - } - - render() { - const { day } = this.props; - return this.isClosed() ? this.renderClosed() : day.hours.map( this.renderInterval ); - } -} - -export default DayEdit; diff --git a/plugins/jetpack/extensions/blocks/business-hours/components/day-preview.js b/plugins/jetpack/extensions/blocks/business-hours/components/day-preview.js deleted file mode 100644 index be0dd24b..00000000 --- a/plugins/jetpack/extensions/blocks/business-hours/components/day-preview.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * External dependencies - */ -import { _x, sprintf } from '@wordpress/i18n'; -import { Component, Fragment } from '@wordpress/element'; -import { date } from '@wordpress/date'; -import { isEmpty } from 'lodash'; - -class DayPreview extends Component { - formatTime( time ) { - const { timeFormat } = this.props; - const [ hours, minutes ] = time.split( ':' ); - const _date = new Date(); - if ( ! hours || ! minutes ) { - return false; - } - _date.setHours( hours ); - _date.setMinutes( minutes ); - return date( timeFormat, _date ); - } - - renderInterval = ( interval, key ) => { - return ( - <dd key={ key }> - { sprintf( - _x( 'From %s to %s', 'from business opening hour to closing hour', 'jetpack' ), - this.formatTime( interval.opening ), - this.formatTime( interval.closing ) - ) } - </dd> - ); - }; - - render() { - const { day, localization } = this.props; - const hours = day.hours.filter( - // remove any malformed or empty intervals - interval => this.formatTime( interval.opening ) && this.formatTime( interval.closing ) - ); - return ( - <Fragment> - <dt className={ day.name }>{ localization.days[ day.name ] }</dt> - { isEmpty( hours ) ? ( - <dd>{ _x( 'Closed', 'business is closed on a full day', 'jetpack' ) }</dd> - ) : ( - hours.map( this.renderInterval ) - ) } - </Fragment> - ); - } -} - -export default DayPreview; diff --git a/plugins/jetpack/extensions/blocks/business-hours/edit.js b/plugins/jetpack/extensions/blocks/business-hours/edit.js deleted file mode 100644 index 7649fd45..00000000 --- a/plugins/jetpack/extensions/blocks/business-hours/edit.js +++ /dev/null @@ -1,104 +0,0 @@ -/** - * External dependencies - */ -import apiFetch from '@wordpress/api-fetch'; -import classNames from 'classnames'; -import { __ } from '@wordpress/i18n'; -import { __experimentalGetSettings } from '@wordpress/date'; -import { BlockIcon } from '@wordpress/editor'; -import { Component } from '@wordpress/element'; -import { Placeholder } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import DayEdit from './components/day-edit'; -import DayPreview from './components/day-preview'; -import { icon } from '.'; - -const defaultLocalization = { - days: { - Sun: __( 'Sunday', 'jetpack' ), - Mon: __( 'Monday', 'jetpack' ), - Tue: __( 'Tuesday', 'jetpack' ), - Wed: __( 'Wednesday', 'jetpack' ), - Thu: __( 'Thursday', 'jetpack' ), - Fri: __( 'Friday', 'jetpack' ), - Sat: __( 'Saturday', 'jetpack' ), - }, - startOfWeek: 0, -}; - -class BusinessHours extends Component { - state = { - localization: defaultLocalization, - hasFetched: false, - }; - - componentDidMount() { - this.apiFetch(); - } - - apiFetch() { - this.setState( { data: defaultLocalization }, () => { - apiFetch( { path: '/wpcom/v2/business-hours/localized-week' } ).then( - data => { - this.setState( { localization: data, hasFetched: true } ); - }, - () => { - this.setState( { localization: defaultLocalization, hasFetched: true } ); - } - ); - } ); - } - - render() { - const { attributes, className, isSelected } = this.props; - const { days } = attributes; - const { localization, hasFetched } = this.state; - const { startOfWeek } = localization; - const localizedWeek = days.concat( days.slice( 0, startOfWeek ) ).slice( startOfWeek ); - - if ( ! hasFetched ) { - return ( - <Placeholder - icon={ <BlockIcon icon={ icon } /> } - label={ __( 'Loading business hours', 'jetpack' ) } - /> - ); - } - - if ( ! isSelected ) { - const settings = __experimentalGetSettings(); - const { - formats: { time }, - } = settings; - return ( - <dl className={ classNames( className, 'jetpack-business-hours' ) }> - { localizedWeek.map( ( day, key ) => { - return ( - <DayPreview - key={ key } - day={ day } - localization={ localization } - timeFormat={ time } - /> - ); - } ) } - </dl> - ); - } - - return ( - <div className={ classNames( className, 'is-edit' ) }> - { localizedWeek.map( ( day, key ) => { - return ( - <DayEdit key={ key } day={ day } localization={ localization } { ...this.props } /> - ); - } ) } - </div> - ); - } -} - -export default BusinessHours; diff --git a/plugins/jetpack/extensions/blocks/business-hours/editor.js b/plugins/jetpack/extensions/blocks/business-hours/editor.js deleted file mode 100644 index d05f4039..00000000 --- a/plugins/jetpack/extensions/blocks/business-hours/editor.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Internal dependencies - */ -import registerJetpackBlock from '../../shared/register-jetpack-block'; -import { name, settings } from '.'; - -registerJetpackBlock( name, settings ); diff --git a/plugins/jetpack/extensions/blocks/business-hours/editor.scss b/plugins/jetpack/extensions/blocks/business-hours/editor.scss deleted file mode 100644 index 18073276..00000000 --- a/plugins/jetpack/extensions/blocks/business-hours/editor.scss +++ /dev/null @@ -1,128 +0,0 @@ -@import '../../shared/styles/gutenberg-variables.scss'; - -.wp-block-jetpack-business-hours { - overflow: hidden; - - .business-hours__row { - display: flex; - - &.business-hours-row__add, - &.business-hours-row__closed { - margin-bottom: 20px; - } - - .business-hours__day { - width: 44%; - display: flex; - align-items: baseline; - - .business-hours__day-name { - width: 60%; - font-weight: bold; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .components-form-toggle { - margin-right: 4px; - } - } - - .business-hours__hours { - width: 44%; - margin: 0; - display: flex; - align-items: center; - flex-wrap: wrap; - - .components-base-control { - display: inline-block; - margin-bottom: 0; - width: 48%; - - &.business-hours__open { - margin-right: 4%; - } - - .components-base-control__label { - margin-bottom: 0; - } - } - } - } - - .business-hours__remove { - align-self: flex-end; - margin-bottom: 8px; - text-align: center; - width: 10%; - } - - .business-hours-row__add button:hover { - box-shadow: none !important; - } - - .business-hours__remove button { - display: block; - margin: 0 auto; - } - - .business-hours-row__add .components-button.is-default:hover, - .business-hours__remove .components-button.is-default:hover, - .business-hours-row__add .components-button.is-default:focus, - .business-hours__remove .components-button.is-default:focus, - .business-hours-row__add .components-button.is-default:active, - .business-hours__remove .components-button.is-default:active { - background: none; - box-shadow: none; - } -} - -/** - * We consider the editor area to be small when the business hours block is: - * - within a column block - * - in a screen < xlarge size with the sidebar open - * - in a screen < small size - * In these cases we'll apply small screen styles. - */ -@mixin editor-area-is-small { - @media ( max-width: $break-xlarge ) { - .is-sidebar-opened { - @content; - } - } - @media ( max-width: $break-small ) { - @content; - } - - .wp-block-columns { - @content; - } -} - -@include editor-area-is-small() { - .wp-block-jetpack-business-hours { - .business-hours__row { - flex-wrap: wrap; - - &.business-hours-row__add { - .business-hours__day, - .business-hours__remove { - display: none; - } - } - - .business-hours__day { - width: 100%; - } - - .business-hours__hours { - width: 78%; - } - .business-hours__remove { - width: 18%; - } - } - } -} diff --git a/plugins/jetpack/extensions/blocks/business-hours/index.js b/plugins/jetpack/extensions/blocks/business-hours/index.js deleted file mode 100644 index ee307afc..00000000 --- a/plugins/jetpack/extensions/blocks/business-hours/index.js +++ /dev/null @@ -1,101 +0,0 @@ -/** - * External dependencies - */ -import { __, _x } from '@wordpress/i18n'; -import { Path } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import './editor.scss'; -import BusinessHours from './edit'; -import renderMaterialIcon from '../../shared/render-material-icon'; - -/** - * Block Registrations: - */ - -export const name = 'business-hours'; - -export const icon = renderMaterialIcon( - <Path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" /> -); - -export const settings = { - title: __( 'Business Hours', 'jetpack' ), - description: __( 'Display opening hours for your business.', 'jetpack' ), - icon, - category: 'jetpack', - supports: { - html: true, - }, - keywords: [ - _x( 'opening hours', 'block search term', 'jetpack' ), - _x( 'closing time', 'block search term', 'jetpack' ), - _x( 'schedule', 'block search term', 'jetpack' ), - ], - attributes: { - days: { - type: 'array', - default: [ - { - name: 'Sun', - hours: [], // Closed by default - }, - { - name: 'Mon', - hours: [ - { - opening: '09:00', - closing: '17:00', - }, - ], - }, - { - name: 'Tue', - hours: [ - { - opening: '09:00', - closing: '17:00', - }, - ], - }, - { - name: 'Wed', - hours: [ - { - opening: '09:00', - closing: '17:00', - }, - ], - }, - { - name: 'Thu', - hours: [ - { - opening: '09:00', - closing: '17:00', - }, - ], - }, - { - name: 'Fri', - hours: [ - { - opening: '09:00', - closing: '17:00', - }, - ], - }, - { - name: 'Sat', - hours: [], // Closed by default - }, - ], - }, - }, - - edit: props => <BusinessHours { ...props } />, - - save: () => null, -}; |