diff --git a/README.md b/README.md index 0cc9676..2f74a80 100644 --- a/README.md +++ b/README.md @@ -47,6 +47,7 @@ One way to ensure all dependencies are loaded is to use the [`@wordpress/depende - [`FileControls`](src/components/FileControls) - [`ImageControl`](src/components/ImageControl) - [`InnerBlockSlider`](src/components/InnerBlockSlider) +- [`LinkControl`](src/components/LinkControl) - [`LinkToolbar`](src/components/LinkToolbar) - [`PlainTextWithLimit`](src/components/PlainTextWithLimit) - [`PostPicker`](src/components/PostPicker) diff --git a/src/components/LinkControl/README.md b/src/components/LinkControl/README.md new file mode 100644 index 0000000..d0f3a73 --- /dev/null +++ b/src/components/LinkControl/README.md @@ -0,0 +1,22 @@ +# LinkControl + +The `LinkControl` component allows for adding a link. It is intended for use within the block settings UI that appears in the sidebar. + +The link control is just a wrapper for the core URL input component. The only difference is the visual appearance and API is more aligned with other sidebar controls such as the TextControl. + +## Usage + +```js +const { InspectorControls } = wp.blocks; +const { LinkControl } = hm.controls; +const { attributes, setAttributes } = props; + + + setAttributes( { link } ) } + /> + +``` diff --git a/src/components/LinkControl/index.js b/src/components/LinkControl/index.js new file mode 100644 index 0000000..3e3a2cd --- /dev/null +++ b/src/components/LinkControl/index.js @@ -0,0 +1,75 @@ +import PropTypes from 'prop-types'; +import React, { useEffect } from 'react'; + +import { URLInput } from '@wordpress/block-editor'; +import { BaseControl } from '@wordpress/components'; + +/** + * InspectorControl for image upload. + * + * @param {object} props - Component properties. + * @param {string} props.label - The label for the control. + * @param {string} props.id - The id for the control. + * @param {string} props.help - Help text for the control. + * @param {Function} props.onChange - Function to call when the value changes. + * @param {string} props.value - The current value of the control. + * @returns {React.ReactNode} Component. + */ +function LinkControl( { + label, + id, + help, + onChange, + value, +} ) { + const className = 'hm-block-editor-components-link-control'; + + // Need to inject Style tag into the head in order to override the styles within URLInput component without a CSS file. + useEffect( () => { + const style = document.createElement( 'style' ); + style.innerHTML = ` + .${ className } { + width: 100%; + } + + .${ className } .block-editor-url-input { + min-width: 0; + max-width: none; + position: relative; + } + + .${ className } .components-base-control__field, + .${ className } .components-input-control { + margin-bottom: 0; + } + `; + document.head.appendChild( style ); + return () => { + document.head.removeChild( style ); + }; + }, [ className ] ); + + return ( + + + + ); +} + +LinkControl.propTypes = { + label: PropTypes.string.isRequired, + help: PropTypes.string, + id: PropTypes.string, + onChange: PropTypes.func.isRequired, + value: PropTypes.string, +}; + +export default LinkControl; diff --git a/src/index.js b/src/index.js index 05a7ba4..7785825 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,7 @@ export { default as DateTimeControl } from './components/DateTimeControl'; export { default as ImageControl } from './components/ImageControl'; export { default as InnerBlockSlider } from './components/InnerBlockSlider'; export { default as InnerBlocksDisplaySingle } from './components/InnerBlockSlider/inner-block-single-display'; +export { default as LinkControl } from './components/LinkControl'; export { default as LinkToolbar } from './components/LinkToolbar'; export { default as PlainTextWithLimit } from './components/PlainTextWithLimit'; export { default as PostTitleControl } from './components/PostTitleControl';