Skip to content

Commit

Permalink
Merge pull request #157 from PRX/feat/152-editor-blocks-config-styling
Browse files Browse the repository at this point in the history
152: Editor blocks and styling
  • Loading branch information
rpeterman-gp authored Jan 29, 2024
2 parents e25f852 + 367a479 commit 1a8f6e0
Show file tree
Hide file tree
Showing 8 changed files with 283 additions and 217 deletions.
2 changes: 1 addition & 1 deletion wp-content/plugins/tw-qa-block/build/index.asset.php
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'a96c1cdaf5f10916b7e7');
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'cbf0705fb32bbfc3723e');
2 changes: 1 addition & 1 deletion wp-content/plugins/tw-qa-block/build/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion wp-content/plugins/tw-qa-block/src/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function save(props) {
const { attributes } = props;
const { question, answer, bordered } = attributes;
const blockProps = useBlockProps.save();
const classNames = blockProps.className.split(" ");
const classNames = blockProps.className?.split(" ");
const classNamesSet = new Set(classNames);

classNamesSet.delete("wp-block-tw-qa-block");
Expand Down
8 changes: 8 additions & 0 deletions wp-content/themes/the-world/css/block-editor.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/* Adjust full width block size when sidebar is open. */
@media (min-width: 782px) {
.is-sidebar-opened
.block-editor-block-list__layout.is-root-container
> .block-editor-block-list__block.wp-block:is(.alignfull) {
width: calc(100vw - 280px);
}
}
107 changes: 107 additions & 0 deletions wp-content/themes/the-world/css/editor.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
body {
--_editor--content--width: 600px;
--_editor--content--gutter: 4rem;
--_editor--color--muted: #535355;
container-type: inline-size;
container-name: editor-content;
}

.wp-block-post-content {
display: block;
box-sizing: border-box;
max-width: var(--_editor--content--width);
margin-inline: auto;
padding-inline: var(--_editor--content--gutter);
padding-block-end: 2rem;
}

.wp-block-post-content > * + * {
margin-block-start: 1.75rem !important;
}
.wp-block-post-content > * + *:not(.alignleft, .alignright) {
margin-block-end: 0;
}

.block-editor-block-list__layout.is-root-container
> .wp-block:where(.alignwide, .alignfull):not(.alignleft, .alignright) {
position: relative;
left: 50%;
translate: -50% 0;
width: 100vw;
}
.block-editor-block-list__layout.is-root-container
> .wp-block:is(.alignwide):not(.alignleft, .alignright) {
max-width: var(--_editor--content--width);
}
.block-editor-block-list__layout.is-root-container
> .wp-block:is(.alignleft, .alignright) {
width: 44%;
}
.block-editor-block-list__layout.is-root-container > .wp-block:is(.alignleft) {
margin-inline-start: calc(var(--_editor--content--gutter) * -1);
}
.block-editor-block-list__layout.is-root-container > .wp-block:is(.alignright) {
margin-inline-end: calc(var(--_editor--content--gutter) * -1);
}

.block-editor-block-list__layout.is-root-container > .wp-block figcaption {
color: var(--_editor--color--muted);
font-size: 0.9rem;
}
.block-editor-block-list__layout.is-root-container
> .wp-block:is(.alignwide, .alignfull)
figcaption {
box-sizing: border-box;
max-width: var(--_editor--content--width);
margin-inline: auto;
padding-inline: var(--_editor--content--gutter);
}

.block-editor-block-list__layout.is-root-container
> :where(.wp-block-pullquote) {
color: var(--wp--preset--color--blue-900);
font-family: var(--wp--preset--font-family--system-serif);
border-color: var(--_editor--color--muted);
text-wrap: balance;
}
.block-editor-block-list__layout.is-root-container
> :where(.wp-block-pullquote)
> blockquote {
max-width: var(--_editor--content--width);
margin-inline: auto;
}
.block-editor-block-list__layout.is-root-container
> :where(.wp-block-pullquote)
> blockquote
> * {
white-space: unset !important;
}
.block-editor-block-list__layout.is-root-container
> :where(.wp-block-pullquote)
cite {
color: var(--_editor--color--muted);
}
.block-editor-block-list__layout.is-root-container
> :where(.wp-block-pullquote)
cite::before {
content: "-";
margin-inline-end: 1ch;
}

.block-editor-block-list__layout.is-root-container
> :is(
.wp-block-embed[data-title="Twitter"]:not(.alignleft, .alignright),
.wp-block-embed[data-title="Twitter"]:is(.alignwide, .alignfull)
) {
left: unset;
translate: unset;
width: auto;
max-width: 550px;
margin-inline: auto;
}

@container editor-content (min-width: 960px) {
.wp-block-post-content {
--_editor--content--width: 960px;
}
}
97 changes: 97 additions & 0 deletions wp-content/themes/the-world/functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -160,5 +160,102 @@ function tw_admin_styles() {
endif;
add_action( 'admin_head', 'tw_admin_styles' );

if ( ! function_exists( 'tw_admin_init_editor_styles' ) ) {
/**
* Set cookie to store auth token. SHould be an http cookies.
* Assume frontend will be served from the same domain.
*
* @return void
*/
function tw_admin_init_editor_styles() {
add_theme_support( 'editor-styles' );
add_editor_style( 'css/editor.css' );
}
}
add_filter( 'admin_init', 'tw_admin_init_editor_styles' );

if ( ! function_exists( 'tw_allowed_block_types' ) ) :
/**
* Set allowed Gutenberg blocks.
*
* @param bool|string[] $allowed_blocks Array of allowed blocks. Boolean to enable/disable all.
* @param WP_Block_Editor_Context $editor_context Current block editor context.
*
* @return bool|string[] Array of allowed blocks. Boolean to enable/disable all.
*/
function tw_allowed_block_types( $allowed_blocks, $editor_context ) {
$allowed_blocks = array(
// Text...
'core/paragraph',
'core/heading',
'core/list',
'core/list-item',
'core/pullquote',
'tw/qa-block',

// Media...
'core/image',
'core/audio',

// Design...
'core/separator',

// Embeds...
// Specific types of embeds are now variants of the embed block.
// Variants can be enabled in `./js/blockembed.js`.
'core/embed',
);

if ( 'page' === $editor_context->post->post_type ) {
$allowed_blocks[] = 'core/shortcode';
}

return $allowed_blocks;
}
endif;
add_action( 'allowed_block_types_all', 'tw_allowed_block_types', 25, 2 );

if ( ! function_exists( 'tw_block_editor_assets' ) ) :
/**
* Setup block editor scripts and styles.
*
* @uses wp_enqueue_scripts() Enqueue scripts hook.
* @uses wp_enqueue_styles() Registers style css file.
*/
function tw_block_editor_assets() {
wp_enqueue_script(
'tw-deny-list-blocks',
get_template_directory_uri() . '/js/blockembed.js',
array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
'1.0',
array( 'in_footer' => true )
);
wp_enqueue_style(
'tw-block-editor-styles',
get_template_directory_uri() . '/css/block-editor.css',
array(),
'1.0'
);
}
endif;
add_action( 'enqueue_block_editor_assets', 'tw_block_editor_assets' );

if ( ! function_exists( 'tw_remove_core_block_patterns' ) ) :
/**
* Remove core block patterns.
*
* @uses remove_theme_support() Allows a theme to de-register its support of a certain feature.
*/
function tw_remove_core_block_patterns() {
remove_theme_support( 'core-block-patterns' );
}
endif;
add_action( 'after_setup_theme', 'tw_remove_core_block_patterns' );

/**
* Prevent remote block patterns from loading.
*/
add_filter( 'should_load_remote_block_patterns', '__return_false' );

// Remove Windows Live Writer manifest link.
remove_action( 'wp_head', 'wlwmanifest_link' );
15 changes: 15 additions & 0 deletions wp-content/themes/the-world/js/blockembed.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
wp.domReady(function () {
const allowedEmbedBlocks = ["twitter", "youtube", "vimeo"];

wp.blocks.getBlockVariations("core/embed").forEach(function (blockVariation) {
if (-1 === allowedEmbedBlocks.indexOf(blockVariation.name)) {
wp.blocks.unregisterBlockVariation("core/embed", blockVariation.name);
}
});

wp.blocks.unregisterBlockStyle("core/image", ["default", "rounded"]);

wp.richText.unregisterFormatType("core/footnote");
wp.richText.unregisterFormatType("core/text-color");
wp.richText.unregisterFormatType("core/image");
});
Loading

0 comments on commit 1a8f6e0

Please sign in to comment.