';
26 |
27 | if ( $val = $this->get_attr_value( 'text' ) ) {
28 | printf( '
';
36 |
37 | }
38 |
39 | }
40 |
--------------------------------------------------------------------------------
/inc/modules/class-header.php:
--------------------------------------------------------------------------------
1 | label = __( 'Header', 'mpb' );
12 |
13 | // Set all attribute data.
14 | $this->attr = array(
15 | array( 'name' => 'heading', 'label' => __( 'Heading', 'mpb' ), 'type' => 'text' ),
16 | array( 'name' => 'subheading', 'label' => __( 'Subheading (optional)', 'mpb' ), 'type' => 'textarea' ),
17 | );
18 |
19 | parent::__construct( $args );
20 |
21 | }
22 |
23 | public function render() {
24 |
25 | $heading_tag = 'h2';
26 | $subheading_tag = 'p';
27 |
28 | echo '%s', esc_html( $val ) ); 29 | } 30 | 31 | if ( $val = $this->get_attr_value( 'source' ) ) { 32 | printf( '
%s', esc_html( $val ) ); 33 | } 34 | 35 | echo '
';
29 |
30 | if ( $val = $this->get_attr_value( 'heading' ) ) {
31 | printf( '<%s class="page-builder-heading-heading">%s', esc_attr( $heading_tag ), esc_html( $val ), esc_attr( $heading_tag ) );
32 | }
33 |
34 | if ( $val = $this->get_attr_value( 'subheading' ) ) {
35 | printf( '<%s class="page-builder-heading-subheading">%s', esc_attr( $subheading_tag ), esc_html( $val ), esc_attr( $subheading_tag ) );
36 | }
37 |
38 | echo '
';
39 |
40 | }
41 |
42 | }
43 |
--------------------------------------------------------------------------------
/inc/modules/class-image.php:
--------------------------------------------------------------------------------
1 | label = __( 'Image', 'mpb' );
12 |
13 | // Set all attribute data.
14 | $this->attr = array(
15 | array( 'name' => 'image', 'label' => __( 'Image / Gallery', 'mpb' ), 'type' => 'attachment', 'description' => 'Select one or more images.', 'config' => [ 'multiple' => true ] ),
16 | array( 'name' => 'caption', 'label' => __( 'Caption', 'mpb' ), 'type' => 'text' ),
17 | );
18 |
19 | parent::__construct( $args );
20 |
21 | }
22 |
23 | public function render() {
24 |
25 | $image_ids = (array) $this->get_attr_value( 'image' );
26 |
27 | if ( empty( $image_ids ) ) {
28 | return;
29 | }
30 |
31 | echo '';
32 |
33 | if ( count( $image_ids ) > 1 ) {
34 | echo do_shortcode( sprintf( '[gallery ids="%s"]', implode( ',', $image_ids ) ) );
35 | } else {
36 | echo wp_get_attachment_image( $image_ids[0], 'large' );
37 | }
38 |
39 | if ( $caption = $this->get_attr_value( 'caption' ) ) {
40 | printf( '
';
44 |
45 | }
46 |
47 | public function get_json() {
48 | $data = parent::get_json();
49 | $data['image'] = array_map( function( $value ) {
50 | return wp_get_attachment_image_src( $value, 'large' );
51 | }, $data['image'] );
52 | return $data;
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/inc/modules/class-module.php:
--------------------------------------------------------------------------------
1 | update_all_attr_values( $args['attr'] );
15 | }
16 | }
17 |
18 | public function render() {
19 | ?>
20 | %s
', esc_html( $caption ) ); 41 | } 42 | 43 | echo 'You must implement `render` in
21 | render(); 27 | return ob_get_clean(); 28 | } 29 | 30 | public function get_json() { 31 | 32 | $json = array(); 33 | foreach ( $this->attr as $attr ) { 34 | $json[ $attr['name'] ] = $this->get_attr_value( $attr['name'] ); 35 | } 36 | 37 | return $json; 38 | } 39 | 40 | protected function get_attr( $attr_name ) { 41 | foreach ( $this->attr as $key => $attr ) { 42 | if ( $attr['name'] === $attr_name ) { 43 | return $attr; 44 | } 45 | } 46 | } 47 | 48 | protected function get_attr_value( $attr_name ) { 49 | if ( $attr = $this->get_attr( $attr_name ) ) { 50 | return isset( $attr['value'] ) ? $attr['value'] : null; 51 | } 52 | } 53 | 54 | protected function update_all_attr_values( array $data ) { 55 | foreach ( $data as $attr ) { 56 | if ( isset( $attr['name'] ) && isset( $attr['value'] ) ) { 57 | $this->update_attr_value( $attr['name'], $attr['value'] ); 58 | } 59 | } 60 | } 61 | 62 | protected function update_attr_value( $attr_name, $value ) { 63 | foreach ( $this->attr as &$attr ) { 64 | if ( $attr_name === $attr['name'] ) { 65 | $attr['value'] = $value; 66 | } 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /inc/modules/class-text.php: -------------------------------------------------------------------------------- 1 | label = __( 'Text', 'mpb' ); 12 | 13 | // Set all attribute data. 14 | $this->attr = array( 15 | array( 'name' => 'body', 'label' => __( 'Content', 'mpb' ), 'type' => 'html' ), 16 | ); 17 | 18 | parent::__construct( $args ); 19 | 20 | } 21 | 22 | public function render() { 23 | 24 | if ( $val = $this->get_attr_value( 'body' ) ) { 25 | printf( '%s
', wpautop( wp_kses_post( $val ) ) );
26 | }
27 |
28 | }
29 |
30 | }
31 |
--------------------------------------------------------------------------------
/modular-page-builder.php:
--------------------------------------------------------------------------------
1 | register_module( 'header', __NAMESPACE__ . '\Modules\Header' );
45 | $plugin->register_module( 'text', __NAMESPACE__ . '\Modules\Text' );
46 | $plugin->register_module( 'image', __NAMESPACE__ . '\Modules\Image' );
47 | $plugin->register_module( 'blockquote', __NAMESPACE__ . '\Modules\Blockquote' );
48 |
49 | $plugin->register_builder_post_meta( 'modular-page-builder', array(
50 | 'title' => __( 'Page Body Content' ),
51 | 'api_prop' => 'page_builder',
52 | 'allowed_modules' => array( 'header', 'text', 'image', 'video', 'blockquote', ),
53 | ) );
54 |
55 | }, 100 );
56 |
57 | if ( defined( 'WP_CLI' ) && WP_CLI ) {
58 | require __DIR__ . '/inc/class-wp-cli.php';
59 | WP_CLI::add_command( 'modular-page-builder', __NAMESPACE__ . '\\CLI' );
60 | }
61 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "modular-page-builder",
3 | "version": "0.0.1",
4 | "main": "Gruntfile.js",
5 | "author": "Human Made Limited",
6 | "license": "GPL V2",
7 | "devDependencies": {
8 | "browserify": "^8.1.3",
9 | "browserify-shim": "^3.8.3",
10 | "grunt": "^0.4.5",
11 | "grunt-autoprefixer": "^3.0.3",
12 | "grunt-browserify": "^3.4.0",
13 | "grunt-contrib-jshint": "^0.11.3",
14 | "grunt-contrib-watch": "^0.6.1",
15 | "grunt-phpcs": "^0.4.0",
16 | "grunt-sass": "^1.0.0",
17 | "remapify": "1.4.3"
18 | },
19 | "browserify": {
20 | "transform": [
21 | "browserify-shim"
22 | ]
23 | },
24 | "browserify-shim": {
25 | "jquery": "global:jQuery",
26 | "wp": "global:wp",
27 | "underscore": "global:_",
28 | "backbone": {
29 | "exports": "global:Backbone",
30 | "depends": [
31 | "jquery",
32 | "underscore"
33 | ]
34 | },
35 | "wp": {
36 | "exports": "global:wp",
37 | "depends": [
38 | "backbone"
39 | ]
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/templates/builder.tpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
11 |
12 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/templates/field-attachment.tpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | <# if ( Array.isArray( data.value ) && data.value.length ) { #>
6 | <# _.each( data.value, function( attachment ) { #>
7 |
8 |
9 | <# if ( 'image' === attachment.type && attachment.sizes ) { #>
10 | 
15 | <# } else if ( 'image' !== attachment.type ) { #>
16 | 
17 |
18 | <# } else { #>
19 |
20 | <# } #>
21 |
22 |
23 |
24 | <# } ); #>
25 | <# } #>
26 |
27 |
28 |
29 | <# if ( data.config.sizeReq ) { #>
30 | {{ attachment.filename }}
Images must be {{ data.config.sizeReq.width }}px × {{ data.config.sizeReq.height }}px
31 | <# } #> 32 | -------------------------------------------------------------------------------- /templates/field-checkbox.tpl.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /templates/field-content-editable.tpl.html: -------------------------------------------------------------------------------- 1 |{{ data.value }}
7 |
--------------------------------------------------------------------------------
/templates/field-link.tpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/templates/field-number.tpl.html:
--------------------------------------------------------------------------------
1 | id="{{ data.id }}"<# } #>
4 | class="number-text"
5 | value="{{ data.value }}"
6 | />
7 |
--------------------------------------------------------------------------------
/templates/field-select.tpl.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/templates/field-text.tpl.html:
--------------------------------------------------------------------------------
1 |
7 | placeholder="{{ data.config.placeholder }}"
8 | <# } #>
9 | />
10 |
--------------------------------------------------------------------------------
/templates/field-textarea.tpl.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/templates/field-wysiwyg.tpl.html:
--------------------------------------------------------------------------------
1 | 'mpb-placeholder-name',
7 | 'textarea_rows' => 3,
8 | 'teeny' => true,
9 | 'tinymce' => array(
10 | 'resize' => false,
11 | 'wp_autoresize_on' => true,
12 | )
13 | ) );
14 |
15 | wp_editor( 'mpb-placeholder-content', 'mpb-placeholder-id', $args );
16 |
17 | $editor = ob_get_clean();
18 |
19 | $editor = str_replace( 'mpb-placeholder-name', 'mpb-text-body-{{ data.id }}', $editor );
20 | $editor = str_replace( 'mpb-placeholder-id', 'mpb-text-body-{{ data.id }}', $editor );
21 | $editor = str_replace( 'mpb-placeholder-content', '{{{ data.value }}}', $editor );
22 |
23 | echo $editor;
24 |
25 | ?>
26 |
--------------------------------------------------------------------------------
/templates/form-row.tpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | <# if ( 'undefined' !== typeof data.desc && data.desc.length ) { #>
6 | {{ data.desc }}
7 | <# } #>
8 |
--------------------------------------------------------------------------------
/templates/module-edit-blockquote.tpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/templates/module-edit-header.tpl.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/templates/module-edit-image.tpl.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
2 |
3 |
9 |
--------------------------------------------------------------------------------
/templates/module-edit-text.tpl.html:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
8 |
3 |
4 | <# if ( 'heading' in data.attr ) { #>
5 |
33 |
--------------------------------------------------------------------------------
/templates/module-edit-tools.tpl.html:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | <# } #>
10 |
11 |
12 |
13 |
14 |
15 |
16 | <# if ( 'style' in attr ) { #>
17 |
18 |
19 |
29 |
30 | <# } #>
31 |
32 |