Edit a block
This topic describes the structure and features of the block editor to help you quickly learn how to develop blocks.
After you open the block editor, you can use the canvas and widget configuration tools to access all its features.
The style and features of the block editor are consistent with those of the canvas editor. For more information about the features and widgets, see PC Canvas Editor Overview and Asset Management.
Block editor page overview
Widget configuration in a block
Widget data source configuration in a block
No. | Name | Description |
1 | Toolbar | The toolbar is at the top of the editor page. Use the toolbar to switch editor pages, show or hide modules, configure block settings, and preview or publish your blocks. |
2 | Layer | The layer list shows the layer position of each widget on the canvas. You can manually adjust the vertical order and thumbnail style of each widget layer as needed. The layer feature in the block editor is almost the same as in the canvas editor of a visualization application. For more information, see View Switching and Moving Widget Layer Positions. |
3 | Widget list | In the widget list, you can view and search for different types of widgets. Drag widgets to the block canvas to configure them and develop your block. |
4 | Block settings | Click a blank area of the block canvas. The basic configuration parameters for the block editor appear on the right. In the block configuration parameters, you can adjust the common sizes and the size of the block, set the background color and image, and select a scaling method to adjust the grid size. For more information, see Block settings. |
5 | Widget configuration items | Click any widget on the block canvas. The widget configuration parameters page appears on the right. The method for configuring widgets in the block editor is the same as in the canvas editor of a visualization application. For more information about the configuration method, see Widget Guide. |
6 | Widget data source | Click any widget on the block canvas. The widget data source configuration page appears on the right. The block editor supports two types of widget data sources: Static data source and API. The data source panel supports automatic updates. The API data source type supports GET, POST, and PUT request methods. The data source configuration panel supports data filters and lets you resend requests through blueprints. For more information about how to configure a data source, see Set an Asset Data Source and Use a Filter. |
Block settings
Click a blank area outside the block canvas. The block configuration panel appears on the right.
Name | Description |
Common sizes | Sets the common size type for the block on the canvas. Options include Landscape (for PC) 480×260 px, Landscape (for PC) 900×260 px, Portrait layout (for large screens) 260×940 px, Portrait layout (for large screens) 380×940 px, Portrait layout (for large screens) 480×940 px, and Custom size. |
Block size | Sets the width and height of the block. The default is Landscape (for PC) 480×260 px. The unit is px. |
Background | Adjusts the background color of the block. |
Page scaling method | Select a scaling method based on the display size of the block. Options include Full screen, Scale to fit width, Scale to fit height, Scale to fit height (scrollable), Scale to fit and center, and No scaling. |
Loading state image | Sets the image to display when the block is loading. You can upload an image by entering its URL. You can also click the Change button in the image box or drag an image from your local computer into the box. |
Grid size | The grid size is the smallest unit a widget can be moved on the block page. The widget borders automatically snap to the grid edges. The minimum value is 1 px, which allows for smooth movement. |
Thumbnail | Click the Take Screenshot button in the box to the right of the thumbnail to capture a thumbnail for the current block. |