/** * Rest API functions * * @package GenerateBlocks */ if ( ! defined( 'ABSPATH' ) ) { exit; } /** * Class GenerateBlocks_Rest */ class GeneratePress_Rest extends WP_REST_Controller { /** * Instance. * * @access private * @var object Instance */ private static $instance; /** * Namespace. * * @var string */ protected $namespace = 'generatepress/v'; /** * Version. * * @var string */ protected $version = '1'; /** * Initiator. * * @return object initialized object of class. */ public static function get_instance() { if ( ! isset( self::$instance ) ) { self::$instance = new self(); } return self::$instance; } /** * GeneratePress_Rest constructor. */ public function __construct() { add_action( 'rest_api_init', array( $this, 'register_routes' ) ); } /** * Register rest routes. */ public function register_routes() { $namespace = $this->namespace . $this->version; register_rest_route( $namespace, '/reset/', array( 'methods' => WP_REST_Server::EDITABLE, 'callback' => array( $this, 'reset' ), 'permission_callback' => array( $this, 'update_settings_permission' ), ) ); } /** * Get edit options permissions. * * @return bool */ public function update_settings_permission() { return current_user_can( 'manage_options' ); } /** * Reset settings. * * @param WP_REST_Request $request request object. * * @return mixed */ public function reset( WP_REST_Request $request ) { delete_option( 'generate_settings' ); delete_option( 'generate_dynamic_css_output' ); delete_option( 'generate_dynamic_css_cached_version' ); return $this->success( __( 'Settings reset.', 'generatepress' ) ); } /** * Success rest. * * @param mixed $response response data. * @return mixed */ public function success( $response ) { return new WP_REST_Response( array( 'success' => true, 'response' => $response, ), 200 ); } /** * Failed rest. * * @param mixed $response response data. * @return mixed */ public function failed( $response ) { return new WP_REST_Response( array( 'success' => false, 'response' => $response, ), 200 ); } /** * Error rest. * * @param mixed $code error code. * @param mixed $response response data. * @return mixed */ public function error( $code, $response ) { return new WP_REST_Response( array( 'error' => true, 'success' => false, 'error_code' => $code, 'response' => $response, ), 401 ); } } GeneratePress_Rest::get_instance(); CSS Styling - Apkdone

CSS Styling

It wouldn’t be a FlintSkin site without a little CSS… and i mean a very little CSS.

CSS Styling

Owi Editor

In Comparison to the original Volume which required over 350 lines of CSS, Volume remastered uses less that 50. But why do we need CSS when Blocks does it all? I hear you ask. Well there are somethings that i just like to tweak and sometimes a little CSS is required.

The CSS added to the Site can be found in Customizer > Additional CSS. Lets take a closer look at what each of them does

Post navigation

the default behaviour of the Post Navigation Block Element is to display a 50/50 row showing the previous and next post. The following CSS removes the empty space when a user is on the first or last post so the block spans the full width.

/* Custom Post Navigation remove empty classes */
.featured-navigation .gb-grid-column:empty {
    flex: 0 1;
}

@media(min-width: 769px) {
    .featured-navigation .gb-grid-column:not(:empty) {
        flex: 1 0;
    }
}

Single Post Featured Images

the following CSS adjusts the featured image background size for tablet, and removes it from Mobile

/* Single Post Hero image responsive controls */
@media(max-width: 1024px) and (min-width: 769px) {
    .page-hero-block:before {
        background-size: cover;
    }
    .featured-column,
    .featured-column img.wp-post-image {
        width: 100% !important;
    }
}

@media(max-width: 768px) {
    .page-hero-block:before {
        background: none;
    }
}

Post Archives align meta to bottom of post

A simple flex box CSS to push the last element in the post-summary ( the post meta ) to align vertically at the bottom of the post.

/* Post Archives - force post meta to vertically align bottom */
.generate-columns-container .post>.gb-container,
.generate-columns-container .post>.gb-container>.gb-inside-container,
.post-summary>.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-summary {
    flex: 1;
}

.post-summary>.gb-inside-container>*:last-child {
    margin-top: auto;
}

Border radius on post archive images

/* Add border radius to post archive images */
.generate-columns-container .dynamic-featured-image {
    border-radius: 4px;
}