Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Commit

Permalink
gutenberg editor styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@derweili
derweili committed Nov 9, 2018
1 parent aafc19c commit 7f71b08
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 105 deletions.
64 changes: 0 additions & 64 deletions library/foundation.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,71 +156,7 @@ function foundationpress_active_list_pages_class( $input ) {
add_filter( 'wp_list_pages', 'foundationpress_active_list_pages_class', 10, 2 );
endif;

/**
* Enable Foundation responsive embeds for WP video embeds
*/

if ( ! function_exists( 'foundationpress_responsive_video_oembed_html' ) ) :
function foundationpress_responsive_video_oembed_html( $html, $url, $attr, $post_id ) {

// Whitelist of oEmbed compatible sites that **ONLY** support video.
// Cannot determine if embed is a video or not from sites that
// support multiple embed types such as Facebook.
// Official list can be found here https://codex.wordpress.org/Embeds
$video_sites = array(
'youtube', // first for performance
'collegehumor',
'dailymotion',
'funnyordie',
'ted',
'videopress',
'vimeo',
);

$is_video = false;

// Determine if embed is a video
foreach ( $video_sites as $site ) {
// Match on `$html` instead of `$url` because of
// shortened URLs like `youtu.be` will be missed
if ( strpos( $html, $site ) ) {
$is_video = true;
break;
}
}

// Process video embed
if ( true == $is_video ) {

// Find the `<iframe>`
$doc = new DOMDocument();
$doc->loadHTML( $html );
$tags = $doc->getElementsByTagName( 'iframe' );

// Get width and height attributes
foreach ( $tags as $tag ) {
$width = $tag->getAttribute( 'width' );
$height = $tag->getAttribute( 'height' );
break; // should only be one
}

$class = 'responsive-embed'; // Foundation class

// Determine if aspect ratio is 16:9 or wider
if ( is_numeric( $width ) && is_numeric( $height ) && ( $width / $height >= 1.7 ) ) {
$class .= ' widescreen'; // space needed
}

// Wrap oEmbed markup in Foundation responsive embed
return '<div class="' . $class . '">' . $html . '</div>';

} else { // not a supported embed
return $html;
}

}
add_filter( 'embed_oembed_html', 'foundationpress_responsive_video_oembed_html', 10, 4 );
endif;

/**
* Get mobile menu ID
Expand Down
53 changes: 15 additions & 38 deletions src/assets/scss/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ when Gutenberg supports styling those variations more intuitively.

@include foundation-typography;
@include foundation-button;
@include foundation-table;


/** === Content Width === */
Expand All @@ -28,30 +29,24 @@ when Gutenberg supports styling those variations more intuitively.
}
}



/** === Base Typography === */

body {
font-size: $global-font-size;
font-family: $body-font-family;
color: $body-font-color;
}

/** === Post Title === */
.editor-post-title__block .editor-post-title__input{
@extend h1;
}


/** === Gallery === */
// TODO: Check if the gallery block needs additional styling


/** === Button === */
.wp-block-button {

// add general foundation button styling
// add general foundation button styling to button in editor
.wp-block-button__link {
@extend .button;
}
Expand All @@ -75,45 +70,27 @@ body {
}
}

/** === Blockquote === */
// TODO: Adjust Blockquote Styling
/** === File === */
.wp-block-file__button{
@include button();
}


/** === Pullquote === */
// TODO: Adjust Pullquote Styling



/** === File === */
// TODO: Check if the File block needs additional styling


/** === Verse === */
// TODO: Check if the Verse block needs additional styling


/** === Code === */
// TODO: Check if the Code block needs additional styling

.wp-block-paragraph.has-background{
padding: rem-calc(20px 30px);
}

/** === Table === */
// TODO: Check if the Table block needs additional styling

/** === Separator === */
// TODO: Check if the Separator block needs additional styling


/** === Latest Posts, Archives, Categories === */
// TODO: Check if the Latest Posts, Archives, Categories blocks needs additional styling

.wp-block-table td{
border: none;
}

/** === Latest Posts grid view === */
// TODO: Check if the Latest Posts grid view block needs additional styling


/** === Latest Comments === */
// TODO: Check if the Latest Comments grid view block needs additional styling

.wp-block-latest-posts.is-grid{
list-style: none;
}

/** === Classic Editor === */
// TODO: I think we still need to provide some styling for the classic editor
22 changes: 19 additions & 3 deletions src/assets/scss/global/_gutenberg.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,21 @@
}

/** === Button === */
// TODO: add support for color palette

.wp-block-button {

// add general foundation button styling
.wp-block-button__link {
@extend .button;
@each $color, $code in $foundation-palette {

&.has-#{$color}-background-color {
background-color: $code;
}

&.has-#{$color}-color {
color: $code;
}
}
}

// add special styling for squared buttons
Expand All @@ -37,6 +45,14 @@
&.is-style-outline:hover,
&.is-style-outline:focus,
&.is-style-outline:active {
background: transparent;
// background: transparent;
.wp-block-button__link{
// background: transparent;
}
}
}

/** === File === */
.wp-block-file .wp-block-file__button{
@include button();
}

1 comment on commit 7f71b08

@philiprabbett
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why remove foundationpress_responsive_video_oembed_html?

Please sign in to comment.