diff --git a/README.md b/README.md index 86eb1e6..fd3ee02 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,7 @@ One way to ensure all dependencies are loaded is to use the [`@wordpress/depende - [`useActiveBlockStyle`](src/hooks/useActiveBlockStyle) - [`useBlockStyles`](src/hooks/useBlockStyles) - [`useDisallowedBlocks`](src/hooks/useDisallowedBlocks) +- [`useMediaSrc`](src/hooks/useMediaSrc) - [`useMeta`](src/hooks/useMeta) - [`useRenderAppenderWithBlockLimit`](src/hooks/useRenderAppenderWithBlockLimit) - [`useSelectBlock`](src/hooks/useSelectBlock) diff --git a/src/hooks/useMediaSrc/README.md b/src/hooks/useMediaSrc/README.md new file mode 100644 index 0000000..b97f3e9 --- /dev/null +++ b/src/hooks/useMediaSrc/README.md @@ -0,0 +1,45 @@ +# useMediaSrc + +The `useMediaSrc` hook allows for the easy retrieval of source media URLs from an ID. + +## Usage + +The `useMediaSrc` hook takes an ID and returns a URL or undefined. + +```js +import { useMediaSrc } from '@humanmade/block-editor-components'; + +function BlockEdit( { attributes, setAttributes } ) { + const { + videoId + } = attributes; + const videoUrl = useMediaSrc( videoId ); + + return ( + <> + + + setAttributes( { videoId: media.id } ) + } + value={ videoId } + render={ ( { open } ) => ( + + ) } + /> + +