Front-end Editing with CMB2

class: middle, inverse, center

# Front-end Editing with CMB2
---
name: cmb2

.left-column[
## CMB2
]
.right-column[
CMB2 is a developer's toolkit for building metaboxes, custom fields, and forms for WordPress that will blow your mind.

- Easily create custom meta boxes

- Multiple field types

- Numerous hooks and filters
]

---

.left-column[
## Things we care about
]
.right-column[

]

---

.left-column[
## Things we care about
]
.right-column[

- Displaying a form
]

---

.left-column[
## Things we care about
]
.right-column[

- Displaying a form
- Handling the data
]

---

.left-column[
## Things we care about
]
.right-column[

- Displaying a form
- Handling the data
- JS Niceties
]

---

.left-column[
## Things we care about
]
.right-column[

- Displaying a form
- Handling the data
- JS Niceties
- Nonces
]

---

.left-column[
## Things we care about
]
.right-column[

- Displaying a form
- Handling the data
- JS Niceties
- Nonces
- Security
]

---

.left-column[
## How it Works
]
.right-column[

- Create front-end editing shortcode
- Register front-end editing form in CMB2
- Set up the code to display the form
- Handle front-end form data
]
---

### Create shortcode

--

```php
add_shortcode( 'frontend_form', 'frontend_form' );
public function frontend_form( $atts = array() ) {
	// Handler code here.
}
```

---
### Register form in CMB2

--

```php
add_action( 'cmb2_init', 'frontend_form_register' );
public function frontend_form_register() {
	// Create the CMB2 object.
	$cmb = new_cmb2_box( array(
		'id'           => 'jpry_front_end_form',
		'object_types' => array( 'post' ),
		'hookup'       => false,
		'save_fields'  => false,
		// 'cmb_styles'   => false,
	) );

// Register our fields.
	$cmb->add_field( array(
		'name'       => __( 'Title', 'jpry-front-end-editor' ),
		'id'         => 'submitted_post_title',
		'type'       => 'text',
	) );
	$cmb->add_field( array(
		'name'       => __( 'Post Content', 'jpry-front-end-editor' ),
		'id'         => 'submitted_post_content',
		'type'       => 'wysiwyg',
		'options'    => array(
			'textarea_rows' => 16,
			'media_buttons' => true,
		),
	) );
}
```

---
### Display the form

--

```php
// Get CMB2 metabox object.
$post_id = 123;
$cmb = cmb2_get_metabox( 'metabox_id', $post_id );
```

--

```php
// Parse attributes.
$default_atts = array(
	'post_status' => 'publish',
);
$atts = shortcode_atts( $default_atts, $atts, 'jpry-front-end-editor' );
```

--

```php
// Add attributes as hidden fields
$name = 'atts';
foreach ( $field_data as $key => $value ) {
	$cmb->add_hidden_field( array(
		'field_args' => array(
			'id'      => "{$name}[{$key}]",
			'type'    => 'hidden',
			'default' => $value,
		),
	) );
}
```
```

```

---
### Display the form

```php
// Initiate our output variable.
$output = '';

// Get our form.
$post_id = 123;
$output .= cmb2_get_metabox_form(
	$cmb,
	$post_id,
	array(
		'save_button' => __( 'Submit Post', 'jpry-front-end-editor' ),
	)
);

echo $output;
```

---
### Handle the data

--

```php
// If no form submission, bail.
if ( empty( $_POST ) || ! isset( $_POST['object_id'] ) ) {
	return false;
}
```

--

```php
// Bail if we didn't get a post object back.
$post = get_post( (int) sanitize_text_field( $_POST['object_id'] ) );
if ( is_null( $post ) ) {
	return false;
}
```