Methods
# addCustomBlockRender(blockType, renderer)
Replaces the Gutenberg blocks that match with blockType using the render function.
Parameters:
| Name | Type | Description |
|---|---|---|
blockType |
BlockTypes | Block identifier |
renderer |
CustomBlockRenderCallback | Render function |
Example
User would like to customize the component when Video block is used
externalCodeSetup.blocksApi.addCustomBlockRender("core/video", (props) => {
const { block } = props;
const VideoComponent =
<>
<WebView
source={{
html: `<video width="980" playsinline controls autoplay src="${block.content}" ></video>`
}}
useWebKit={true}
originWhitelist={['*']}
allowsInlineMediaPlayback={true}
style={{
height: 250,
width: "auto",
}}/>
<View>
<Text> Watch our awesome video! </Text>
</View>
</>
return VideoComponent;
});# setBlockProps(blockType, props)
You can use this hook to modify the properties of the Gutenberg blocks. For example, you can modify the width of the video block to let it occupy the full width on any device.
Parameters:
| Name | Type | Description |
|---|---|---|
blockType |
BlockTypes | Block identifier |
props |
CustomBlockPropsCallback |
Example
Extend the width of video blocks used in lesson single screen
import { Platform } from 'react-native'
import {DEVICE_WIDTH} from "@src/styles/global";
export const applyCustomCode = externalCodeSetup => {
if (! Platform.isPad){
externalCodeSetup.cssApi.addGlobalStyle("lessonSingleScreenBlockContainer", { paddingHorizontal: 0 }, true);
externalCodeSetup.cssApi.addGlobalStyle("videoBlockContainer", { paddingHorizontal: 0 });
externalCodeSetup.blocksApi.setBlockProps("core/embed", (props) => {
const {block} = props;
if (block.data.provider === "vimeo" || block.data.provider === "youtube"){
return {
...props,
viewWidth: DEVICE_WIDTH
}
}
return props;
});
}
}# setProfileBlockBgImage(image)
Parameters:
| Name | Type | Description |
|---|---|---|
image |
number | Image resourse (via request('...src')) |
- Deprecated:
- Changes the Profile Block cover image