Skip to content

Instantly share code, notes, and snippets.

Avatar

Rae Van Epps ravewebdev

View GitHub Profile
@ravewebdev
ravewebdev / headless-link-replacement.php
Created Dec 31, 2021
WordPress post link replacement for use on headless installs.
View headless-link-replacement.php
@ravewebdev
ravewebdev / custom-settings.php
Last active Dec 31, 2021
Examples of registering core and custom settings with WP GraphQL.
View custom-settings.php
<?php
/**
* Register custom settings with WordPress.
*/
function register_settings() {
register_setting(
'custom_settings_group',
'custom_settings',
[
'description' => esc_html__( 'Custom Settings', 'ravewebdev' ),
@ravewebdev
ravewebdev / update-block.js
Last active Oct 11, 2020
4.2. Perform Request and Update Block
View update-block.js
const FrontendTracker = ( props ) => {
// Add the following in place of the `return` statement from Part 1, step 2.1.
const saveUpdates = async () => {
setLoading( true );
setNotice( null );
const response = await apiFetch( {
path: `${initTracker.route}/${ dataAttributes.post_id }`,
method: 'POST',
@ravewebdev
ravewebdev / component-state.js
Last active Oct 11, 2020
4.1. Handle Component State
View component-state.js
const FrontendTracker = ( props ) => {
// Add the following before the `return()` block from Part 1, step 2.1.
const [ isLoading, setLoading ] = useState( false );
const [ notice, setNotice ] = useState( null );
useEffect( () => {
if ( null === notice ) {
return;
}
@ravewebdev
ravewebdev / localize-route.php
Last active Oct 11, 2020
3.2. Localize Route and Create Nonce
View localize-route.php
<?php
function localize_route() {
wp_localize_script( 'initiative-tracker-frontend-script', 'initTracker', [
'route' => 'rave-initiative/v1/initiative',
] );
}
add_action( 'wp_enqueue_scripts', 'localize_route' );
@ravewebdev
ravewebdev / custom-route.php
Last active Jul 16, 2020
3.1. Set Up Custom Route
View custom-route.php
<?php
register_rest_route( 'rave-initiative/v1', '/initiative/(?P<id>[\d]+)', [
'methods' => WP_REST_SERVER::EDITABLE,
'callback' => 'update_initiative',
'permission_callback' => 'check_initiative_permissions',
] );
function check_initiative_permissions( WP_REST_Request $request ) : bool {
$post_id = $request->get_param( 'id' ) ?? 0;
@ravewebdev
ravewebdev / block-replacement.js
Last active Oct 11, 2020
2.2. Static Block Replacement
View block-replacement.js
const trackerClass = '.wp-block-rave-initiative-tracker',
trackers = document.querySelectorAll( trackerClass );
trackers.forEach( ( tracker ) => {
const attributes = {
block_id: tracker.dataset.id,
post_id: parseInt( tracker.dataset.post_id, 10 ),
};
render(
@ravewebdev
ravewebdev / frontend-react.js
Last active Jul 23, 2020
2.1. Frontend React Component
View frontend-react.js
const FrontendTracker = ( props ) => {
const {
dataAttributes,
} = props;
const [ attributes, setAttributes ] = useState( {
block_id: 0,
} );
useEffect( () => {
View frontend-rendering.php
<?php
register_block_type( 'rave/initiative-tracker', array(
'editor_script' => 'initiative-tracker-editor-script',
'editor_style' => 'initiative-tracker-editor-style',
'style' => 'initiative-tracker-style',
'render_callback' => __NAMESPACE__ . '\render_block',
) );
function render_block( array $attributes ) : string {
$id = $attributes['id'];