# Ninja Forms Views

[0] Fix | Delete

[1] Fix | Delete

Ninja Forms Views is a submissions table display application integrated with the WordPress Block Editor.

[2] Fix | Delete

[3] Fix | Delete

## Development

[4] Fix | Delete

[5] Fix | Delete

Compilation, testing and local development are documented in the main plugin readme file.

[6] Fix | Delete

[7] Fix | Delete

## Key Concepts

[8] Fix | Delete

[9] Fix | Delete

The application is deployed in two main parts, the JavaScript "block" and the PHP REST API.

[10] Fix | Delete

[11] Fix | Delete

### The "Block"

[12] Fix | Delete

[13] Fix | Delete

The JavaScript "block" consists of two entry points: the block editor (`entry point blocks.js`) and the "front end" (entry point `render.js`).

[14] Fix | Delete

[15] Fix | Delete

Both entry points share the `<FormsSubmissionsTable />` component, which is an implementation of the `react-table-component` - a headless table UI component for React.

[16] Fix | Delete

[17] Fix | Delete

### Things to Know

[18] Fix | Delete

[19] Fix | Delete

#### Block Attributes on the "Front End"

[20] Fix | Delete

[21] Fix | Delete

Block attributes are passed to the block's `render_callback` function, but are not otherwise directly available in a "front end" script. Additionally, attributes are per-block-instance.

[22] Fix | Delete

[23] Fix | Delete

Because of this, each of the block attributes are localized within the `render_callback` as a JSON encoded array, which is then parsed when rendered to the DOM.

[24] Fix | Delete

[25] Fix | Delete

#### Form Data Store with @wordpress/data

[26] Fix | Delete

[27] Fix | Delete

Form data is managed by a centralized data registry using `@wordpress/data`). The `Store` provides an API for `select`ing data from the centralized data registry, known as `selectors`. This includes support for resolving missing data from an external source, which is fulfilled by a REST API.

[28] Fix | Delete

[29] Fix | Delete

#### Block Alignment Implementation

[30] Fix | Delete

[31] Fix | Delete

The `<BlockAlignmentToolbar />` provides alignment and **width** settings which allow the width of a block to break-out of the page container - this includes **wide** and **full** widths, which are often use for "cover images".

[32] Fix | Delete

[33] Fix | Delete

Due to the nature of tables, the `<BlockAlignmentToolbar />` is implemented as a means by which to provide additional width to a table display.

[34] Fix | Delete

[35] Fix | Delete

Unfortunately, this is not a straight forward implementation, because of the different needs of the block editor vs the page display of a block.

[36] Fix | Delete

[37] Fix | Delete

- The `registerBlockType` definition uses the `getEditWrapperProps()` property to inject a `data-align` attribute to the Edit component wrapper.

[38] Fix | Delete

- The `render_callback` function parses the block attributes to inject an additional `align{alignment}` class name to the `<div />` placeholder.

[39] Fix | Delete

[40] Fix | Delete

#### The REST API

[41] Fix | Delete

[42] Fix | Delete

The REST API provides asynchronous access to the Ninja Forms data: Forms, Fields, and Submissions.

[43] Fix | Delete

[44] Fix | Delete

Currently, all form data is served via a single Route (`ninja-forms-views/forms`), but will be refactored into seperate endpoints for forms, fields, and submissions - with submissions supporting pagination.

[45] Fix | Delete

[46] Fix | Delete

[47] Fix | Delete

[48] Fix | Delete