Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

introduce block title component (https://github.com/woocommerce/woocommerce-blocks/pull/1240) 

* introduce block title component

* style with prettier

* rename component class

* update readme
This commit is contained in:
Seghir Nadir 2019-11-21 18:21:14 +01:00 committed by GitHub
parent 2f3c4623b7
commit aa2e2d8f1e
5 changed files with 71 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
plugins/woocommerce-blocks/assets/js/blocks/active-filters/edit.js
View File

@ -2,9 +2,10 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { InspectorControls, PlainText } from '@wordpress/block-editor';
import { InspectorControls } from '@wordpress/block-editor';
import { Disabled, PanelBody, withSpokenMessages } from '@wordpress/components';
import HeadingToolbar from '@woocommerce/block-components/heading-toolbar';
import BlockTitle from '@woocommerce/block-components/block-title';
/**
* Internal dependencies
@ -72,20 +73,14 @@ const Edit = ( { attributes, setAttributes } ) => {
);
};
const TagName = `h${ headingLevel }`;
return (
<div className={ className }>
{ getInspectorControls() }
<TagName>
<PlainText
className="wc-block-attribute-filter-heading"
value={ heading }
onChange={ ( value ) =>
setAttributes( { heading: value } )
}
/>
</TagName>
<BlockTitle
headingLevel={ headingLevel }
heading={ heading }
onChange={ ( value ) => setAttributes( { heading: value } ) }
/>
<Disabled>
<Block attributes={ attributes } isPreview />
</Disabled>

25
plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/edit.js
View File

@ -3,11 +3,7 @@
*/
import { __, sprintf, _n } from '@wordpress/i18n';
import { Fragment, useState, useCallback } from '@wordpress/element';
import {
InspectorControls,
BlockControls,
PlainText,
} from '@wordpress/block-editor';
import { InspectorControls, BlockControls } from '@wordpress/block-editor';
import {
Placeholder,
Disabled,
@ -23,6 +19,7 @@ import { mapValues, toArray, sortBy, find } from 'lodash';
import { ATTRIBUTES } from '@woocommerce/block-settings';
import { getAdminLink } from '@woocommerce/navigation';
import HeadingToolbar from '@woocommerce/block-components/heading-toolbar';
import BlockTitle from '@woocommerce/block-components/block-title';
/**
* Internal dependencies
@ -321,8 +318,6 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
);
};
const TagName = `h${ headingLevel }`;
return Object.keys( ATTRIBUTES ).length === 0 ? (
noAttributesPlaceholder()
) : (
@ -333,15 +328,13 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
renderEditMode()
) : (
<div className={ className }>
<TagName>
<PlainText
className="wc-block-attribute-filter-heading"
value={ heading }
onChange={ ( value ) =>
setAttributes( { heading: value } )
}
/>
</TagName>
<BlockTitle
headingLevel={ headingLevel }
heading={ heading }
onChange={ ( value ) =>
setAttributes( { heading: value } )
}
/>
<Disabled>
<Block attributes={ attributes } isEditor />
</Disabled>

21
plugins/woocommerce-blocks/assets/js/blocks/price-filter/edit.js
View File

@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
import { InspectorControls, PlainText } from '@wordpress/block-editor';
import { InspectorControls } from '@wordpress/block-editor';
import {
Placeholder,
Disabled,
@ -14,6 +14,7 @@ import {
import { PRODUCT_COUNT } from '@woocommerce/block-settings';
import { getAdminLink } from '@woocommerce/navigation';
import HeadingToolbar from '@woocommerce/block-components/heading-toolbar';
import BlockTitle from '@woocommerce/block-components/block-title';
/**
* Internal dependencies
@ -151,8 +152,6 @@ export default function( { attributes, setAttributes } ) {
</Placeholder>
);
const TagName = `h${ headingLevel }`;
return (
<Fragment>
{ PRODUCT_COUNT === 0 ? (
@ -160,15 +159,13 @@ export default function( { attributes, setAttributes } ) {
) : (
<div className={ className }>
{ getInspectorControls() }
<TagName>
<PlainText
className="wc-block-attribute-filter-heading"
value={ heading }
onChange={ ( value ) =>
setAttributes( { heading: value } )
}
/>
</TagName>
<BlockTitle
headingLevel={ headingLevel }
heading={ heading }
onChange={ ( value ) =>
setAttributes( { heading: value } )
}
/>
<Disabled>
<Block attributes={ attributes } isPreview />
</Disabled>

4
plugins/woocommerce-blocks/assets/js/components/README.md
View File

@ -43,3 +43,7 @@ These are a collection of custom icons used by the blocks or components, usually
## Utilities
There are some functions that work across components, these have been extracted into this utilities folder.
## Block Title
A block that is responsible for showing the title for some of our blocks.

42
plugins/woocommerce-blocks/assets/js/components/block-title/index.js Normal file
View File

@ -0,0 +1,42 @@
/**
* External dependencies
*/
import PropTypes from 'prop-types';
import { PlainText } from '@wordpress/block-editor';
import classnames from 'classnames';
const BlockTitle = ( { className, headingLevel, onChange, heading } ) => {
const TagName = `h${ headingLevel }`;
return (
<TagName>
<PlainText
className={ classnames(
'wc-block-component-title',
className
) }
value={ heading }
onChange={ onChange }
/>
</TagName>
);
};
BlockTitle.propTypes = {
/**
* Classname to add to title in addition to the defaults.
*/
className: PropTypes.string,
/**
* The value of the heading
*/
value: PropTypes.string,
/**
* Callback to update the attribute when text is changed
*/
onChange: PropTypes.func,
/**
* Callback to update the attribute when text is changed
*/
headingLevel: PropTypes.func,
};
export default BlockTitle;