Class Module extends

I’m trying to write a module and have a question. What I’m trying to do is very similar to “Browse Preview”, but adds buttons to each item.
In my src > Site > BlockLayout > BrowseWithButtons.php file, does it have to say

class BrowseWithButtons extends AbstractBlockLayout implements TemplateableBlockLayoutInterface

or can I say

class BrowseWithButtons extends BrowsePreview

?

Is there something similar for the
view > common > block-layout > BrowseWithButtons.phtml ?

I may also need these?
asset > js > browse-with-buttons.js
asset > sass > components > blocks > _browse-with_buttons.scss

And actually, what is the difference between making this a module and just adding those files to my theme?

Another question along this same vein-- is it possible to write a theme that just extends another theme?

You can extend a block class like that, yes. There isn’t really a similar concept for the layout file… you can call one layout from another but that would mostly only help you wrap content around the original layout, not change things internally.

Though, instead of doing this, you might want to use a block template for the browse preview. If you want to keep the admin form for a block the same and just change some of the markup it uses on the public site, that’s what a block template is designed to do. You’d just add a file in the right location in your theme, and a line to your theme.ini, and then users would be able to choose your template when using a browse preview block, and you wouldn’t have to extend the block or register a new one or anything.

That is good to know, but I would still need to add some customizations to the form anyway to make it work for more than one site. For instance, up until now, I’ve written the same basic block in an HTML block for three sites, and all of them have the first button say “LEARN MORE” and lead to the item’s page. But then the second button is different on all three. One says “SEE INTERVIEW” and goes to the item’s media page. The second and third both go to a certain page (which is another thing I’m working on–having it dynamically fill in a blank page so we don’t have to fill up the “Pages” in Admin), but one says “SOURCES” and the other says “SEE MAP”. And all three have different colors on the buttons.

So right now I’m working on a form for the buttons have options for the background color and text color, or to use an image from the Asset panel (what the sites currently use). The color options would include those defined in the themeSettings, as well as their light or dark versions, or a custom option. This is what that part looks like so far (I haven’t tested it yet):

            $styleForm->add([
                'name' => 'o:block[__blockIndex__][o:data][button-color]',
                'type' => Element\Select::class,
                'options' => [
                    'label' => 'Button Color', // @translate
                    'info'  => 'Color of button. Default is the secondary color of the color scheme defined in the Theme Settings.', // @translate
                    'value_options' => [ // Configure from themeSettings unless custom
                        'primary-color' => [
                            'label' => 'Theme Color #1', // @translate
                            'type'  => Element\Color::class,
                            'options' => [
                                'primary-light' => 'Light', // @translate
                                'primary' => 'Normal', // @translate
                                'primary-dark' => 'Dark', // @translate
                            ],
                        ],
                        'second-color' => [
                            'label' => 'Theme Color #2', // @translate
                            'type'  => Element\Color::class,
                            'options' => [
                                'second-light' => 'Light', // @translate
                                'second' => 'Normal', // @translate
                                'second-dark' => 'Dark', // @translate
                            ],
                        ],
                        'third-color' => [
                            'label' => 'Theme Color #3', // @translate
                            'type'  => Element\Color::class,
                            'options' => [
                                'third-light' => 'Light', // @translate
                                'third' => 'Normal', // @translate
                                'third-dark' => 'Dark', // @translate
                            ],
                        ],
                        'fourth-color' => [
                            'label' => 'Theme Color #4', // @translate
                            'type'  => Element\Color::class,
                            'options' => [
                                'fourth-light' => 'Light', // @translate
                                'fourth' => 'Normal', // @translate
                                'fourth-dark' => 'Dark', // @translate
                            ],
                        ],
                        'fifth-color' => [
                            'label' => 'Theme Color #5', // @translate
                            'type'  => Element\Color::class,
                            'options' => [
                                'fifth-light' => 'Light', // @translate
                                'fifth' => 'Normal', // @translate
                                'fifth-dark' => 'Dark', // @translate
                            ],
                        ],
                        'custom-color' => [
                            'label' => 'Custom Color', // @translate
                            'type'  => Element\ColorPicker::class,
                        ],
                    ],
                ],
            ]);

There will also be a place to define the text, the text color, and of course, what the button does. If I want to go crazy later, I may also add additional options such as rounded corners, hover overlay, and text stroke color.

Go ahead and laugh–I know that’s a lot. But my artist’s brain has a different definition of “highly customizable” than what most (if not all) of the modules offer–at least when it comes to “making it pretty”. Well, that is until after my recent update and saw the new side menu settings for each block. That made me do a little happy dance when I saw things like Background Color and Image options.

I was planning on writing a theme that provided my customization options, but would it be better/easier to make it a module that adds it to any theme’s settings and options?