Class

BlocksApi

BlocksApi()

Blocks Hooks. Instance name: blocksApi

Enables you to make modifications to the different blocks and replace default behaviour in your app pages in terms of appearance as well as functionality.

Constructor

# new BlocksApi()

Example
externalCodeSetup.blocksApi.METHOD_NAME

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